summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAlex Pott2015-02-06 13:34:59 (GMT)
committerAlex Pott2015-02-06 13:34:59 (GMT)
commit16d3e1cb3d442e470279b9d2ee7e76310aa835c2 (patch)
tree31ab849061c943feb1caab2d1ed9ba4698e8df87
parentcb0e3009758780af7a3e44d80c83a363d2ab115e (diff)
Issue #2349687 by mortendk, LewisNyman, lauriii, runand: Copy image templates to Classy
-rw-r--r--core/modules/image/templates/image-style-preview.html.twig18
-rw-r--r--core/modules/image/templates/image-widget.html.twig4
-rw-r--r--core/themes/classy/templates/image-anchor.html.twig14
-rw-r--r--core/themes/classy/templates/image-crop-summary.html.twig32
-rw-r--r--core/themes/classy/templates/image-formatter.html.twig21
-rw-r--r--core/themes/classy/templates/image-resize-summary.html.twig30
-rw-r--r--core/themes/classy/templates/image-rotate-summary.html.twig27
-rw-r--r--core/themes/classy/templates/image-scale-summary.html.twig37
-rw-r--r--core/themes/classy/templates/image-style-preview.html.twig57
-rw-r--r--core/themes/classy/templates/image-style.html.twig20
-rw-r--r--core/themes/classy/templates/image-widget.html.twig25
11 files changed, 274 insertions, 11 deletions
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
*/
#}
-<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>
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 @@
#}
<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>
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 %}
+ <a href="{{ url }}">{{ image }}</a>
+{% 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/themes/classy/templates/image-style-preview.html.twig b/core/themes/classy/templates/image-style-preview.html.twig
new file mode 100644
index 0000000..d6e715c
--- /dev/null
+++ b/core/themes/classy/templates/image-style-preview.html.twig
@@ -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>
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/themes/classy/templates/image-widget.html.twig b/core/themes/classy/templates/image-widget.html.twig
new file mode 100644
index 0000000..8bdc5f1
--- /dev/null
+++ b/core/themes/classy/templates/image-widget.html.twig
@@ -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>