Add video option to Rich text section

Add video option to Rich text section

LindStuart
Excursionist
31 0 6

Hi, wondering if there's an easy way to add a video option to a rich text section. It currently only supports video. I'd also want to be able to make it silent (no audio).

 

I'm using the Local theme by Krown Themes. I've put the code here in case that's helpful for a quick fix. Thanks in advance!

 

 

 

{{ 'section-rich-text.css' | asset_url | stylesheet_tag }}

<div class="{% unless section.settings.is_fullwidth %} container--large {% else %} container--fullwidth {% endunless %} {% unless section.settings.remove_margin %} container--vertical-space {% endunless %} {% if section.settings.section_background_color != "rgba(0,0,0,0)" or section.settings.section_background_gradient != blank %} container--has-background {% endif %}">

  <div id="element-{{ section.id }}" class="card 
    {% if section.settings.is_fullwidth %} card--no-radius card--no-sideborders card--no-shadow {% endif %} 
    {% unless section.settings.image_position contains "top" %} 
      element--height-{{ section.settings.height }} 
    {% else %}
      rich-text--image-on-top 
    {% endunless %} 
  rich-text">

    <div class="rich-text__container rich-text__container--image-{{ section.settings.image_position }} {% if section.settings.is_fullwidth %} rich-text__container--fullwidth {% if section.settings.image_position contains 'top' %} container--large {% endif %} {% endif %}">

      {%- unless section.settings.image_position contains "no-image" -%}
        <div class="rich-text__image 
          {% unless section.settings.image_crop %} rich-text__image--fit {% endunless %} 
          {% if section.settings.image_position contains "top" %} element--height-{{ section.settings.height }} {% endif %}" 
        aria-hidden="true">

          {%- liquid
            if section.index == 1
              assign preload = true
            else
              assign preload = false
            endif
          -%}

          {%- liquid
            unless section.settings.image == blank
              render 'lazy-image', image: section.settings.image, type: '', alt: section.settings.title, image_alignment: true, id: section.id, preload: preload
            else
              echo 'image' | placeholder_svg_tag
            endunless
          -%}
        </div>
      {%- endunless -%}

      <div class="rich-text__text align-content align-content--{{ section.settings.text_alignment }} align-content--vertical-middle">
        <div class="card__text 
          {% unless section.settings.is_fullwidth %} gutter--xlarge {% endunless %} 
          {% if section.settings.is_fullwidth and section.settings.image_position contains "top" %} gutter-top--xlarge gutter-bottom--xlarge {% endif %} 
        spacing--large remove-empty-space">

          {%- for block in section.blocks -%}
            {%- case block.type %}

              {%- when 'custom_liquid' -%}
                <div {{ block.shopify_attributes }}>
                  {{ block.settings.custom_liquid }}
                </div>

              {%- when 'title' -%}
                <{{ block.settings.seo_h_tag }} 
                  class="{{ block.settings.title_size }} rte rich-text__title"
                  {{ block.shopify_attributes }}
                >
                  {{ block.settings.title }}
                </{{ block.settings.seo_h_tag }}>

              {%- when 'text' -%}
                <div 
                  class="rte text-size--{{ block.settings.text_size }}"
                  {{ block.shopify_attributes }}
                >
                  {{ block.settings.text }}
                </div>

              {%- when 'button' -%}
                <div 
                  class="increased-spacing" 
                  {{ block.shopify_attributes }}
                >
                  <a href="{{ block.settings.link }}" {% unless block.settings.open_in_new_window == false %} target="_blank" {% endunless %} class="button button--{{ block.settings.button_size }} button--{{ block.settings.button_style }}">
                    {{ block.settings.button_label }}
                  </a>
                </div>

              {%- when 'space' -%}
                <div class="empty-space" {{ block.shopify_attributes }}>&nbsp;</div>

            {%- endcase %}
          {%- endfor -%}

        </div>  

      </div>

      {%- render 'custom-colors', id: section.id, text: section.settings.color_text_main, background: section.settings.color_background_main, accent: section.settings.color_accent_main, borders: section.settings.color_borders_main, shadow: section.settings.color_shadow_main, hide_borders: section.settings.color_hide_borders, hide_shadow: section.settings.color_hide_shadow -%}

    </div>
  </div>
</div>

{%- if section.settings.section_background_color != "rgba(0,0,0,0)" -%}
  {% style %}
    #shopify-section-{{ section.id }} {
      background-color: {{ section.settings.section_background_color }};
    }
  {% endstyle %}
{%- endif -%}
{%- if section.settings.section_background_gradient != blank -%}
  {% style %}
    #shopify-section-{{ section.id }} {
      background: {{ section.settings.section_background_gradient }};
    }
  {% endstyle %}
{%- endif -%}

{% schema %}
{
  "name": "t:sections.rich-text.name",
  "class": "can-be-fullwidth no-fullwidth-padding",
  "max_blocks": 9,
  "settings": [
    {
      "id": "image",
      "type": "image_picker",
      "label": "t:sections.gallery.blocks.image.settings.image.label"
    },
    {
      "type": "select",
      "id": "image_position",
      "label": "t:sections.local-extra-words.sections.rich-text.settings.image_position.label",
      "options": [
        {
          "value": "left",
          "label": "t:sections.local-extra-words.sections.rich-text.settings.image_position.option__1"
        },
        {
          "value": "top",
          "label": "t:sections.local-extra-words.sections.rich-text.settings.image_position.option__2"
        },
        {
          "value": "right",
          "label": "t:sections.local-extra-words.sections.rich-text.settings.image_position.option__3"
        },
        {
          "value": "top no-image",
          "label": "t:late_edits.rich-text.image_position.no_image.label",
          "group": "t:late_edits.rich-text.image_position.no_image.group"
        }
      ],
      "default": "right"
    },
    {
      "type": "select",
      "id": "height",
      "label": "t:sections.local-extra-words.sections.rich-text.settings.height.label",
      "info": "t:sections.local-extra-words.sections.rich-text.settings.height.info",
      "options": [
        {
          "value": "small",
          "label": "t:sections.image-with-text.settings.image_height.options__1.label"
        },
        {
          "value": "regular",
          "label": "t:sections.image-with-text.settings.image_height.options__2.label"
        },
        {
          "value": "large",
          "label": "t:sections.image-with-text.settings.image_height.options__3.label"
        }
      ],
      "default": "regular"
    },
    {
      "type": "checkbox",
      "id": "image_crop",
      "label": "t:sections.local-extra-words.sections.rich-text.settings.crop.label",
      "info": "t:sections.local-extra-words.sections.rich-text.settings.crop.info",
      "default": true
    },
    {
      "type": "select",
      "id": "text_alignment",
      "label": "t:sections.image-with-text.settings.text_alignment.label",
      "options": [
        {
          "value": "horizontal-left",
          "label": "t:sections.rich-text.settings.text_alignment.options__1.label"
        },
        {
          "value": "horizontal-center",
          "label": "t:sections.rich-text.settings.text_alignment.options__2.label"
        },
        {
          "value": "horizontal-right",
          "label": "t:sections.rich-text.settings.text_alignment.options__3.label"
        }
      ],
      "default": "horizontal-center"
    },
    {
      "type": "header",
      "content": "t:local-march-update.labels.section_design"
    },
    {
      "type": "checkbox",
      "id": "is_fullwidth",
      "label": "t:sections.local-extra-words.sections.rich-text.settings.fullwidth.label",
      "default": false,
      "info": "t:sections.local-extra-words.sections.rich-text.settings.fullwidth.info"
    },
    {
      "type": "color",
      "id": "section_background_color",
      "label": "t:sections.local-extra-words.settings_schema.product-card.badges.custom_badges.color",
      "default": "rgba(0,0,0,0)"
    },
    {
      "type": "color_background",
      "id": "section_background_gradient",
      "label": "t:local-230.background_gradient"
    },
    {
      "type": "checkbox",
      "id": "remove_margin",
      "label": "t:sections.local-extra-words.sections.rich-text.settings.remove_margin.label",
      "default": false
    },
    {
      "type": "header",
      "content": "t:sections.local-extra-words.sections.headings.custom_colors"
    },
    {
      "type": "color",
      "id": "color_background_main",
      "label": "t:sections.split-extra-words.settings_schema.colors.settings.background",
      "default": "rgba(0,0,0,0)"
    },
    {
      "type": "color",
      "id": "color_text_main",
      "label": "t:sections.split-extra-words.settings_schema.colors.settings.text",
      "default": "rgba(0,0,0,0)"
    },
    {
      "type": "color",
      "id": "color_accent_main",
      "label": "t:sections.local-extra-words.settings_schema.colors.settings.accent",
      "default": "rgba(0,0,0,0)"
    },
    {
      "type": "color",
      "id": "color_borders_main",
      "label": "t:sections.local-extra-words.settings_schema.colors.settings.borders",
      "default": "rgba(0,0,0,0)"
    },
    {
      "type": "color",
      "id": "color_shadow_main",
      "label": "t:local-march-update.shadows.label",
      "default": "rgba(0,0,0,0)"
    },
    {
      "type": "checkbox",
      "id": "color_hide_borders",
      "label": "t:sections.local-extra-words.settings_schema.colors.settings.hide_border",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "color_hide_shadow",
      "label": "t:local-march-update.shadows.hide",
      "default": false
    }
  ],
  "blocks": [
    {
      "type": "title",
      "name": "t:sections.rich-text.blocks.heading.name",
      "settings": [
        {
          "type": "inline_richtext",
          "id": "title",
          "label": "t:sections.rich-text.blocks.heading.settings.heading.label",
          "default": "Talk about your brand"
        },
        {
          "type": "select",
          "id": "title_size",
          "label": "t:sections.rich-text.blocks.heading.settings.heading_size.label",
          "options": [
            {
              "value": "h3",
              "label": "t:sections.rich-text.blocks.heading.settings.heading_size.options__1.label"
            },
            {
              "value": "h2",
              "label": "t:sections.rich-text.blocks.heading.settings.heading_size.options__2.label"
            },
            {
              "value": "h1",
              "label": "t:sections.rich-text.blocks.heading.settings.heading_size.options__3.label"
            }
          ],
          "default": "h2"
        },
        {
          "type": "header",
          "content": "t:sections.refactor_words.seo.name"
        },
        {
          "type": "select",
          "id": "seo_h_tag",
          "label": "t:sections.refactor_words.seo.label",
          "info": "t:sections.refactor_words.seo.info",
          "options": [
            {
              "value": "h1",
              "label": "H1"
            },
            {
              "value": "h2",
              "label": "H2"
            },
            {
              "value": "h3",
              "label": "H3"
            },
            {
              "value": "h4",
              "label": "H4"
            },
            {
              "value": "span",
              "label": "span"
            }
          ],
          "default": "h2"
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.rich-text.blocks.text.name",
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "label": "t:sections.rich-text.blocks.text.settings.text.label",
          "default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements or welcome customers to your store.</p>"
        },
        {
          "type": "select",
          "id": "text_size",
          "label": "t:sections.footer.blocks.text.settings.text_size.label",
          "options": [
            {
              "value": "regular",
              "label": "t:sections.rich-text.blocks.heading.settings.heading_size.options__1.label"
            },
            {
              "value": "large",
              "label": "t:sections.rich-text.blocks.heading.settings.heading_size.options__2.label"
            }
          ],
          "default": "regular"
        }
      ]
    },
    {
      "type": "button",
      "name": "t:sections.rich-text.blocks.button.name",
      "settings": [
        {
          "type": "text",
          "id": "button_label",
          "label": "t:sections.rich-text.blocks.button.settings.button_label.label",
          "default": "Show more"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.rich-text.blocks.button.settings.button_link.label"
        },
        {
          "type": "checkbox",
          "id": "open_in_new_window",
          "label": "t:sections.local-extra-words.sections.announcement-bar.blocks.content.settings.target",
          "default": false
        },
        {
          "type": "select",
          "id": "button_size",
          "label": "t:sections.rich-text.blocks.button.settings.button_size.label",
          "options": [
            {
              "value": "regular",
              "label": "t:sections.rich-text.blocks.button.settings.button_size.options__1.label"
            },
            {
              "value": "large",
              "label": "t:sections.rich-text.blocks.button.settings.button_size.options__2.label"
            }
          ],
          "default": "large"
        },
        {
          "id": "button_style",
          "label": "t:sections.local-extra-words.sections.buttons.style.label",
          "type": "select",
          "options": [
            {
              "value": "outline",
              "label": "t:sections.local-extra-words.sections.buttons.style.option__1"
            },
            {
              "value": "solid",
              "label": "t:sections.local-extra-words.sections.buttons.style.option__2"
            }
          ],
          "default": "outline"
        }
      ]
    },
    {
      "type": "custom_liquid",
      "name": "t:sections.refactor_words.custom_code.name",
      "settings": [
        {
          "type": "liquid",
          "id": "custom_liquid",
          "label": "t:sections.custom-liquid.settings.custom_liquid.label"
        }
      ]
    },
    {
      "type": "space",
      "name": "t:local-march-update.blocks.space.name"
    }
  ],
  "presets": [
    {
      "name": "t:sections.rich-text.name",
      "blocks": [
        { "type": "title" },
        { "type": "text" },
        { "type": "button" }
      ]
    }
  ]
}
{% endschema %}

 

 

Replies 0 (0)