Chris@0: {#
Chris@0: /**
Chris@0:  * @file
Chris@0:  * Theme override to display a preview of an image style.
Chris@0:  *
Chris@0:  * Available variables:
Chris@0:  * - style_id: The ID of the image style.
Chris@0:  * - style_name: The name of the image style.
Chris@0:  * - cache_bypass: A timestamp token used to avoid browser caching of images.
Chris@0:  * - original: An associative array containing:
Chris@0:  *   - url: The URL of the original image.
Chris@0:  *   - width: The width in pixels of the original image.
Chris@0:  *   - height: The height in pixels of the original image.
Chris@0:  *   - rendered: The render array for the original image.
Chris@0:  * - derivative: An associative array containing:
Chris@0:  *   - url: The URL of the derivative image.
Chris@0:  *   - width: The width in pixels of the derivative image.
Chris@0:  *   - height: The height in pixels of the derivative image.
Chris@0:  *   - rendered:  The rendered derivative image.
Chris@0:  * - preview: An associative array containing:
Chris@0:  *   - original: An associative array containing:
Chris@0:  *     - width: The width in pixels of the original image in the preview.
Chris@0:  *     - height: The height in pixels of the original image in the preview.
Chris@0:  *   - derivative: An associative array containing:
Chris@0:  *     - width: The width in pixels of the derivative image in the preview.
Chris@0:  *     - height: The height in pixels of the derivative image in the preview.
Chris@0:  *
Chris@0:  * @see template_preprocess_image_style_preview()
Chris@0:  */
Chris@0: #}
Chris@0: <div class="image-style-preview preview clearfix">
Chris@0:   {# Preview of the original image. #}
Chris@0:   <div class="preview-image-wrapper">
Chris@0:       {{ 'original'|t }} (<a href="{{ original.url }}">{{ 'view actual size'|t }}</a>)
Chris@0:       <div class="preview-image original-image" style="width: {{ preview.original.width }}px; height: {{ preview.original.height }}px;">
Chris@0:         <a href="{{ original.url }}">
Chris@0:           {{ original.rendered }}
Chris@0:         </a>
Chris@0:       <div class="height" style="height: {{ preview.original.height }}px"><span>{{ original.height }}px</span></div>
Chris@0:       <div class="width" style="width: {{ preview.original.width }}px"><span>{{ original.width }}px</span></div>
Chris@0:     </div>
Chris@0:   </div>
Chris@0: 
Chris@0:   {# Derivative of the image style. #}
Chris@0:   <div class="preview-image-wrapper">
Chris@0:     {{ style_name }} (<a href="{{ derivative.url }}?{{ cache_bypass }}">{{ 'view actual size'|t }}</a>)
Chris@0:     <div class="preview-image modified-image" style="width: {{ preview.derivative.width }}px; height: {{ preview.derivative.height }}px;">
Chris@0:       <a href="{{ derivative.url }}?{{ cache_bypass }}">
Chris@0:         {{ derivative.rendered }}
Chris@0:       </a>
Chris@0:       <div class="height" style="height: {{ preview.derivative.height }}px"><span>{{ derivative.height }}px</span></div>
Chris@0:       <div class="width" style="width: {{ preview.derivative.width }}px"><span>{{ derivative.width }}px</span></div>
Chris@0:     </div>
Chris@0:   </div>
Chris@0: </div>