From c4ca7585cdcfb86087bb5a2eaf2659008f208365 Mon Sep 17 00:00:00 2001
From: ebremner <ebremner@uwaterloo.ca>
Date: Wed, 22 Jan 2020 10:41:08 -0500
Subject: [PATCH] ISTWCMS-3572: adding templates for responsive images
---
...tity-browser-block--uw-ebr-image.html.twig | 22 +++++++++++
templates/content/media.html.twig | 32 ++++++++++++++++
templates/fields/field.html.twig | 38 +++++++++++++++++++
templates/fields/responsive-image.html.twig | 20 ++++++++++
uw_fdsu_theme_resp.theme | 20 ++++++++++
5 files changed, 132 insertions(+)
create mode 100644 templates/blocks/block--entity-browser-block--uw-ebr-image.html.twig
create mode 100644 templates/content/media.html.twig
create mode 100644 templates/fields/field.html.twig
create mode 100644 templates/fields/responsive-image.html.twig
diff --git a/templates/blocks/block--entity-browser-block--uw-ebr-image.html.twig b/templates/blocks/block--entity-browser-block--uw-ebr-image.html.twig
new file mode 100644
index 00000000..bf0ad418
--- /dev/null
+++ b/templates/blocks/block--entity-browser-block--uw-ebr-image.html.twig
@@ -0,0 +1,22 @@
+{#
+/**
+ * @file
+ * Theme override to display a region.
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ *
+ * @see template_preprocess_block()
+ */
+#}
+{% set class = "uw-resp-image" %}
+
+{% embed '@layouts/block/_block.twig' with {
+ 'class': class
+}%}
+
+ {% block content %}
+ {{ content }}
+ {% endblock %}
+
+{% endembed %}
diff --git a/templates/content/media.html.twig b/templates/content/media.html.twig
new file mode 100644
index 00000000..4934a7b5
--- /dev/null
+++ b/templates/content/media.html.twig
@@ -0,0 +1,32 @@
+{#
+/**
+ * @file
+ * Theme override to display a media item.
+ *
+ * Available variables:
+ * - name: Name of the media.
+ * - content: Media content.
+ *
+ * @see template_preprocess_media()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+ set classes = [
+ 'media',
+ 'media--type-' ~ media.bundle()|clean_class,
+ not media.isPublished() ? 'media--unpublished',
+ view_mode ? 'media--view-mode-' ~ view_mode|clean_class,
+]
+%}
+
+{% embed '@layouts/media/media.twig' with {
+ 'classes': classes
+}%}
+
+ {% block content %}
+ {{ content }}
+ {% endblock %}
+
+{% endembed %}
diff --git a/templates/fields/field.html.twig b/templates/fields/field.html.twig
new file mode 100644
index 00000000..6fc0237c
--- /dev/null
+++ b/templates/fields/field.html.twig
@@ -0,0 +1,38 @@
+{#
+/**
+ * @file
+ * Theme override for a field.
+ */
+#}
+{%
+ set classes = [
+ 'uw-field',
+ 'uw-field--name-' ~ field_name|clean_class,
+ 'uw-field--type-' ~ field_type|clean_class,
+ 'uw-field--label-' ~ label_display,
+]
+%}
+{%
+ set title_classes = [
+ 'uw-field__label',
+ label_display == 'visually_hidden' ? 'visually-hidden',
+]
+%}
+{% if display_field_tag %}
+ <{{ field_tag|default('div') }}{{ attributes.addClass(classes, 'uw-field__items') }}>
+{% endif %}
+ {% if not label_hidden and display_label_tag %}
+ <{{ label_tag|default('div') }}{{ title_attributes.addClass(title_classes) }}>{{ label }}</{{ label_tag|default('div') }}>
+ {% endif %}
+ {% for item in items %}
+ {% if display_item_tag %}
+ <{{ field_item_tag|default('div') }}{{ item.attributes.addClass('uw-field__item') }}>
+ {% endif %}
+ {{ item.content }}
+ {% if display_item_tag %}
+ </{{ field_item_tag|default('div') }}>
+ {% endif %}
+ {% endfor %}
+{% if display_field_tag %}
+ </{{ field_tag|default('div') }}>
+{% endif %}
diff --git a/templates/fields/responsive-image.html.twig b/templates/fields/responsive-image.html.twig
new file mode 100644
index 00000000..6aa2ac7d
--- /dev/null
+++ b/templates/fields/responsive-image.html.twig
@@ -0,0 +1,20 @@
+{#
+/**
+ * @file
+ * Theme override of a responsive image.
+ *
+ * Available variables:
+ * - sources: The attributes of the <source> tags for this <picture> tag.
+ * - img_element: The controlling image, with the fallback image in srcset.
+ * - output_image_tag: Whether or not to output an <img> tag instead of a
+ * <picture> tag.
+ *
+ * @see template_preprocess()
+ * @see template_preprocess_responsive_image()
+ */
+#}
+{% include "@components/responsive-image/responsive-image.twig" with {
+ "sources": sources,
+ "img_element": img_element['#uri'],
+ "alt": img_element['#alt']
+} %}
diff --git a/uw_fdsu_theme_resp.theme b/uw_fdsu_theme_resp.theme
index 317e9cd0..8d237c79 100644
--- a/uw_fdsu_theme_resp.theme
+++ b/uw_fdsu_theme_resp.theme
@@ -22,6 +22,26 @@ function uw_fdsu_theme_resp_preprocess_html(&$variables) {
$variables['attributes']['class'][] = theme_get_setting('wcms_colour_scheme', 'uw_fdsu_theme_resp') ? theme_get_setting('wcms_colour_scheme', 'uw_fdsu_theme_resp') : 'default';
}
+/**
+ * Implements hook_preprocess_responsive_image().
+ */
+function uw_fdsu_theme_resp_preprocess_responsive_image(&$variables) {
+
+ // Step through each of the responsive image objects and get out source info.
+ foreach ($variables['sources'] as $source) {
+
+ // Set the a variable with the actual source info that we need.
+ $new_sources[] = array(
+ 'srcset' => $source['srcset']->value(),
+ 'media' => $source['media']->value(),
+ 'type' => $source['type']->value(),
+ );
+ }
+
+ // Set the sources variable to the new sources.
+ $variables['sources'] = $new_sources;
+}
+
/**
* Implements hook_preprocess_region().
*/
--
GitLab