ISTWCMS-3572: adding templates for responsive images

templates/blocks/block--entity-browser-block--uw-ebr-image.html.twig

+{#
+/**
+ * @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 %}

templates/content/media.html.twig

+{#
+/**
+ * @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 %}

templates/fields/field.html.twig

+{#
+/**
+ * @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 %}

templates/fields/responsive-image.html.twig

+{#
+/**
+ * @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']
+} %}

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().
  */