diff --git a/core/modules/image/templates/image-style-preview.html.twig b/core/modules/image/templates/image-style-preview.html.twig index d6e715c..6370340 100644 --- a/core/modules/image/templates/image-style-preview.html.twig +++ b/core/modules/image/templates/image-style-preview.html.twig @@ -30,28 +30,28 @@ * @ingroup themeable */ #} -
+
{# Preview of the original image. #} -
+
{{ 'original'|t }} ({{ 'view actual size'|t }}) -
+
{{ original.rendered }} -
{{ original.height }}px
-
{{ original.width }}px
+
{{ original.height }}px
+
{{ original.width }}px
{# Derivative of the image style. #} -
+
{{ style_name }} ({{ 'view actual size'|t }}) -
+
{{ derivative.rendered }} -
{{ derivative.height }}px
-
{{ derivative.width }}px
+
{{ derivative.height }}px
+
{{ derivative.width }}px
diff --git a/core/modules/image/templates/image-widget.html.twig b/core/modules/image/templates/image-widget.html.twig index 8bdc5f1..90b93db 100644 --- a/core/modules/image/templates/image-widget.html.twig +++ b/core/modules/image/templates/image-widget.html.twig @@ -14,11 +14,11 @@ #} {% if data.preview %} -
+
{{ data.preview }}
{% endif %} -
+
{# Render widget data without the image preview that was output already. #} {{ data|without('preview') }}
diff --git a/core/themes/classy/templates/image-anchor.html.twig b/core/themes/classy/templates/image-anchor.html.twig new file mode 100644 index 0000000..eb670a4 --- /dev/null +++ b/core/themes/classy/templates/image-anchor.html.twig @@ -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 }} diff --git a/core/themes/classy/templates/image-crop-summary.html.twig b/core/themes/classy/templates/image-crop-summary.html.twig new file mode 100644 index 0000000..fc991b6 --- /dev/null +++ b/core/themes/classy/templates/image-crop-summary.html.twig @@ -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 %} diff --git a/core/themes/classy/templates/image-formatter.html.twig b/core/themes/classy/templates/image-formatter.html.twig new file mode 100644 index 0000000..0283fcc --- /dev/null +++ b/core/themes/classy/templates/image-formatter.html.twig @@ -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 %} + {{ image }} +{% else %} + {{ image }} +{% endif %} diff --git a/core/themes/classy/templates/image-resize-summary.html.twig b/core/themes/classy/templates/image-resize-summary.html.twig new file mode 100644 index 0000000..f4084ef --- /dev/null +++ b/core/themes/classy/templates/image-resize-summary.html.twig @@ -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 %} diff --git a/core/themes/classy/templates/image-rotate-summary.html.twig b/core/themes/classy/templates/image-rotate-summary.html.twig new file mode 100644 index 0000000..705a0eb --- /dev/null +++ b/core/themes/classy/templates/image-rotate-summary.html.twig @@ -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 %} diff --git a/core/themes/classy/templates/image-scale-summary.html.twig b/core/themes/classy/templates/image-scale-summary.html.twig new file mode 100644 index 0000000..32d75cc --- /dev/null +++ b/core/themes/classy/templates/image-scale-summary.html.twig @@ -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 %} diff --git a/core/modules/image/templates/image-style-preview.html.twig b/core/themes/classy/templates/image-style-preview.html.twig similarity index 100% copy from core/modules/image/templates/image-style-preview.html.twig copy to core/themes/classy/templates/image-style-preview.html.twig diff --git a/core/themes/classy/templates/image-style.html.twig b/core/themes/classy/templates/image-style.html.twig new file mode 100644 index 0000000..6d70ade --- /dev/null +++ b/core/themes/classy/templates/image-style.html.twig @@ -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 }} diff --git a/core/modules/image/templates/image-widget.html.twig b/core/themes/classy/templates/image-widget.html.twig similarity index 100% copy from core/modules/image/templates/image-widget.html.twig copy to core/themes/classy/templates/image-widget.html.twig