www.aleph1.co.uk Git - yaffs-website/blob - web/core/modules/image/templates/image-style-preview.html.twig

   1 {#
   2 /**
   3  * @file
   4  * Default theme implementation to display a preview of an image style.
   5  *
   6  * Available variables:
   7  * - style_id: The ID of the image style.
   8  * - style_name: The name of the image style.
   9  * - cache_bypass: A timestamp token used to avoid browser caching of images.
  10  * - original: An associative array containing:
  11  *   - url: The URL of the original image.
  12  *   - width: The width in pixels of the original image.
  13  *   - height: The height in pixels of the original image.
  14  *   - rendered: The render array for the original image.
  15  * - derivative: An associative array containing:
  16  *   - url: The URL of the derivative image.
  17  *   - width: The width in pixels of the derivative image.
  18  *   - height: The height in pixels of the derivative image.
  19  *   - rendered:  The rendered derivative image.
  20  * - preview: An associative array containing:
  21  *   - original: An associative array containing:
  22  *     - width: The width in pixels of the original image in the preview.
  23  *     - height: The height in pixels of the original image in the preview.
  24  *   - derivative: An associative array containing:
  25  *     - width: The width in pixels of the derivative image in the preview.
  26  *     - height: The height in pixels of the derivative image in the preview.
  27  *
  28  * @see template_preprocess_image_style_preview()
  29  *
  30  * @ingroup themeable
  31  */
  32 #}
  33 <div class="image-style-preview preview clearfix">
  34   {# Preview of the original image. #}
  35   <div class="preview-image-wrapper">
  36       {{ 'original'|t }} (<a href="{{ original.url }}">{{ 'view actual size'|t }}</a>)
  37       <div class="preview-image original-image" style="width: {{ preview.original.width }}px; height: {{ preview.original.height }}px;">
  38         <a href="{{ original.url }}">
  39           {{ original.rendered }}
  40         </a>
  41       <div class="height" style="height: {{ preview.original.height }}px"><span>{{ original.height }}px</span></div>
  42       <div class="width" style="width: {{ preview.original.width }}px"><span>{{ original.width }}px</span></div>
  43     </div>
  44   </div>
  45
  46   {# Derivative of the image style. #}
  47   <div class="preview-image-wrapper">
  48     {{ style_name }} (<a href="{{ derivative.url }}?{{ cache_bypass }}">{{ 'view actual size'|t }}</a>)
  49     <div class="preview-image modified-image" style="width: {{ preview.derivative.width }}px; height: {{ preview.derivative.height }}px;">
  50       <a href="{{ derivative.url }}?{{ cache_bypass }}">
  51         {{ derivative.rendered }}
  52       </a>
  53       <div class="height" style="height: {{ preview.derivative.height }}px"><span>{{ derivative.height }}px</span></div>
  54       <div class="width" style="width: {{ preview.derivative.width }}px"><span>{{ derivative.width }}px</span></div>
  55     </div>
  56   </div>
  57 </div>