diff --git a/static/js/lightbox.js b/static/js/lightbox.js
index 4e357ff481..84d6db7cb3 100644
--- a/static/js/lightbox.js
+++ b/static/js/lightbox.js
@@ -1,5 +1,7 @@
 import $ from "jquery";
 
+import render_lightbox_overlay from "../templates/lightbox_overlay.hbs";
+
 import * as blueslip from "./blueslip";
 import {LightboxCanvas} from "./lightbox_canvas";
 import * as message_store from "./message_store";
@@ -280,6 +282,9 @@ export function next() {
 
 // this is a block of events that are required for the lightbox to work.
 export function initialize() {
+    const rendered_lightbox_overlay = render_lightbox_overlay();
+    $("body").append(rendered_lightbox_overlay);
+
     $("#main_div, #compose .preview_content").on("click", ".message_inline_image a", function (e) {
         // prevent the link from opening in a new page.
         e.preventDefault();
diff --git a/templates/zerver/app/lightbox_overlay.html b/static/templates/lightbox_overlay.hbs
similarity index 67%
rename from templates/zerver/app/lightbox_overlay.html
rename to static/templates/lightbox_overlay.hbs
index ea6068065c..b950580d5f 100644
--- a/templates/zerver/app/lightbox_overlay.html
+++ b/static/templates/lightbox_overlay.hbs
@@ -4,14 +4,14 @@
             <div class="title"></div>
             <div class="user"></div>
         </div>
-        <div class="exit" aria-label="{{ _('Close') }}"><span aria-hidden="true">x</span></div>
+        <div class="exit" aria-label="{{t 'Close' }}"><span aria-hidden="true">x</span></div>
         <div class="image-actions">
             <div class="lightbox-canvas-trigger">
-                <div class="title">{{ _('Pan &amp; Zoom') }}</div>
-                <div class="status" data-disabled="{{ _('Disabled') }}" data-enabled="{{ _('Enabled') }}"></div>
+                <div class="title">{{t "Pan &amp; Zoom" }}</div>
+                <div class="status" data-disabled="{{t 'Disabled' }}" data-enabled="{{t 'Enabled' }}"></div>
             </div>
-            <a class="button small open" rel="noopener noreferrer" target="_blank">{{ _('Open') }}</a>
-            <a class="button small download" download>{{ _('Download') }}</a>
+            <a class="button small open" rel="noopener noreferrer" target="_blank">{{t "Open" }}</a>
+            <a class="button small download" download>{{t "Download" }}</a>
         </div>
         <div class="clear-float"></div>
     </div>
diff --git a/templates/zerver/app/index.html b/templates/zerver/app/index.html
index eeec49ed5e..230833692f 100644
--- a/templates/zerver/app/index.html
+++ b/templates/zerver/app/index.html
@@ -42,7 +42,6 @@
     </script>
 </div>
 
-{% include "zerver/app/lightbox_overlay.html" %}
 <div class="subscriptions">
     <div id="subscriptions_table">
     </div>