annotate core/modules/image/templates/image-style-preview.html.twig @ 19:fa3358dc1485 tip

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