Dynamic Layout builder for OctoberCMS

README.MD

A Dynamic Layout builder for OctoberCMS

Uses the pages plugin. Adjust accordingly to you needs.

Requirements

The Static Pages Plugin

The Icones Finder Plugin

October CMS and a basic knowledge of how October CMS works. Check the docs for more info

Instructions

• Create a directory called 'config' in the root of your theme. ex: october/themes/your-theme/config/
• Add the default_layout.yaml in that directory
• Create a new layout and copy/paste the code in there. Adjust accordingly.

Notes:

• Layout file is in twig, but really, you'll need a layout file with .htm
• Replace style="collapsed" with displayMode="builder" if you have OctoberCMS v2.2.* for better usability.
• You can reference the theme directory when you pull in the yaml file. Just replace the ~ with #. only works with October v2.2.*

default_layout.yaml

heroLayout:
  description: Hero Layout
  icon: icon-laptop
  fields:
    contentSection:
      type: section
      label: Content
      comment: The content displayed in the Hero.
    title:
      type: text
      label: Title
      commentAbove: The title of the section.
      span: left
    heroLayoutStyle:
      type: dropdown
      label: Hero Style
      span: right
      commentAbove: Styles the bottom portion of the Hero.
      options:
        slanted: Slanted
        pointed: Pointed
    heroLayoutBackgroundImage:
      type: mediafinder
      label: Background Image
      mode: image
      span: left
      commentAbove: Background image to the Hero.
    heroLayoutMedia:
      type: mediafinder
      label: Right Column Media
      span: right
      commentAbove: Media to display in the right column. Can be a picture or video.
    heroLayoutContent:
      type: richeditor
      label: Content
      commentAbove: Content of the Hero.
      toolbarButtons: paragraphStyle|paragraphFormat|quote|snippets|bold|italic|color|align|formatOL|formatUL|insertTable|insertLink|insertImage|insertVideo|insertAudio|insertFile|insertHR|html|fullscreen
    optionsSection:
      type: section
      label: Options
      comment: Configurable options for this section
    hideTitle:
      type: switch
      label: Hide Title on Website
      span: left
      commentAbove: Removes the title from the website. Useful if you want to use the content field in each layout for styling. Defaults to hidden.
      default: 1

#------------------------------------------#

oneColumnLayout:
  description: One Column Layout
  icon: icon-window-maximize
  fields:
    contentSection:
      type: section
      label: Content
      comment: The content displayed in this section.
    title:
      type: text
      label: Title
      commentAbove: The title of this section.
      span: left
    oneColumnLayoutPosition:
      type: dropdown
      label: Column Position
      span: right
      commentAbove: The position of the column.
      options:
        me-auto: Left
        mx-auto: Center
        ms-auto: Right
    oneColumnLayoutWidth:
      type: number
      label: Column Width
      commentAbove: The width of the column. Based on a 12 column layout. Leave at 12 for full width.
      span: left
      min: 1
      max: 12
      default: 12
    spacing:
      type: dropdown
      label: Section Spacing
      placeholder: Choose Spacing...
      span: right
      commentAbove: The vertical spacing of this section.
      default: small
      options:
        small: Small
        medium: Medium
        large: Large
        none: None
    oneColumnLayoutContent:
      type: richeditor
      label: Content
      commentAbove: Content of this section.
      toolbarButtons: paragraphStyle|paragraphFormat|quote|snippets|bold|italic|color|align|formatOL|formatUL|insertTable|insertLink|insertImage|insertVideo|insertAudio|insertFile|insertHR|html|fullscreen
    optionsSection:
      type: section
      label: Options
      comment: Configurable options for this section.
    sectionColor:
      type: colorpicker
      label: Section Background Color
      commentAbove: The background color of the section. Defaults to white.
      span: left
      availableColors: ['#2A1937','#492069','#580a7a','#aba2c4','#bcbcbc','#e0e0e0','#ededed','#fb8604','#ffca00','#7fbd32']
    sectionTextColor:
      type: colorpicker
      label: Section Text Color
      commentAbove: The text color of the section. Defaults to black.
      span: right
      availableColors: ['#fff', '#000']
    hideTitle:
      type: switch
      label: Hide Title on Website
      span: left
      commentAbove: Removes the title from the website. Useful if you want to use the content field in each layout for styling. Defaults to hidden.
      default: 1

#------------------------------------------#

twoColumnLayout:
  description: Two Column Layout
  icon: icon-clone
  fields:
    contentSection:
      type: section
      label: Content
      comment: The content displayed in this section.
    title:
      type: text
      label: Title
      commentAbove: The title of this section.
      span: left
    spacing:
      type: dropdown
      label: Section Spacing
      placeholder: Choose Spacing...
      span: right
      commentAbove: The vertical spacing of this section.
      default: small
      options:
        small: Small
        medium: Medium
        large: Large
        none: None
    twoColumnLayoutOneWidth:
      type: number
      label: Left Column Width
      commentAbove: The width of the Left Column. Based on a 12 column layout. Leave at 6 for half width.
      span: left
      min: 1
      max: 12
      default: 6
    twoColumnLayoutTwoWidth:
      type: number
      label: Right Column Width
      commentAbove: The width of the Right Column. Based on a 12 column layout. Leave at 6 for half width.
      span: right
      min: 1
      max: 12
      default: 6
    twoColumnLayoutSpacingLeft:
      type: dropdown
      label: Left Column Layout Spacing
      placeholder: Choose Spacing...
      span: left
      commentAbove: The vertical spacing of the Left Column.
      default: small
      options:
        small: Small
        medium: Medium
        large: Large
        none: None
    twoColumnLayoutSpacingRight:
      type: dropdown
      label: Right Column Layout Spacing
      placeholder: Choose Spacing...
      span: right
      commentAbove: The vertical spacing of the Right Column.
      default: small
      options:
        small: Small
        medium: Medium
        large: Large
        none: None
    twoColumnLayoutContentOne:
      type: richeditor
      label: Left Column Content
      span: left
      commentAbove: Content of the Left Column.
      toolbarButtons: paragraphStyle|paragraphFormat|quote|snippets|bold|italic|color|align|formatOL|formatUL|insertTable|insertLink|insertImage|insertVideo|insertAudio|insertFile|insertHR|html|fullscreen
    twoColumnLayoutContentTwo:
      type: richeditor
      label: Right Column Content
      span: right
      commentAbove: Content of the Right Column.
      toolbarButtons: paragraphStyle|paragraphFormat|quote|snippets|bold|italic|color|align|formatOL|formatUL|insertTable|insertLink|insertImage|insertVideo|insertAudio|insertFile|insertHR|html|fullscreen
    richEditorTip:
      type: hint
      mode: tip
      label: Pro Tip - Rich Editor Bar
      comment: You can find the rest of the tools in the Rich Editor bar by hovering over it and scrolling it. You can also make it fullscreen by clicking the icon in the far right of the Rich Editor bar.
    optionsSection:
      type: section
      label: Options
      comment: Configurable options for this section
    sectionColor:
      type: colorpicker
      label: Section Background color
      commentAbove: The background color of the section. Defaults to white.
      span: left
      availableColors: ['#2A1937','#492069','#580a7a','#aba2c4','#bcbcbc','#e0e0e0','#ededed','#fb8604','#ffca00','#7fbd32']
    sectionTextColor:
      type: colorpicker
      label: Section Text Color
      commentAbove: The text color of the section. Defaults to black.
      span: right
      availableColors: ['#fff', '#000']
    hideTitle:
      type: switch
      label: Hide Title on Website
      span: left
      commentAbove: Removes the Title from the website. Useful if you want to use the content field in each layout for styling. Defaults to hidden.
      default: 1
    twoColumnReverseOnMobile:
      type: switch
      label: Reverse Columns on Mobile
      span: right
      commentAbove: Displays the columns in a reverse format on mobile.

#------------------------------------------#

factLayout:
  description: Fact Layout
  icon: icon-info-circle
  fields:
    contentSection:
      type: section
      label: Content
      comment: The content displayed in this section.
    title:
      type: text
      label: Title
      commentAbove: The Title of the section.
      span: left
    spacing:
      type: dropdown
      label: Section Spacing
      placeholder: Choose Spacing...
      span: right
      commentAbove: The vertical spacing of this section.
      default: small
      options:
        small: Small
        medium: Medium
        large: Large
        none: None
    factLayoutIcon:
      type: iconesfinder
      label: Icon
      commentAbove: The icon displayed before the title. Search below to find an icon. Leave blank for no icon.
    factLayoutContent:
      type: richeditor
      label: Content
      commentAbove: Content of this section.
      toolbarButtons: paragraphStyle|paragraphFormat|quote|snippets|bold|italic|color|align|formatOL|formatUL|insertTable|insertLink|insertImage|insertVideo|insertAudio|insertFile|insertHR|html|fullscreen
    optionsSection:
      type: section
      label: Options
      comment: Configurable options for this section.
    sectionColor:
      type: colorpicker
      label: Section Background color
      commentAbove: The background color of the section. Defaults to white.
      span: left
      availableColors: ['#2A1937','#492069','#580a7a','#aba2c4','#bcbcbc','#e0e0e0','#ededed','#fb8604','#ffca00','#7fbd32']
    sectionTextColor:
      type: colorpicker
      label: Section Text Color
      commentAbove: The text color of the section. Defaults to black.
      span: right
      availableColors: ['#fff', '#000']
    hideTitle:
      type: switch
      label: Hide Title on Website
      span: left
      commentAbove: Removes the title from the website. Useful if you want to use the content field in each layout for styling.
      default: 0
    centerTitle:
      type: switch
      label: Center the Title
      span: right
      commentAbove: Centers the title and the icon.
      default: 0
      trigger:
        action: disable
        field: hideTitle
        condition: checked

dynamic-layout.twig

description = "Dynamic Page Layout"

[staticPage]
useContent = 0
default = 0
==
{#
    // Repeater Content. Parsed by the OctoberCMS Parser
    {variable name="section" type="repeater" prompt="Add A Section" tab="Content" style="collapsed" groups="~/themes/procedural-technologies/config/default_layout.yaml"}{/variable}
#}

<!DOCTYPE html>
<html lang="en">
    <head>
        {% partial 'head' %} {# create this partial #}
    </head>
    <body>
        {% partial 'header' %} {# create this partial #}
        <main>
            <article>
                
                {% for section in page.section %}
                    {# Hero Layout #}
                    {% if section._group == 'heroLayout' %}
                        <section class="hero{{ section.heroLayoutStyle == 'pointed' ? ' pointed-hero' }} {{ section.spacing ~ '-section-spacing' }}" style="color: {{ section.sectionTextColor }} !important; background-color: {{ section.sectionColor }}!important;">
                            <div class="container">
                                <div class="row flex-wrap-reverse flex-lg-wrap">
                                    <div class="col-12 {{ section.heroLayoutMedia|length != true ? ' col-lg-6 mx-auto' : 'col-lg-6' }} align-self-center">
                                        {% if section.hideTitle != true %}
                                            <h1>{{ section.title }}</h1>
                                        {% endif %}
                                        {{ section.heroLayoutContent|raw|parseSnippets }}
                                    </div>
                                    {% if section.heroLayoutMedia|length %}
                                        <div class="col-12 col-lg-6">
                                            {% if (section.heroLayoutMedia|media|split('.')|last == 'mp4') or (section.heroLayoutMedia|media|split('.')|last == 'mov') %}
                                                <video class="hero-video shadow-lg" loop="" muted="" autoplay="">
                                                    <source src="{{ section.heroLayoutMedia|media }}" type="video/mp4">
                                                </video>
                                            {% else %}
                                                <img src="{{ section.heroLayoutMedia|media }}" alt="{{ this.page.title }}" class="hero-video shadow-lg">
                                            {% endif %}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="hero-background">
                                {% if section.heroLayoutBackgroundImage|length %}
                                    <img alt="{{ this.page.title }}" class="hero-background-image" src="{{ section.heroLayoutBackgroundImage|media }}">
                                {% endif %}
                            </div>
                        </section>
                    {% endif %}
                    
                    {# One Column Layout #}
                    {% if section._group == 'oneColumnLayout' %}
                        <section class="{{ section.spacing ~ '-section-spacing' }}" style="color: {{ section.sectionTextColor }} !important; background-color: {{ section.sectionColor }}!important;">
                            <div class="container">
                                <div class="row">
                                    <div class="col-12{{ section.oneColumnLayoutWidth|length ? ' col-lg-' ~ section.oneColumnLayoutWidth }} {{ section.oneColumnLayoutPosition }}">
                                        {% if section.hideTitle != true %}
                                            <h1>{{ section.title }}</h1>
                                        {% endif %}
                                        {{ section.oneColumnLayoutContent|raw|parseSnippets }}
                                    </div>
                                </div>
                            </div>
                        </section>
                    {% endif %}
                    
                    {# Two Column Layout #}
                    {% if section._group == 'twoColumnLayout' %}
                        <section class="{{ section.spacing ~ '-section-spacing' }}" style="color: {{ section.sectionTextColor }} !important; background-color: {{ section.sectionColor }}!important;">
                            <div class="container">
                                <div class="row{{ section.twoColumnReverseOnMobile == true ? ' flex-wrap-reverse flex-lg-wrap' }}">
                                    <div class="col-12">
                                        {% if section.hideTitle != true %}
                                            <h1>{{ section.title }}</h1>
                                        {% endif %}
                                    </div>
                                    <div class="col-12{{ section.twoColumnLayoutOneWidth|length ? ' col-lg-' ~ section.twoColumnLayoutOneWidth : ' col-lg-6' }} align-self-center {{ section.twoColumnLayoutSpacingLeft ~ '-section-spacing-column' }}">
                                        {{ section.twoColumnLayoutContentOne|raw|parseSnippets }}
                                    </div>
                                    <div class="col-12{{ section.twoColumnLayoutTwoWidth|length ? ' col-lg-' ~ section.twoColumnLayoutTwoWidth : ' col-lg-6' }} align-self-center {{ section.twoColumnLayoutSpacingRight ~ '-section-spacing-column' }}">
                                        {{ section.twoColumnLayoutContentTwo|raw|parseSnippets }}
                                    </div>
                                </div>
                            </div>
                        </section>
                    {% endif %}
                    
                    {# Fact Banner Layout #}
                    {% if section._group == 'factLayout' %}
                        <section class="fact-banner {{ section.spacing ~ '-section-spacing' }}" style="color: {{ section.sectionTextColor }} !important; background-color: {{ section.sectionColor }}!important;">
                            <div class="container">
                                <div class="fact-banner-title-container{{ section.centerTitle == true ? ' text-center justify-content-center' }}">
                                    {%- spaceless %}
                                        {%- if section.factLayoutIcon|length %}
                                            <h1 class="fact-banner-icon">
                                                {{- section.factLayoutIcon|iconify -}}
                                            </h1>
                                        {% endif -%}
                                        {%- if section.hideTitle != true %}
                                            <h1 class="fact-banner-header">{{- section.title -}}</h1>
                                        {% endif -%}
                                    {% endspaceless -%}
                                </div>
                                {{ section.factLayoutContent|raw|parseSnippets }}
                            </div>
                        </section>
                    {% endif %}
                {% endfor %}
            </article>
        </main>
        
        {% partial 'footer' %} {# create this partial #}
        
        {% partial 'foot' %} {# create this partial #}
    </body>
</html>