skins/photo_layout_macros.pt

   1 <html xmlns:tal="http://xml.zope.org/namespaces/tal" xmlns:metal="http://xml.zope.org/namespaces/metal">
   2   <head>
   3     <title>Display macros for arbitrary set of photos</title>
   4     <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
   5   </head>
   6   <body>
   7     <div metal:define-macro="grid"
   8          tal:define="slide_size portal_object/slide_size;
   9                      mayBeDropable exists:dropable;
  10                      dropable python:True if mayBeDropable and dropable else False"
  11          i18n:domain="portfolio">
  12       <div metal:use-macro="here/batch_macros/macros/navigation">batch navigation</div>
  13       <div id="lightbox"
  14            tal:attributes="class python:'lightbox photo-drop-target' if dropable else 'lightbox'">
  15         <span tal:repeat="info infos" tal:omit-tag="">
  16           <span tal:define="size info/thumbSize;
  17                             margin_top python:(slide_size - size['height']) / 2;
  18                             margin_left python:(slide_size - size['width']) / 2;
  19                             selected info/selected|nothing"
  20                 tal:attributes="class info/className;
  21                                 name info/cmf_uid"
  22                 metal:define-macro="thumbnail">
  23             <a class="slide" tal:attributes="href info/href; title info/title">
  24               <img border="0" tal:attributes="src info/thumbUrl;
  25                                  alt info/title;
  26                                  height size/height;
  27                                  width size/width;
  28                                  style string:margin-top : ${margin_top}px ;;margin-left:${margin_left}px;"/>
  29             </a>
  30             <tal:block tal:condition="python:features.has_key('select')">
  31               <span class="button slide-select" tal:condition="not:selected">
  32                 <a name="add_to_selection" title="Add to selection" i18n:attributes="title"
  33                    tal:attributes="href python:features['select'](info['o'], False)">
  34                   <img tal:attributes="src string:${portal_url}/transparent.gif" height="17" width="12"
  35                        alt="Add to selection" i18n:attributes="alt"/>
  36                   </a>
  37               </span>
  38               <span class="button slide-deselect" tal:condition="selected">
  39                 <a name="remove_to_selection" title="Remove to selection" i18n:attributes="title"
  40                    tal:attributes="href python:features['select'](info['o'], True)">
  41                   <img tal:attributes="src string:${portal_url}/transparent.gif" height="17" width="12"
  42                        alt="Remove to selection" i18n:attributes="alt"/>
  43                   </a>
  44               </span>
  45             </tal:block>
  46             <span class="button slide-cart" tal:condition="python:info.get('buyable')">
  47               <a name="add_to_cart" title="Add to cart" i18n:attributes="title"
  48                  tal:attributes="href python:features['cart'](info['o'])">
  49                 <img tal:attributes="src string:${portal_url}/transparent.gif" height="17" width="20"
  50                      alt="Add to cart" i18n:attributes="alt"/>
  51                 </a>
  52             </span>
  53             <span class="button slide-del" tal:condition="python:features.has_key('del')">
  54               <a title="Delete" i18n:attributes="title"
  55                  tal:attributes="href python:features['del'](info['o'])">
  56                 <img tal:attributes="src string:${portal_url}/transparent.gif" height="19" width="18"
  57                      alt="Delete" i18n:attributes="alt"/>
  58                 </a>
  59             </span>
  60             <tal:block tal:condition="features/hideAnonymous|nothing">
  61               <span class="button slide-hide" tal:condition="not:info/hiddenForAnonymous"
  62                     tal:define="mtop python:margin_top + 4;
  63                                 mleft python:margin_left + size['width'] - 17"
  64                     tal:attributes="style python:'margin-top:%dpx;; margin-left:%dpx' % (mtop, mleft)">
  65                 <a title="Hide for anonymous" i18n:attributes="title"
  66                    name="hide_for_anonymous"
  67                    tal:attributes="href string:${info/href}/hideForAnonymous">
  68                   <img tal:attributes="src string:${portal_url}/transparent.gif" height="15" width="16"
  69                        alt="Hide for anonymous" i18n:attributes="alt"/>
  70                 </a>
  71               </span>
  72               <span class="button slide-show" tal:condition="info/hiddenForAnonymous"
  73                     tal:define="mtop python:margin_top + 4;
  74                                 mleft python:margin_left + size['width'] - 17"
  75                     tal:attributes="style python:'margin-top:%dpx;; margin-left:%dpx' % (mtop, mleft)">
  76                 <a title="Show for anonymous" i18n:attributes="title"
  77                    name="show_for_anonymous"
  78                    tal:attributes="href string:${info/href}/resetHide">
  79                   <img tal:attributes="src string:${portal_url}/transparent.gif" height="15" width="16"
  80                        alt="Show for anonymous" i18n:attributes="alt"/>
  81                 </a>
  82               </span>
  83             </tal:block>
  84           </span>
  85         </span>
  86       </div>
  87       <br clear="all"/>
  88       <div metal:use-macro="here/batch_macros/macros/navigation">batch navigation</div>
  89       <script type="text/javascript" tal:condition="not:dropable">
  90         new Lightbox(document.getElementById('lightbox'));
  91       </script>
  92       <script type="text/javascript"
  93               tal:condition="dropable"
  94               tal:content="structure python:'''
  95       (function(){
  96         var lb = document.getElementById('lightbox');
  97         new Lightbox(lb);
  98         var uploadUrl = '%(putUrl)s';
  99         var options = {'slideSize' : %(slideSize)d,
 100                        'thumbnailSize' : %(thumbnailSize)d};
 101         new DDImageUploader(lb, uploadUrl, options);
 102       })();
 103       ''' % {'putUrl' : '%s/put_upload' % here.absolute_url(),
 104              'slideSize' : portal_object.slide_size,
 105              'thumbnailSize' : portal_object.thumb_size}">
 106       </script>
 107     </div>
 108
 109
 110     <div metal:define-macro="film_bar" tal:omit-tag="">
 111       <div id="film_bar">
 112         <table cellspacing="0">
 113           <tr tal:define="slide_size python:portal_object.thumb_size/2 + 10">
 114             <td tal:repeat="info contextInfos/infos">
 115                 <a href="." tal:attributes="href info/href;
 116                                             class info/className;
 117                                             portfolio:position info/index"
 118                   ><img
 119                      tal:define="size info/thumbSize;
 120                                  margin_top python:(slide_size - size['height']) / 2"
 121                      tal:attributes="src    info/src;
 122                                      alt    info/title;
 123                                      height size/height;
 124                                      width  size/width;
 125                                      style  string:margin-top : ${margin_top}px ;"/></a>
 126             </td>
 127           </tr>
 128         </table>
 129       </div>
 130       <div class="jsslider">
 131         <span id="slider"></span>
 132       </div>
 133       <script type="text/javascript" tal:content="python:'''
 134           var startSlideShow, slideShowNext, stopSlideShow;
 135           (function(){
 136
 137             var ctxInfos = {'filmLength': %(filmLength)s
 138                            ,'center': %(center)s
 139                            ,'slideSize': %(slideSize)d
 140                            ,'ctxUrlTranslation' : [%(reBaseCtxUrl)s, %(canonicalUrl)s]
 141                            };
 142             var fs = new FilmSlider(document.getElementById('film_bar'),
 143                            document.getElementById('slider'),
 144                            ctxInfos,
 145                            document.getElementById('medium_image').getElementsByTagName('img')[0],
 146                            document.getElementById('image_toolbar'),
 147                            document.getElementById('Breadcrumbs'));
 148             startSlideShow = function() {return fs.startSlideShow();};
 149             stopSlideShow = function() {return fs.stopSlideShow();};
 150             slideShowPrevious = function() {return fs.slideShowPrevious();};
 151             slideShowNext = function() {return fs.slideShowNext();};
 152             slideShowImageLoaded = function() {return fs.slideShowImageLoaded();};
 153           })();
 154           ''' % {'filmLength': len(contextInfos['infos'])
 155                 ,'center': index
 156                 ,'slideSize': portal_object.thumb_size/2 + 11
 157                 ,'reBaseCtxUrl':contextInfos['reBaseCtxUrl']
 158                 ,'canonicalUrl':contextInfos['canonicalUrl']
 159                 }">
 160       </script>
 161     </div>
 162
 163   </body>
 164 </html>