feat(components): Create embed_card to show concert media with heading

HGNM · Mar 4, 2019 · 84ff0ba · 84ff0ba
1 parent 14faa93
commit 84ff0ba
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 11 deletions.
diff --git a/components/embed_card.php b/components/embed_card.php
@@ -0,0 +1,50 @@
+<?php
+if (!function_exists('embed_card')) {
+    function embed_card($opts)
+    {
+        global $wp_embed;
+        $post = $opts['post'];
+        $embed_link = get_sub_field('embed_link', false);
+
+        if ($embed_link) {
+            $performer_link =
+            '<a href="' . get_the_permalink($post) . '">' .
+                get_the_title($post) .
+            '</a>';
+
+            $composer = get_sub_field('composer');
+
+            $composer_link =
+            '<a href="' . get_the_permalink($composer) . '">' .
+                get_the_title($composer) .
+            '</a>';
+
+            $heading =
+            '<h4 class="embed-card__heading">' .
+                $composer_link .
+                ' / ' .
+                $performer_link .
+                '<br>' .
+                '<em>' .
+                    get_sub_field('work_title') .
+                '</em>' .
+            '</h4>';
+
+            $iframe = $wp_embed->shortcode(array(
+                'width' => 640,
+                'height' => 390,
+                'src' => $embed_link
+            ));
+
+            $html =
+            '<span class="embed-card">' .
+                $heading .
+                component('responsive_embed', $iframe) .
+            '</span>';
+
+            return $html;
+        } else {
+            return null;
+        }
+    }
+}
diff --git a/scss/style.scss b/scss/style.scss
@@ -318,6 +318,25 @@ iframe {
   }
 }
 
+@supports (display: flex) {
+  .embed-card {
+    display: flex;
+    flex-direction: column-reverse;
+
+    &__heading {
+      margin: .75em 0;
+      font-family: $serif-stack;
+      font-weight: 400;
+
+      & a {
+        letter-spacing: .01em;
+        font-family: $sans-stack;
+        font-weight: 700;
+      }
+    }
+  }
+}
+
 // ==========================================================================
 // Responsive Card List
 // ==========================================================================
@@ -1221,17 +1240,6 @@ $item-gutter: 1em;
     font-feature-settings: "lnum" 1;
   }
 
-  &__item-heading {
-    margin: .75em 0;
-    font-weight: 400;
-
-    & a {
-      letter-spacing: .01em;
-      font-family: $sans-stack;
-      font-weight: 700;
-    }
-  }
-
   .audio,
   .video {
     li {