Issue #2349687 by mortendk, LewisNyman, lauriii, runand: Copy image templates to Classy
Alex Pott
parent
cb0e300975
commit
16d3e1cb3d
|
|
@ -30,28 +30,28 @@
|
|||
* @ingroup themeable
|
||||
*/
|
||||
#}
|
||||
<div class="image-style-preview preview clearfix">
|
||||
<div>
|
||||
{# Preview of the original image. #}
|
||||
<div class="preview-image-wrapper">
|
||||
<div>
|
||||
{{ '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 }}">
|
||||
{{ 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 style="height: {{ preview.original.height }}px"><span>{{ original.height }}px</span></div>
|
||||
<div style="width: {{ preview.original.width }}px"><span>{{ original.width }}px</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Derivative of the image style. #}
|
||||
<div class="preview-image-wrapper">
|
||||
<div>
|
||||
{{ 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 }}">
|
||||
{{ 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 style="height: {{ preview.derivative.height }}px"><span>{{ derivative.height }}px</span></div>
|
||||
<div style="width: {{ preview.derivative.width }}px"><span>{{ derivative.width }}px</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,11 +14,11 @@
|
|||
#}
|
||||
<div{{ attributes }}>
|
||||
{% if data.preview %}
|
||||
<div class="image-preview">
|
||||
<div>
|
||||
{{ data.preview }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="image-widget-data">
|
||||
<div>
|
||||
{# Render widget data without the image preview that was output already. #}
|
||||
{{ data|without('preview') }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
{#
|
||||
/**
|
||||
* @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 }}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
{#
|
||||
/**
|
||||
* @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 %}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
{#
|
||||
/**
|
||||
* @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 %}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
{#
|
||||
/**
|
||||
* @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 %}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
{#
|
||||
/**
|
||||
* @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 %}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
{#
|
||||
/**
|
||||
* @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 %}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
{#
|
||||
/**
|
||||
* @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>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{#
|
||||
/**
|
||||
* @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 }}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
{#
|
||||
/**
|
||||
* @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>
|
||||
Loading…
Reference in New Issue