|
Chris@0
|
1 {#
|
|
Chris@0
|
2 /**
|
|
Chris@0
|
3 * @file
|
|
Chris@0
|
4 * Theme override 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 #}
|
|
Chris@0
|
31 <div class="image-style-preview preview clearfix">
|
|
Chris@0
|
32 {# Preview of the original image. #}
|
|
Chris@0
|
33 <div class="preview-image-wrapper">
|
|
Chris@0
|
34 {{ 'original'|t }} (<a href="{{ original.url }}">{{ 'view actual size'|t }}</a>)
|
|
Chris@0
|
35 <div class="preview-image original-image" style="width: {{ preview.original.width }}px; height: {{ preview.original.height }}px;">
|
|
Chris@0
|
36 <a href="{{ original.url }}">
|
|
Chris@0
|
37 {{ original.rendered }}
|
|
Chris@0
|
38 </a>
|
|
Chris@0
|
39 <div class="height" style="height: {{ preview.original.height }}px"><span>{{ original.height }}px</span></div>
|
|
Chris@0
|
40 <div class="width" style="width: {{ preview.original.width }}px"><span>{{ original.width }}px</span></div>
|
|
Chris@0
|
41 </div>
|
|
Chris@0
|
42 </div>
|
|
Chris@0
|
43
|
|
Chris@0
|
44 {# Derivative of the image style. #}
|
|
Chris@0
|
45 <div class="preview-image-wrapper">
|
|
Chris@0
|
46 {{ style_name }} (<a href="{{ derivative.url }}?{{ cache_bypass }}">{{ 'view actual size'|t }}</a>)
|
|
Chris@0
|
47 <div class="preview-image modified-image" style="width: {{ preview.derivative.width }}px; height: {{ preview.derivative.height }}px;">
|
|
Chris@0
|
48 <a href="{{ derivative.url }}?{{ cache_bypass }}">
|
|
Chris@0
|
49 {{ derivative.rendered }}
|
|
Chris@0
|
50 </a>
|
|
Chris@0
|
51 <div class="height" style="height: {{ preview.derivative.height }}px"><span>{{ derivative.height }}px</span></div>
|
|
Chris@0
|
52 <div class="width" style="width: {{ preview.derivative.width }}px"><span>{{ derivative.width }}px</span></div>
|
|
Chris@0
|
53 </div>
|
|
Chris@0
|
54 </div>
|
|
Chris@0
|
55 </div>
|
