tal:define="slide_size portal_object/slide_size;"
          i18n:domain="portfolio">
       <div metal:use-macro="here/batch_macros/macros/navigation">batch navigation</div>
-      <div id="lightbox" class="lightbox">
+      <div id="lightbox" class="lightbox photo-drop-target">
         <span tal:repeat="info infos" tal:omit-tag="">
           <span tal:define="size info/thumbSize;
                             margin_top python:(slide_size - size['height']) / 2;
 
   font-size: &dtml-fontSmallSize;;
 }
 
+div.lightbox { /*the lightbox itself*/
+  min-height:300px;
+}
+
+.photo-drop-target {
+  background: url('&dtml-portal_url;/image-upload-dd-target.png') no-repeat center center;
+}
 
 .lightbox span {
     width: &dtml-slide_size;px;
 
   <head>
     <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
     <metal:block metal:fill-slot="javascript_head_slot">
-      <script type="text/javascript" tal:attributes="src string:${portal_url}/cart_widgets.js"></script>
-      <script type="text/javascript" tal:attributes="src string:${portal_url}/photo_lightbox_viewer.js"></script>
+      <script type="text/javascript" tal:attributes="src string:$portal_url/cart_widgets.js"></script>
+      <script type="text/javascript" tal:attributes="src string:$portal_url/photo_lightbox_viewer.js"></script>
+      <script type="text/javascript" tal:attributes="src string:$portal_url/fileupload.js"charset="utf-8"></script>
     </metal:block>
     <title>portfolio_view</title>
   </head>