Changeset 1917 for plugins/apostrophePlugin/trunk/modules/aMedia/templates/_multipleList.php

Timestamp:

08/08/10 12:18:34 (22 months ago)

Author:

tboutell

Message:

Merged the cropping branch back to trunk:

Cropping is now available in the media repository. Every time you select an image for use on the site you have the opportunity to crop it. The image size constraints of the slot are taken into account. This means that you can satisfy a given set of constraints by cropping a wide variety of images that would not have been eligible for selection before.

Crops of existing images appear in the database as separate aMediaItem objects but do not duplicate the original image file. This means that many crops of a single source image can exist without significant overhead.

The slug field of a cropped version of an image contains cropping parameters. When rendering the image, Symfony routes spot these and crop the original file as needed.

By approaching the problem this way we have avoided the need for code that takes advantage of the media repository's image selection capabilities to change in any way in order to take advantage of cropping.

The single-image-select behavior of Apostrophe has changed to accommodate the extra cropping step. Single select for PDFs and videos still uses the selectSingle partial because they cannot be cropped.

Thanks to Spike Broehm for his contributions to the cropping project.

Fixes #227

Location:

plugins/apostrophePlugin/trunk

Files:

• . (modified) (1 prop)
• modules/aMedia/templates/_multipleList.php (modified) (5 diffs)

plugins/apostrophePlugin/trunk/modules/aMedia/templates/_multipleList.php

@@ -5 +5 @@
 <?php use_helper('I18N', 'jQuery') ?>
 
-<?php $ids = array() ?>
-
 <?php foreach ($items as $item): ?>
 <li id="a-media-selection-list-item-<?php echo $item->getId() ?>" class="a-media-selection-list-item">
         <?php $id = $item->getId() ?>
   <ul class="a-controls a-media-multiple-list-controls">        
+                <li>
+                        <a href="#crop" onclick="return false;" class="a-btn icon a-crop no-label" title="<?php echo __('Crop', null, 'apostrophe') ?>"><?php echo __('Crop', null, 'apostrophe') ?></a>
+                </li>
           <li><?php echo jq_link_to_remote(__("remove this item", null, 'apostrophe'),
     array(
       'url' => 'aMedia/multipleRemove?id='.$id,
       'update' => 'a-media-selection-list',
-                        'complete' => 'aUI("a-media-selection-list"); aMediaDeselectItem('.$id.')', 
+                        'complete' => 'aUI("a-media-selection-list"); aMediaDeselectItem('.$id.'); aMediaUpdatePreview()', 
     ), array(
                         'class'=> 'a-btn icon a-delete no-label',
@@ -22 +23 @@
         </ul>   
 
-        <div class="a-media-selected-item-drag-overlay" title="<?php echo __('Drag &amp; Drop to Order', null, 'apostrophe') ?>"></div>
+  <?php if (aMediaTools::isMultiple()): ?>
+        <div class="a-media-selected-item-drag-overlay" title="<?php echo __('Drag &amp; Drop to Order', null, 'apostrophe') ?>"></div>
+  <?php endif ?>
         <div class="a-media-selected-item-overlay"></div>
-  <img src="<?php echo url_for($item->getScaledUrl(aMediaTools::getOption('selected_constraints'))) ?>" />
-
-          <?php $ids[] = $item->getId() ?>
-
+  <img src="<?php echo url_for($item->getCropThumbnailUrl()) ?>" class="a-thumbnail" />
 </li>
 <?php endforeach ?>
@@ -33 +33 @@
 <script type="text/javascript" charset="utf-8">
 
-        function aMediaItemsIndicateSelected(ids)
+        function aMediaItemsIndicateSelected(cropOptions)
         {
-                $('.a-media-selected-overlay').remove();
+          var ids = cropOptions.ids;
+          aCrop.init(cropOptions);
+                $('.a-media-selected-overlay').remove();                
+                $('.a-media-selected').removeClass('a-media-selected');
                 
           var i;
@@ -47 +50 @@
                         }
                 }
-        
+                        
                 $('.a-media-item.a-media-selected').each(function(){
                         $(this).children('.a-media-item-thumbnail').prepend('<div class="a-media-selected-overlay"></div>');
                 });
+                
+                $('#a-media-selection-list-caption').hide();
+                if (!ids.length) {
+      $('#a-media-selection-list-caption').show();
+                }
 
                 $('.a-media-selected-overlay').fadeTo(0, 0.66);
+        }
+        
+        function aMediaUpdatePreview()
+        {
+          $('#a-media-selection-preview').load('<?php echo url_for('aMedia/updateMultiplePreview') ?>', function(){
+          // the preview images are by default set to display:none
+            $('#a-media-selection-preview li:first').addClass('current');
+            // set up cropping again; do hard reset to reinstantiate Jcrop
+            aCrop.resetCrop(true);
+          });
         }
 
@@ -66 +84 @@
 
         $(document).ready(function() { // On page ready indicate selected items
-                aMediaItemsIndicateSelected(<?php echo json_encode($ids) ?>) 
+          var cropOptions = {
+      ids: <?php echo json_encode(aMediaTools::getSelection()) ?>,
+      aspectRatio: <?php echo aMediaTools::getAspectRatio() ?>,
+      minimumSize: [<?php echo aMediaTools::getAttribute('minimum-width') ?>, <?php echo aMediaTools::getAttribute('minimum-height') ?>],
+      maximumSize: [<?php echo aMediaTools::getAttribute('maximum-width') ?>, <?php echo aMediaTools::getAttribute('maximum-height') ?>],
+      <?php // width height cropLeft cropTop cropWidth cropHeight hashed by image id ?>
+      imageInfo: <?php echo json_encode(aMediaTools::getAttribute('imageInfo')) ?>
+    };
+          
+                aMediaItemsIndicateSelected(cropOptions);
+                
                 $('.a-media-selected-item-overlay').fadeTo(0,.35); //cross-browser opacity for overlay
                 $('.a-media-selection-list-item').hover(function(){