From 2307dba46ad81d11591f1ca687b0e449e09e3250 Mon Sep 17 00:00:00 2001
From: Eric Bremner <ebremner@uwaterloo.ca>
Date: Tue, 23 Jul 2024 16:17:26 -0400
Subject: [PATCH] ISTWCMS-7002: add the media flags to banners twig so that we
can turn things on/off
---
.../04-components/banners/banners.twig | 1 +
.../card/card-elements/_banner.twig | 118 +++++++++---------
.../card/card-elements/_media.twig | 6 +-
3 files changed, 64 insertions(+), 61 deletions(-)
diff --git a/src/patterns/04-components/banners/banners.twig b/src/patterns/04-components/banners/banners.twig
index 328b1409..5c54d1d8 100644
--- a/src/patterns/04-components/banners/banners.twig
+++ b/src/patterns/04-components/banners/banners.twig
@@ -11,6 +11,7 @@
{% block content %}
{% include '@components/card/card--banner/card--banner.twig' with {
'banners': banners,
+ 'media_flags': media_flags
} %}
{% endblock %}
diff --git a/src/patterns/04-components/card/card-elements/_banner.twig b/src/patterns/04-components/card/card-elements/_banner.twig
index 0c7c0fa0..9d18a127 100644
--- a/src/patterns/04-components/card/card-elements/_banner.twig
+++ b/src/patterns/04-components/card/card-elements/_banner.twig
@@ -29,80 +29,80 @@
{% endif %}
{% endif %}
<div class="card__banner--media">
- {% if image.type == "uw_para_local_video_banner" %}
- <div id="{{ image.uuid }}" class="uw-video-wrapper {{ image.type }}">
- <video id="video-{{ image.uuid }}" aria-label="video" muted="1" loop="1" class="video-{{ image.uuid }}" autoplay="1" poster="{{ image.img_element }}" width="100%">
- <source src="{{ image.video }}" type="video/mp4" />
- Your browser does not support the video tag.
- </video>
- </div>
- {% elseif image.type == "uw_para_vimeo_video_banner" %}
- <div id="{{ banners.uuid }}" class="uw-video-wrapper {{ image.type }}">
- {% set remote_video = {'video': image.video} %}
- {% include '@components/remote-video/remote-video.twig' with {
- remote_video: remote_video
- } %}
- </div>
- {% else %}
- {% if listing_image.img_element %}
- {% include "@components/responsive-image/responsive-image.twig" with {
- sources: image.sources,
- img_element: listing_image.img_element,
- alt: listing_image.alt
- }%}
+ {% if image.type == "uw_para_local_video_banner" %}
+ <div id="{{ image.uuid }}" class="uw-video-wrapper {{ image.type }}">
+ <video id="video-{{ image.uuid }}" aria-label="video" muted="1" loop="1" class="video-{{ image.uuid }}" autoplay="1" poster="{{ image.img_element }}" width="100%">
+ <source src="{{ image.video }}" type="video/mp4" />
+ Your browser does not support the video tag.
+ </video>
+ </div>
+ {% elseif image.type == "uw_para_vimeo_video_banner" %}
+ <div id="{{ banners.uuid }}" class="uw-video-wrapper {{ image.type }}">
+ {% set remote_video = {'video': image.video} %}
+ {% include '@components/remote-video/remote-video.twig' with {
+ remote_video: remote_video
+ } %}
+ </div>
{% else %}
- {% include "@components/responsive-image/responsive-image.twig" with {
- sources: image.sources,
- img_element: image.img_element,
- alt: image.alt
- }%}
+ {% if listing_image.img_element %}
+ {% include "@components/responsive-image/responsive-image.twig" with {
+ sources: image.sources,
+ img_element: listing_image.img_element,
+ alt: listing_image.alt
+ }%}
+ {% else %}
+ {% include "@components/responsive-image/responsive-image.twig" with {
+ sources: image.sources,
+ img_element: image.img_element,
+ alt: image.alt
+ }%}
+ {% endif %}
{% endif %}
- {% endif %}
</div>
{% if not text_overlay_big or image.small_text or image.other_text or image.tag %}
<div class="card__banner--caption {{ image.type }}">
- {% if banners.text_overlay == "left-dark" or banners.text_overlay == "left-light" or text_overlay_class == 'uw-text-overlay--none' %}
- <div class="card__banner--text-align">
- {% endif %}
- {% if image.tag %}
- {% include '@components/tag-list/tag-list.twig' with {
- 'items': image.tag,
- } %}
- {% endif %}
- {% if image.big_text or image.small_text or image.other_text %}
- {% if banners.use_page_title_big_text %}
- {% if banners.text_overlay != "split" %}
- <h1 class="card__banner--title">{{ image.big_text }}</h1>
- {% endif %}
- {% else %}
- {% if banners.text_overlay != "split" %}
- {% if image.big_text %}
- <span class="card__banner--title">
- <strong>
- {{ image.big_text }}
- </strong>
- </span>
+ {% if banners.text_overlay == "left-dark" or banners.text_overlay == "left-light" or text_overlay_class == 'uw-text-overlay--none' %}
+ <div class="card__banner--text-align">
+ {% endif %}
+ {% if image.tag %}
+ {% include '@components/tag-list/tag-list.twig' with {
+ 'items': image.tag,
+ } %}
+ {% endif %}
+ {% if image.big_text or image.small_text or image.other_text %}
+ {% if banners.use_page_title_big_text %}
+ {% if banners.text_overlay != "split" %}
+ <h1 class="card__banner--title">{{ image.big_text }}</h1>
+ {% endif %}
+ {% else %}
+ {% if banners.text_overlay != "split" %}
+ {% if image.big_text %}
+ <span class="card__banner--title">
+ <strong>
+ {{ image.big_text }}
+ </strong>
+ </span>
+ {% endif %}
{% endif %}
{% endif %}
+ {% if image.small_text %}
+ <span class="card__banner--sub-title">
+ {{ image.small_text }}
+ </span>
+ {% endif %}
+ {% if image.other_text %}
+ <div class="card__banner--other-split">{{ image.other_text }}</div>
{% endif %}
- {% if image.small_text %}
- <span class="card__banner--sub-title">
- {{ image.small_text }}
- </span>
{% endif %}
- {% if image.other_text %}
- <div class="card__banner--other-split">{{ image.other_text }}</div>
+ {% if banners.text_overlay == "left-dark" or banners.text_overlay == "left-light" or text_overlay_class == "uw-text-overlay--none" %}
+ </div>
{% endif %}
- {% endif %}
- {% if banners.text_overlay == "left-dark" or banners.text_overlay == "left-light" or text_overlay_class == "uw-text-overlay--none" %}
</div>
{% endif %}
- </div>
- {% endif %}
{% if image.link %}
</a>
{% endif %}
- {% if image.type == "uw_para_local_video_banner" %}
+ {% if image.type == "uw_para_local_video_banner" and media_flags.use_play_pause %}
<div class="video-bottom">
<div class="controls embedded-video-controls">
<button id="btn-{{ image.uuid }}" class="banner-video-control video-control uw-video-pause" aria-label="Pause" title="Pause Video Autoplay">
diff --git a/src/patterns/04-components/card/card-elements/_media.twig b/src/patterns/04-components/card/card-elements/_media.twig
index 7754fa5e..7ed45cda 100644
--- a/src/patterns/04-components/card/card-elements/_media.twig
+++ b/src/patterns/04-components/card/card-elements/_media.twig
@@ -2,7 +2,8 @@
{% if media.type == 'banner' %}
{% include '@components/banners/banners.twig' with {
- 'banners': media.media
+ 'banners': media.media,
+ 'media_flags': media_flags
} only %}
{% endif %}
@@ -16,7 +17,8 @@
{% if media.type == 'remote_video' %}
{% include '@components/remote-video/remote-video.twig' with {
- 'remote_video': media.media
+ 'remote_video': media.media,
+ 'media_flags': media_flags
} %}
{% endif %}
</div>
--
GitLab