Merge pull request #1 from pixelant/videoElement

[TASK] add and modify video-solution from Nira, add poster image field. Add bg-video-heroimage section
pixelant · Oct 17, 2024 · 6f69c91 · 6f69c91
2 parents fd7b367 + 8daa4db
commit 6f69c91
Show file tree

Hide file tree

Showing 9 changed files with 301 additions and 0 deletions.
diff --git a/theme/css/sections.css b/theme/css/sections.css
@@ -1 +1,2 @@
+{% include './sections/bg-video-heroimage.css' %}
 {% include './sections/site-footer.css' %}
diff --git a/theme/css/sections/bg-video-heroimage.css b/theme/css/sections/bg-video-heroimage.css
@@ -0,0 +1,23 @@
+.bg-video-heroimage {
+  position: relative;
+  overflow: hidden !important;
+  -webkit-font-smoothing: antialiased;
+  display: block;
+}
+
+.bg-video-heroimage .bg-video-wrp {
+  overflow: hidden;
+}
+
+.bg-video-heroimage video {
+  background-color: var(--secondary1-color);
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+  object-fit: cover;
+  z-index: -1;
+}
diff --git a/theme/images/section-previews/bg-video-heroimage.jpg b/theme/images/section-previews/bg-video-heroimage.jpg
diff --git a/theme/modules/background-video.module/fields.json b/theme/modules/background-video.module/fields.json
@@ -0,0 +1,27 @@
+[ {
+  "picker" : "video",
+  "id" : "6d37d803-dd3c-dcee-5130-d7f4c4f7605e",
+  "name" : "file_field",
+  "display_width" : null,
+  "label" : "Video file",
+  "required" : false,
+  "locked" : false,
+  "type" : "file"
+}, {
+  "id" : "c8aa6fd0-590b-30f5-d351-7915ca260c08",
+  "name" : "poster_image",
+  "display_width" : null,
+  "label" : "Poster image",
+  "required" : false,
+  "locked" : false,
+  "responsive" : false,
+  "resizable" : true,
+  "show_loading" : false,
+  "type" : "image",
+  "default" : {
+    "size_type" : "exact",
+    "src" : "",
+    "alt" : null,
+    "loading" : "lazy"
+  }
+} ]
diff --git a/theme/modules/background-video.module/meta.json b/theme/modules/background-video.module/meta.json
@@ -0,0 +1,9 @@
+{
+  "global" : false,
+  "content_types" : [ "SITE_PAGE" ],
+  "icon" : "fontawesome-5.14.0:Photo%20Video:SOLID",
+  "host_template_types" : [ "PAGE", "BLOG_LISTING", "BLOG_POST" ],
+  "module_id" : 118480362952,
+  "label" : "Background video",
+  "is_available_for_new_content" : true
+}
diff --git a/theme/modules/background-video.module/module.css b/theme/modules/background-video.module/module.css
@@ -0,0 +1,2 @@
+/* add print styles here */
+/* @media print {} */
diff --git a/theme/modules/background-video.module/module.html b/theme/modules/background-video.module/module.html
@@ -0,0 +1,5 @@
+<div class="bg-video-wrp">
+  <video {{ 'poster="' ~ module.poster_image.src|escape_url ~ '" ' if module.poster_image.src }} autoplay loop muted playsinline>
+      <source src="{{ module.file_field }}">
+  </video>
+</div>
diff --git a/theme/modules/background-video.module/module.js b/theme/modules/background-video.module/module.js
diff --git a/theme/sections/bg-video-heroimage.html b/theme/sections/bg-video-heroimage.html
@@ -0,0 +1,234 @@
+<!--
+  templateType: section
+  label: Background video + hero image
+  description: Select video and alternative poster image + hero image
+  isAvailableForNewContent: true
+  screenshotPath: ../images/section-previews/bg-video-heroimage.jpg
+-->
+{% dnd_section
+  class="bg-video-heroimage",
+  padding={
+    "default" : {
+      "bottom" : "125px",
+      "top" : "125px"
+    },
+    "mobile" : {
+      "bottom" : "0px",
+      "top" : "0px"
+    }
+  },
+  full_width=true
+%}
+  {% dnd_column
+    offset=0,
+    width=12,
+    padding={
+      "default" : {
+        "left" : "0px",
+        "right" : "0px"
+      }
+    }
+  %}
+    {% dnd_row %}
+      {% dnd_module
+        path="/randomforest-nimbly-child/modules/background-video",
+        offset=0,
+        width=12,
+        file_field="",
+        poster_image={
+          "alt" : "bg-video-heroimage",
+          "height" : 757,
+          "loading" : "lazy",
+          "size_type" : "exact",
+          "src" : "https://www.randomforest.se/hubfs/bg-video-heroimage.jpg",
+          "width" : 1585
+        }
+      %}
+      {% end_dnd_module %}
+    {% end_dnd_row %}
+    {% dnd_row %}
+      {% dnd_module
+        path="@marketplace/Resultify/Nimbly_Lite/modules/heroimage",
+        offset=0,
+        width=12,
+        button={
+          "link" : {
+            "no_follow" : false,
+            "open_in_new_tab" : false,
+            "url" : {
+              "href" : "#Apply",
+              "type" : "EXTERNAL"
+            }
+          },
+          "text" : "Apply now"
+        },
+        figure={
+          "image" : {
+            "src" : ""
+          }
+        },
+        heading={
+          "heading_tag" : "h1",
+          "text" : "Career with <b>Random Forest</b>"
+        },
+        hero_components=[ {
+          "component" : "Icon",
+          "show" : true
+        }, {
+          "component" : "Subheading",
+          "show" : true
+        }, {
+          "component" : "Text",
+          "show" : true
+        }, {
+          "component" : "Heading",
+          "show" : true
+        }, {
+          "component" : "Rich text",
+          "show" : true
+        }, {
+          "component" : "Link",
+          "show" : true
+        }, {
+          "component" : "Secondary link",
+          "show" : true
+        }, {
+          "component" : "Button",
+          "show" : true
+        }, {
+          "component" : "Secondary button",
+          "show" : true
+        } ],
+        image={ },
+        richtext={
+          "rich_text" : ""
+        },
+        secondary_link={
+          "link" : {
+            "no_follow" : false,
+            "open_in_new_tab" : false,
+            "rel" : "",
+            "sponsored" : false,
+            "url" : {
+              "href" : "",
+              "type" : "EXTERNAL"
+            },
+            "user_generated_content" : false
+          },
+          "text" : ""
+        },
+        style={
+          "figure" : {
+            "alignment" : {
+              "alignment" : {
+                "css" : "",
+                "horizontal_align" : "CENTER",
+                "vertical_align" : "MIDDLE"
+              }
+            },
+            "custom_image_fit" : {
+              "image_fit" : "cover"
+            }
+          },
+          "general" : {
+            "spacing" : {
+              "spacing" : {
+                "padding" : {
+                  "bottom" : {
+                    "units" : "px",
+                    "value" : 40
+                  },
+                  "left" : {
+                    "units" : "px",
+                    "value" : 12
+                  },
+                  "right" : {
+                    "units" : "px",
+                    "value" : 12
+                  },
+                  "top" : {
+                    "units" : "px",
+                    "value" : 40
+                  }
+                }
+              }
+            }
+          },
+          "heading" : {
+            "custom_theme_overrides" : {
+              "color" : {
+                "color" : "#fff",
+                "opacity" : 100
+              }
+            }
+          },
+          "link" : {
+            "alignment" : {
+              "inline" : true
+            },
+            "custom_theme_overrides" : {
+              "font" : {
+                "fallback" : "sans-serif",
+                "font" : "Open Sans",
+                "font_set" : "GOOGLE",
+                "size" : 18,
+                "style" : "font-family: 'Open Sans', sans-serif; font-style: normal; font-weight: 700; text-decoration: none",
+                "styles" : {
+                  "font-family" : "'Open Sans', sans-serif",
+                  "font-style" : "normal",
+                  "font-weight" : 700,
+                  "text-decoration" : "none"
+                },
+                "variant" : "700"
+              }
+            }
+          },
+          "secondary_link" : {
+            "alignment" : {
+              "inline" : true
+            },
+            "custom_theme_overrides" : {
+              "font" : {
+                "fallback" : "sans-serif",
+                "font" : "Open Sans",
+                "font_set" : "GOOGLE",
+                "size" : 18,
+                "style" : "font-family: 'Open Sans', sans-serif; font-style: normal; font-weight: 700; text-decoration: none",
+                "styles" : {
+                  "font-family" : "'Open Sans', sans-serif",
+                  "font-style" : "normal",
+                  "font-weight" : 700,
+                  "text-decoration" : "none"
+                },
+                "variant" : "700"
+              }
+            }
+          },
+          "text" : {
+            "custom_theme_overrides" : {
+              "font" : {
+                "color" : "#FFFFFF",
+                "fallback" : "sans-serif",
+                "font" : "Open Sans",
+                "font_set" : "GOOGLE",
+                "size" : 18,
+                "style" : "font-weight: 600; text-decoration: none; font-family: 'Open Sans', sans-serif; font-style: normal",
+                "styles" : {
+                  "font-family" : "'Open Sans', sans-serif",
+                  "font-style" : "normal",
+                  "font-weight" : 600,
+                  "text-decoration" : "none"
+                },
+                "variant" : "600"
+              }
+            }
+          }
+        },
+        text={
+          "text" : "COMPETENT, ENGAGED AND PRO ACTIVE"
+        }
+      %}
+      {% end_dnd_module %}
+    {% end_dnd_row %}
+  {% end_dnd_column %}
+{% end_dnd_section %}