Style Page Header Featured Media (#65)

kanopi · Sep 19, 2024 · ef71f72 · ef71f72
1 parent cf9354b
commit ef71f72
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 4 deletions.
diff --git a/assets/scss/custom/_header.scss b/assets/scss/custom/_header.scss
@@ -38,7 +38,9 @@
     .field--name-sa-description {
       @extend .bottom-50;
       @extend .top-50;
-      @extend .translate-middle-y;
+      @include media-breakpoint-up(lg) {
+        transform: translateY(-50%);
+      }
     }
   }
 }
@@ -57,6 +59,7 @@
       padding: 1rem !important;
       position: relative !important;
       width: 100% !important;
+      transform: none !important;
     }
   }
 }

diff --git a/assets/scss/_hero.scss → assets/scss/custom/_hero.scss b/assets/scss/_hero.scss → assets/scss/custom/_hero.scss
@@ -123,3 +123,38 @@
     }
   }
 }
+
+.page-header {
+  @include media-breakpoint-up(lg) {
+    min-height: 55vh;
+  }
+
+  &.video {
+    @include media-breakpoint-up(lg) {
+        aspect-ratio: 16 / 9;
+    }
+
+    video {
+        height: 100%;
+        width: 100%;
+    }
+}
+}
+
+.hero-image-page { 
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  aspect-ratio: 16 / 9;
+  z-index: 0 !important;
+
+  @include media-breakpoint-down(lg) {
+      position: relative !important;
+      iframe {
+        height: 100% !important;
+        width: 100% !important;
+      }
+  }
+}
diff --git a/templates/overrides/node/node--hero.html.twig b/templates/overrides/node/node--hero.html.twig
@@ -79,6 +79,8 @@
   {% set overlay_level = content.sa_overlay|render|striptags|trim %}
 {% endif %}
 
+{% set hero_media = content.sa_featured_media[0]['#media'].bundle.value[0].target_id %}
+
 {%
   set classes = [
     node.bundle|clean_class,
@@ -93,7 +95,24 @@
     <h1 class="visually-hidden">{{ label }}</h1>
   {% else %}
     {# Prints a nice image header. #}
-    {% if content.sa_featured_image[0] is not empty %}
+    {% if content.sa_featured_media[0] is not empty %}
+
+      {{ attach_library('saplings_child/hero-video') }}
+      {{ attach_library('saplings_child/hero-video-youtube') }}
+      {{ attach_library('saplings_child/fontawesome') }}
+
+      <div class="page-header mb-lg-0 mb-3 {{ hero_media }} {% if header_position is not empty %} {{ header_position }}{% endif %}"{% if overlay_level is not empty %} data-overlay="{{ overlay_level }}{% endif %}">
+        {% if content.sa_featured_media[0]['#media'].bundle.value.0.target_id == 'image' %}
+          <div class="hero-image-page">
+              {{ content.sa_featured_media }}
+          </div>
+        {% elseif content.sa_featured_media[0]['#media'].bundle.value.0.target_id == 'remote_video' %}
+          <div class="hero-image-page" {% if content.sa_include_pause_button[0]['#markup'] == '1' %}data-vbg-play-button="true"{% endif %} {% if content.sa_include_mute_button[0]['#markup'] == '1' %}data-vbg-mute-button="true"{% endif %} data-vbg="{{ content.sa_featured_media[0]['#media'].field_media_oembed_video.0.value }}"></div>
+        {% else %}
+          <div class="hero-image-page" {% if content.sa_include_pause_button[0]['#markup'] == '1' %}data-vbg-play-button="true"{% endif %} {% if content.sa_include_mute_button[0]['#markup'] == '1' %}data-vbg-mute-button="true"{% endif %} data-vbg="{{ file_url(content.sa_featured_media[0]['#media'].field_media_video_file.entity.uri.value) }}"></div>
+        {% endif %}
+        <div class="page-header__meta">
+    {% elseif content.sa_featured_image[0] is not empty %}
       <div class="page-header mb-lg-0 mb-3 {% if header_position is not empty %} {{ header_position }}{% endif %}"{% if overlay_level is not empty %} data-overlay="{{ overlay_level }}{% endif %}">
         {{ content.sa_featured_image }}
         <div class="page-header__meta">
@@ -128,11 +147,11 @@
                 {{ content.sa_external_source }}
               </div>
             {% endif %}
-    {% if content.sa_featured_image[0] is not empty %}
+    {% if content.sa_featured_media[0] is not empty or content.sa_featured_image[0] is not empty %}
         </div> <!-- / page-header__meta -->
     {% endif %}
         <div class="field--name-sa-description">{{ content.sa_description }}</div>
-    {% if content.sa_featured_image[0] is not empty %}
+    {% if content.sa_featured_media[0] is not empty or content.sa_featured_image[0] is not empty %}
       </header> <!-- / page-header -->
     {% else %}
     {% endif %}