Merge pull request #666 from middlebury/media-component

Media group component
middlebury · Jan 9, 2025 · 0ba3dc2 · 0ba3dc2
2 parents 02143a5 + abb5215
commit 0ba3dc2
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 8 deletions.
diff --git a/src/data/image_styles.yml b/src/data/image_styles.yml
@@ -124,6 +124,12 @@ image_styles:
       - 400x225
       - 640x360
 
+  media_group:
+    title: Media Group component
+    ratio: 'any'
+    srcset:
+      - 400x225
+
   event_teaser:
     title: Event teaser
     ratio: 'any'

diff --git a/src/scss/_paragraphs.scss b/src/scss/_paragraphs.scss
@@ -153,6 +153,11 @@
 
 .paragraph--two-col-text {
   @extend %paragraph-space;
+
+  @include breakpoint(lg) {
+    margin-top: $spacing-8;
+    margin-bottom: $spacing-8;
+  }
 }
 
 .paragraph--faq {

diff --git a/src/templates/paragraphs/audio.twig b/src/templates/paragraphs/audio.twig
@@ -1,4 +1,4 @@
-<div class="audio paragraph--audio">
+<div class="audio {{ paragraph ? "paragraph--audio": ""}}">
   {% if panopto %}
     <div class="audio__embed">
       <iframe aria-label="Audio player" src="https://midd.hosted.panopto.com/Panopto/Pages/Embed.aspx?id=f9b9f6b5-f52c-40f8-962b-db0b6b214532&v=1" frameborder="0" allowfullscreen allow="autoplay"></iframe>

diff --git a/src/templates/paragraphs/media-group.twig b/src/templates/paragraphs/media-group.twig
@@ -0,0 +1,30 @@
+<div class="section paragraph paragraph--expand" data-digest-content>
+  <div class="paragraphs--wide__offset">
+    <div class="section__header mb-7 mb-lg-8">
+      <h2 class="section__title">
+        {{title}}
+      </h2>
+      <p class="section__text">
+        {{blurb}}
+      </p>
+    </div>
+  </div>
+
+  <div class="row">
+    {% for item in media_content_items %}
+      <div class="col-md-6 mb-7 {{loop.index % 2 == 0 ? 'pl-lg-4' : 'pr-lg-4'}}">
+        {% if item == 'video' %}
+          {% include 'partials/video.twig' %}
+        {% elseif item == 'audio' %}
+          {% include 'paragraphs/audio.twig' with {paragraph: false} %}
+        {% elseif item == 'image' %}
+          {% if loop.index % 2 == 1 %}<div class="float-md-right">{% endif %}
+              {% include 'partials/image-with-caption.twig' with {
+                name: 'media_group',
+              } %}
+          {% if loop.index % 2 == 1 %}</div>{% endif %}
+        {% endif %}
+      </div>
+    {% endfor %}
+  </div>
+</div>
diff --git a/src/templates/partials/basic-content.twig b/src/templates/partials/basic-content.twig
@@ -32,7 +32,16 @@
 		</p>
 	</div>
 
-	{% include 'paragraphs/video-group.twig' %}
+  {% include 'paragraphs/media-group.twig' with {
+    title: 'Media group',
+    blurb: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus
+        quam optio ratione labore possimus iusto corrupti vero fugiat explicabo
+        officiis ex, a sunt obcaecati molestias voluptate eum earum ipsam
+        accusantium.',
+    media_content_items: ['video', 'image', 'image', 'audio', 'video']
+  } %}
+
+	{# {% include 'paragraphs/video-group.twig' %} #}
 
 	{% include 'paragraphs/status-report.twig' %}
 
@@ -51,7 +60,9 @@
 	{% include 'paragraphs/profile-list.twig' %}
 
 	{% if not env.test %}
-		{% include 'paragraphs/audio.twig' %}
+		{% include 'paragraphs/audio.twig' with {
+      paragraph: true
+    } %}
 	{% endif %}
 
 	{% include 'paragraphs/announcement.twig' %}

diff --git a/src/templates/partials/top-level-paragraphs.twig b/src/templates/partials/top-level-paragraphs.twig
@@ -46,7 +46,7 @@
 
 {% include 'paragraphs/text-short.twig' %}
 
-{% include 'paragraphs/audio.twig' with { panopto: true } %}
+{% include 'paragraphs/audio.twig' with { panopto: true, paragraph: true } %}
 
 {% include 'paragraphs/two-col-text.twig' %}
 

diff --git a/src/templates/school-basic-content.twig b/src/templates/school-basic-content.twig
@@ -3,9 +3,10 @@
 {% set theme = 'college' %}
 
 {% set page_header = {
-  title: 'Korean Immersion Program',
+  title: 'School basic content',
   breadcrumb: [
-    { text: 'Korean' },
+    { text: 'Offices and Services' },
+    { text: 'Student Financial Services' },
   ]
 } %}
 
@@ -14,7 +15,7 @@
     {% block nav %}
 
       {% include 'partials/page-nav.twig' with {
-        label: 'Korean',
+        label: 'Student Financial Services',
         items: [
           { text: 'Curriculum', href: '#' },
           {

diff --git a/src/templates/school-home-schools-abroad.twig b/src/templates/school-home-schools-abroad.twig
@@ -12,7 +12,16 @@
 
   {% include 'paragraphs/school-explorer.twig' %}
 
-  {% include 'paragraphs/video-group.twig' %}
+  {% include 'paragraphs/media-group.twig' with {
+    title: 'Media group',
+    blurb: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus
+        quam optio ratione labore possimus iusto corrupti vero fugiat explicabo
+        officiis ex, a sunt obcaecati molestias voluptate eum earum ipsam
+        accusantium.',
+    media_content_items : ['video', 'image', 'image', 'audio', 'video']
+  } %}
+
+  {# {% include 'paragraphs/video-group.twig' %} #}
 
   {% include 'paragraphs/themed-panel.twig' with {
     main_title: true,