Commit 16d3e1cb authored by alexpott's avatar alexpott

Issue #2349687 by mortendk, LewisNyman, lauriii, runand: Copy image templates to Classy

parent cb0e3009
...@@ -30,28 +30,28 @@ ...@@ -30,28 +30,28 @@
* @ingroup themeable * @ingroup themeable
*/ */
#} #}
<div class="image-style-preview preview clearfix"> <div>
{# Preview of the original image. #} {# Preview of the original image. #}
<div class="preview-image-wrapper"> <div>
{{ 'original'|t }} (<a href="{{ original.url }}">{{ 'view actual size'|t }}</a>) {{ 'original'|t }} (<a href="{{ original.url }}">{{ 'view actual size'|t }}</a>)
<div class="preview-image original-image" style="width: {{ preview.original.width }}px; height: {{ preview.original.height }}px;"> <div style="width: {{ preview.original.width }}px; height: {{ preview.original.height }}px;">
<a href="{{ original.url }}"> <a href="{{ original.url }}">
{{ original.rendered }} {{ original.rendered }}
</a> </a>
<div class="height" style="height: {{ preview.original.height }}px"><span>{{ original.height }}px</span></div> <div style="height: {{ preview.original.height }}px"><span>{{ original.height }}px</span></div>
<div class="width" style="width: {{ preview.original.width }}px"><span>{{ original.width }}px</span></div> <div style="width: {{ preview.original.width }}px"><span>{{ original.width }}px</span></div>
</div> </div>
</div> </div>
{# Derivative of the image style. #} {# Derivative of the image style. #}
<div class="preview-image-wrapper"> <div>
{{ style_name }} (<a href="{{ derivative.url }}?{{ cache_bypass }}">{{ 'view actual size'|t }}</a>) {{ style_name }} (<a href="{{ derivative.url }}?{{ cache_bypass }}">{{ 'view actual size'|t }}</a>)
<div class="preview-image modified-image" style="width: {{ preview.derivative.width }}px; height: {{ preview.derivative.height }}px;"> <div style="width: {{ preview.derivative.width }}px; height: {{ preview.derivative.height }}px;">
<a href="{{ derivative.url }}?{{ cache_bypass }}"> <a href="{{ derivative.url }}?{{ cache_bypass }}">
{{ derivative.rendered }} {{ derivative.rendered }}
</a> </a>
<div class="height" style="height: {{ preview.derivative.height }}px"><span>{{ derivative.height }}px</span></div> <div style="height: {{ preview.derivative.height }}px"><span>{{ derivative.height }}px</span></div>
<div class="width" style="width: {{ preview.derivative.width }}px"><span>{{ derivative.width }}px</span></div> <div style="width: {{ preview.derivative.width }}px"><span>{{ derivative.width }}px</span></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -14,11 +14,11 @@ ...@@ -14,11 +14,11 @@
#} #}
<div{{ attributes }}> <div{{ attributes }}>
{% if data.preview %} {% if data.preview %}
<div class="image-preview"> <div>
{{ data.preview }} {{ data.preview }}
</div> </div>
{% endif %} {% endif %}
<div class="image-widget-data"> <div>
{# Render widget data without the image preview that was output already. #} {# Render widget data without the image preview that was output already. #}
{{ data|without('preview') }} {{ data|without('preview') }}
</div> </div>
......
{#
/**
* @file
* Default theme implementation for a 3x3 grid of checkboxes for image anchors.
*
* Available variables:
* - table: HTML for the table of image anchors.
*
* @see template_preprocess_image_anchor()
*
* @ingroup themeable
*/
#}
{{ table }}
{#
/**
* @file
* Default theme implementation for a summary of an image crop effect.
*
* Available variables:
* - data: The current configuration for this resize effect, including:
* - width: The width of the resized image.
* - height: The height of the resized image.
* - anchor: The part of the image that will be retained after cropping.
* - anchor_label: The translated label of the crop anchor.
* - effect: The effect information, including:
* - id: The effect identifier.
* - label: The effect name.
* - description: The effect description.
*
* @ingroup themeable
*/
#}
{% if data.width and data.height -%}
{{ data.width|e }}×{{ data.height|e }}
{%- else -%}
{% if data.width %}
{% trans %}
width {{ data.width|e }}
{% endtrans %}
{% elseif data.height %}
{% trans %}
height {{ data.height|e }}
{% endtrans %}
{% endif %}
{%- endif %}
{#
/**
* @file
* Default theme implementation to display a formatted image field.
*
* Available variables:
* - image: A collection of image data.
* - image_style: An optional image style.
* - path: An optional array containing the link 'path' and link 'options'.
* - url: An optional URL the image can be linked to.
*
* @see template_preprocess_image_formatter()
*
* @ingroup themeable
*/
#}
{% if url %}
<a href="{{ url }}">{{ image }}</a>
{% else %}
{{ image }}
{% endif %}
{#
/**
* @file
* Default theme implementation for a summary of an image resize effect.
*
* Available variables:
* - data: The current configuration for this resize effect, including:
* - width: The width of the resized image.
* - height: The height of the resized image.
* - effect: The effect information, including:
* - id: The effect identifier.
* - label: The effect name.
* - description: The effect description.
*
* @ingroup themeable
*/
#}
{% if data.width and data.height -%}
{{ data.width|e }}×{{ data.height|e }}
{%- else -%}
{% if data.width %}
{% trans %}
width {{ data.width|e }}
{% endtrans %}
{% elseif data.height %}
{% trans %}
height {{ data.height|e }}
{% endtrans %}
{% endif %}
{%- endif %}
{#
/**
* @file
* Default theme implementation for a summary of an image rotate effect.
*
* Available variables:
* - data: The current configuration for this resize effect, including:
* - degrees: Degrees to rotate the image, positive values will rotate the
* image clockwise, negative values counter-clockwise.
* - bgcolor: The hex background color of the new areas created as consequence
* of rotation.
* - random: If the rotation angle is randomized.
* - effect: The effect information, including:
* - id: The effect identifier.
* - label: The effect name.
* - description: The effect description.
*
* @ingroup themeable
*/
#}
{% if data.random %}
{% trans %}
random between -{{ data.degrees|abs }}° and {{ data.degrees|abs }}°
{% endtrans %}
{% else %}
{{ data.degrees }}°
{% endif %}
{#
/**
* @file
* Default theme implementation for a summary of an image scale effect.
*
* Available variables:
* - data: The current configuration for this resize effect, including:
* - width: The width of the resized image.
* - height: The height of the resized image.
* - upscale: If images larger than their original size can scale.
* - effect: The effect information, including:
* - id: The effect identifier.
* - label: The effect name.
* - description: The effect description.
*
* @ingroup themeable
*/
#}
{% if data.width and data.height -%}
{{ data.width|e }}×{{ data.height|e }}
{%- else -%}
{% if data.width %}
{% trans %}
width {{ data.width|e }}
{% endtrans %}
{% elseif data.height %}
{% trans %}
height {{ data.height|e }}
{% endtrans %}
{% endif %}
{%- endif %}
{% if data.upscale %}
{% trans %}
(upscaling allowed)
{% endtrans %}
{% endif %}
{#
/**
* @file
* Default theme implementation to display a preview of an image style.
*
* Available variables:
* - style_id: The ID of the image style.
* - style_name: The name of the image style.
* - cache_bypass: A timestamp token used to avoid browser caching of images.
* - original: An associative array containing:
* - url: The URL of the original image.
* - width: The width in pixels of the original image.
* - height: The height in pixels of the original image.
* - rendered: The render array for the original image.
* - derivative: An associative array containing:
* - url: The URL of the derivative image.
* - width: The width in pixels of the derivative image.
* - height: The height in pixels of the derivative image.
* - rendered: The rendered derivative image.
* - preview: An associative array containing:
* - original: An associative array containing:
* - width: The width in pixels of the original image in the preview.
* - height: The height in pixels of the original image in the preview.
* - derivative: An associative array containing:
* - width: The width in pixels of the derivative image in the preview.
* - height: The height in pixels of the derivative image in the preview.
*
* @see template_preprocess_image_style_preview()
*
* @ingroup themeable
*/
#}
<div class="image-style-preview preview clearfix">
{# Preview of the original image. #}
<div class="preview-image-wrapper">
{{ 'original'|t }} (<a href="{{ original.url }}">{{ 'view actual size'|t }}</a>)
<div class="preview-image original-image" style="width: {{ preview.original.width }}px; height: {{ preview.original.height }}px;">
<a href="{{ original.url }}">
{{ original.rendered }}
</a>
<div class="height" style="height: {{ preview.original.height }}px"><span>{{ original.height }}px</span></div>
<div class="width" style="width: {{ preview.original.width }}px"><span>{{ original.width }}px</span></div>
</div>
</div>
{# Derivative of the image style. #}
<div class="preview-image-wrapper">
{{ style_name }} (<a href="{{ derivative.url }}?{{ cache_bypass }}">{{ 'view actual size'|t }}</a>)
<div class="preview-image modified-image" style="width: {{ preview.derivative.width }}px; height: {{ preview.derivative.height }}px;">
<a href="{{ derivative.url }}?{{ cache_bypass }}">
{{ derivative.rendered }}
</a>
<div class="height" style="height: {{ preview.derivative.height }}px"><span>{{ derivative.height }}px</span></div>
<div class="width" style="width: {{ preview.derivative.width }}px"><span>{{ derivative.width }}px</span></div>
</div>
</div>
</div>
{#
/**
* @file
* Default theme implementation for an image using a specific image style.
*
* Available variables:
* - attributes: HTML attributes for the image, including the following:
* - src: Full URL or relative path to the image file.
* - class: One or more classes to be applied to the image.
* - width: The width of the image (if known).
* - height: The height of the image (if known).
* - title: The title of the image.
* - alt: The alternative text for the image.
*
* @see template_preprocess_image_style()
*
* @ingroup themeable
*/
#}
{{ image }}
{#
/**
* @file
* Default theme implementation for an image field widget.
*
* Available variables:
* - attributes: HTML attributes for the containing element.
* - data: Render elements of the image widget.
*
* @see template_preprocess_image_widget()
*
* @ingroup themeable
*/
#}
<div{{ attributes }}>
{% if data.preview %}
<div class="image-preview">
{{ data.preview }}
</div>
{% endif %}
<div class="image-widget-data">
{# Render widget data without the image preview that was output already. #}
{{ data|without('preview') }}
</div>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment