Merge pull request #697 from B77Mills/VideoIconSectionNodes

Add section-feeed-node ${contentType}-content-type modifier
parameter1 · Apr 28, 2023 · 5f2feaf · 5f2feaf
2 parents 2e9b3b0 + 57ccffa
commit 5f2feaf
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/packages/marko-web-theme-monorail/components/nodes/section-feed-content.marko b/packages/marko-web-theme-monorail/components/nodes/section-feed-content.marko
@@ -1,11 +1,13 @@
-import { getAsObject, get } from "@parameter1/base-cms-object-path";
+import { getAsObject, getAsArray, get } from "@parameter1/base-cms-object-path";
 import { buildImgixUrl } from "@parameter1/base-cms-image";
 import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
 
 $ const { site, i18n } = out.global;
 
 $ const content = getAsObject(input, "node");
 $ const { company } = content;
+$ const contentType = defaultValue(content.type, 'article');
+$ const modifiers = [...getAsArray(input, "modifiers"), `${contentType}-content-type`]
 $ const withCompany = (company) ? defaultValue(input.withCompany, true) : false;
 $ const primaryImage = getAsObject(content, "primaryImage");
 $ const primarySection = getAsObject(content, "primarySection");
@@ -29,7 +31,7 @@ $ const lazyload = defaultValue(input.lazyload, true);
   Keys are content types (all lowercase), values are the field to use when available on that type.
 **/
 $ const linkOffsite = getAsObject(site, "config.linkOffsite");
-$ const linkField = get(linkOffsite, get(content, "type"));
+$ const linkField = get(linkOffsite, contentType);
 $ const linkTarget = linkField && get(content, linkField) ? defaultValue(get(linkOffsite, "target"), "") : "";
 
 $ const imageOptions = {
@@ -48,7 +50,7 @@ $ const mobileImageOptions = {
 
 $ const blockName = "section-feed-content-node";
 
-<marko-web-block name=blockName modifiers=input.modifiers attrs=containerAttrs>
+<marko-web-block name=blockName modifiers=modifiers attrs=containerAttrs>
   <marko-web-element block-name=blockName name="contents">
     <marko-web-element block-name=blockName name="body">
       <if(input.sponsoredBy)>

diff --git a/packages/marko-web-theme-monorail/scss/components/blocks/_section-feed.scss b/packages/marko-web-theme-monorail/scss/components/blocks/_section-feed.scss
@@ -120,6 +120,26 @@
       }
     }
   }
+  &--video-content-type {
+    #{ $self } {
+      &__image-wrapper {
+        position: relative;
+        &::after {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          width: 50px;
+          height: 50px;
+          content: "";
+          background-image: url("data:image/png;base64,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");
+          filter: brightness(0) invert(1) drop-shadow(2px 2px 2px rgba(0, 0, 0, .5));
+          background-size: contain;
+          opacity: .6;
+          transform: translate(-50%, -50%);
+        }
+      }
+    }
+  }
 }
 
 .node-list {