Last active
July 14, 2023 16:37
-
-
Save araphiel/e195bdb11e7ba494b31992fa0ed91800 to your computer and use it in GitHub Desktop.
Page Builder Collection Example using Eleventy
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const { client } = require('../helpers/contentful-client') | |
| const groupBy = require('lodash/fp/groupBy') | |
| async function getPageData() { | |
| // Get all of the locales | |
| const localeData = await client.getLocales() | |
| const localeList = await localeData.items.map(locale => locale.code) | |
| // Fetch collection of all page-builder pages for each locale | |
| const allPages = await Promise.all( | |
| localeList.map(async locale => { | |
| const entries = await client.getEntries({ | |
| locale: locale, | |
| content_type: 'page', | |
| select: 'sys.updatedAt,fields', | |
| include: 4 | |
| }) | |
| const promised = await entries.items | |
| .filter(page => page.fields.title && !page.fields.doNotGenerate) // filter pages that should not be published. | |
| .map(page => { | |
| page.fields.date = new Date(page.sys.updatedAt) // Eleventy expects a date here. | |
| page.fields.locale = locale // Add specific locale to page | |
| return page.fields | |
| }) | |
| return promised | |
| }) | |
| ) | |
| // Spread locale specific page arrays into a single array | |
| const collection = allPages.reduce((acc, val) => [...acc, ...val], []) | |
| // Sort locale pages by slug (so we can see which locales we can access - not efficient!) | |
| const localeGroup = groupBy('slug', collection) | |
| // Add a list of available locales to every page - so we can safely use the language/country switcher) | |
| let localeSegmentedArray = [] | |
| for (const [slug, pages] of Object.entries(localeGroup)) { | |
| const allLocales = pages.map(page => page.locale) | |
| const update = collection | |
| .filter(data => data.slug === slug) | |
| .map(data => { | |
| data.allLocales = allLocales.toString() | |
| return data | |
| }) | |
| localeSegmentedArray.push(update) | |
| } | |
| // Flatten data and make available to our template. | |
| const flatPages = localeSegmentedArray.reduce((acc, val) => [...acc, ...val], []) | |
| return flatPages | |
| } | |
| module.exports = getPageData |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| --- | |
| layout: base.liquid | |
| pagination: | |
| data: contentful-pages | |
| size: 1 | |
| alias: c_page | |
| addAllPagesToCollections: true | |
| permalink: "{% if c_page.locale != 'en' %}{{ c_page.locale }}/{% endif %}{% if c_page.slug == 'old-home' %}{% else %}{{ c_page.slug }}/{% endif %}" | |
| tags: page | |
| eleventyComputed: | |
| title: "{{ c_page.title }}" | |
| permalink: "{% if c_page.locale != 'en' %}{{ c_page.locale }}/{% endif %}{% if c_page.slug == 'old-home' %}{% else %}{{ c_page.slug }}/{% endif %}" | |
| locale: "{{ c_page.locale }}" | |
| meta_title: "{{ c_page.metadata.fields.title }}" | |
| meta_description: "{{ c_page.metadata.fields.description }}" | |
| allLocales: "{{ c_page.allLocales }}" | |
| --- | |
| {% if locale == 'en' %}{% assign pageLocale = '' %}{% else %}{% capture pageLocale %}/{{ locale }}{% endcapture %}{% endif %} | |
| {%- comment -%} Hero Banner {%- endcomment -%} | |
| {% for banner in c_page.banners %} | |
| {% case banner.sys.contentType.sys.id %} | |
| {% when 'hero' %} | |
| {% include hero-banner, | |
| banner_url: banner.fields.image.fields.file.url, | |
| banner_position: banner.fields.backgroundPosition, | |
| disableScroll: banner.fields.disableScroll, | |
| backgroundSize: banner.fields.backgroundSize, | |
| backgroundColor: banner.fields.backgroundColor, | |
| textLocation: banner.fields.textLocation, | |
| buttons: banner.fields.buttons, | |
| text: banner.fields.text, | |
| disableScroll: banner.fields.disableScroll | |
| minHeight: banner.fields.minHeight | |
| %} | |
| {% when 'heroCarousel' %} | |
| <section class="hero-carousel"> | |
| <div class="swiper-container"> | |
| <div class="swiper-wrapper"> | |
| {% for slide in banner.fields.slides %} | |
| <div class="swiper-slide"> | |
| <div class="hero-carousel--slide" style="background-image: linear-gradient(to right, rgba(0,0,0, 0.5) 50%, rgba(0,0,0, 0.5) 100%), url({{ slide.fields.image.fields.file.url }});"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-10"> | |
| {% if slide.fields.title %} | |
| <h1>{{ slide.fields.title }}</h1> | |
| {% endif %} | |
| {% if slide.fields.content %} | |
| {{ slide.fields.content | richText }} | |
| {% endif %} | |
| {% if slide.fields.link.fields.title %} | |
| <a class="btn btn-blue" href="{% localeLink locale, slide.fields.link.fields.url %}">{{ slide.fields.link.fields.title }}</a> | |
| {% endif %} | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| <div class="swiper-pagination"></div> | |
| </div> | |
| </section> | |
| {% endcase %} | |
| {% endfor %} | |
| {%- comment -%} Sections {%- endcomment -%} | |
| {% for area in c_page.areas %} | |
| {% case area.sys.contentType.sys.id %} | |
| {% when 'area' %} | |
| {% assign data = area.fields %} | |
| {% if data.backgroundColor %}{% capture bgColor %}background-color: {{ data.backgroundColor }};{% endcapture%}{% else %}{% capture bgColor %}{% endcapture%}{% endif %} | |
| {% if data.textColor %}{% capture mainColor %}color: {{ data.textColor }};{% endcapture %}{% else %}{% capture mainColor %}{% endcapture %}{% endif %} | |
| {% if data.textAlign %}{% capture textAlign %}text-align: {{ data.textAlign }};{% endcapture %}{% else %}{% capture textAlign %}{% endcapture%}{% endif %} | |
| <section class="area" style="{{ bgColor }}{% padding area.fields.padding %}"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-xl-10 mx-auto"> | |
| <div class="area-text" style="{% inline area.fields.textStyle %}"> | |
| {% if data.subtitle %} | |
| <span class="area--subtitle" style="{{ mainColor }}">{{ data.subtitle }}</span> | |
| {% endif %} | |
| {% unless data.suppressTitle %} | |
| <h3 class="area--title" style="{{ mainColor }}">{{ data.title }}</h3> | |
| {% endunless %} | |
| {% if data.text %} | |
| <div class="area--content {{ data.textSize }}" style="{% inline area.fields.textStyle %}{{ mainColor }}"> | |
| {{ data.text | markdownify }} | |
| </div> | |
| {% endif %} | |
| </div> | |
| </div> | |
| </div> | |
| {% if data.buttons %} | |
| <div class="row"> | |
| <div class="col-12 text-center justify-content-between"> | |
| {% for button in data.buttons %} | |
| <a class="btn btn-cta" href="{% localeLink locale, button.fields.url %}">{{ button.fields.title }}</a> | |
| {% endfor %} | |
| </div> | |
| </div> | |
| {% endif %} | |
| </div> | |
| </section> | |
| {% when 'accordionArea' %} | |
| <section class="accordion-area"> | |
| <div class="container"> | |
| <div class="row"> | |
| {% for accordion in area.fields.accordions %} | |
| {% assign acc = accordion.fields %} | |
| <div class="col-sm-12"> | |
| <div class="accordion-area--heading" data-toggle="collapse" href="#accordion-{{ forloop.index }}" role="button" aria-expanded="false"> | |
| <div>{{ acc.titleText | markdownify }}</div> | |
| <div class="icons"> | |
| <i class="fas fa-chevron-circle-up mr-3"></i> | |
| </div> | |
| </div> | |
| <div id="accordion-{{ forloop.index }}" class="collapse"> | |
| {{ acc.text | markdownify }} | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| </div> | |
| </section> | |
| {% when 'carousel' %} | |
| {% assign data = area.fields %} | |
| {% assign bgImage = data.backgroundImage.fields.file.url %} | |
| {% assign height = data.height %} | |
| {% assign slides = data.items %} | |
| <section class="carousel js-swiper" style="background-image: url({{ bgImage }});"> | |
| <div class="w-100"> | |
| <div class="swiper-container"> | |
| <div class="swiper-wrapper"> | |
| {% for slide in slides %} | |
| <div class="swiper-slide"> | |
| <div class="carousel--slide"> | |
| <div class="carousel--container"> | |
| <div style="{% inline slide.fields.textStyle %}"> | |
| {{ slide.fields.text | markdownify }} | |
| </div> | |
| <b>{{ slide.fields.attribution }}</b> | |
| </div> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| {% assign length = slides | size %} | |
| {% if length > 1 %} | |
| <div class="swiper-button-prev"></div> | |
| <div class="swiper-button-next"></div> | |
| {% endif %} | |
| </div> | |
| </div> | |
| </section> | |
| {% when 'circlesSection' %} | |
| <section class="circle-section"> | |
| {% for circle in area.fields.circles %} | |
| <div class="circle" style="background-color: {{ circle.fields.color }};"> | |
| <div class="content"> | |
| {{ circle.fields.text | richText }} | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </section> | |
| {% when 'eventsSection' %} | |
| <div class="event-section"> | |
| <div class="container"> | |
| <div class="row px-0"> | |
| <div class="col-sm-12 px-0 text-center text-sm-left"> | |
| <h2>{{ area.fields.sectionTitle }}</h2> | |
| <div>{{ area.fields.sectionTextArea | richText }}</div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| {% if area.fields.useMostRecentEvents %} | |
| {% assign filter = area.fields.filterEventTypes | first %} | |
| {% for event in events %} | |
| {% if event.eventType == filter %} | |
| <div class="event-section--row"> | |
| <div class="event-section--name"> | |
| {{ event.eventName }} | |
| </div> | |
| <div class="event-section--date" data-start-date="{{ event.eventStartDate }}" data-end-date="{{ event.eventEndDate }}"> | |
| <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 64h-48V12c0-6.627-5.373-12-12-12h-8c-6.627 0-12 5.373-12 12v52H128V12c0-6.627-5.373-12-12-12h-8c-6.627 0-12 5.373-12 12v52H48C21.49 64 0 85.49 0 112v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zM48 96h352c8.822 0 16 7.178 16 16v48H32v-48c0-8.822 7.178-16 16-16zm352 384H48c-8.822 0-16-7.178-16-16V192h384v272c0 8.822-7.178 16-16 16z"></path></svg> | |
| <span class="js-date"></span> | |
| </div> | |
| <div class="event-section--location"> | |
| {% if event.eventLocation %} | |
| <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M192 96c-52.935 0-96 43.065-96 96s43.065 96 96 96 96-43.065 96-96-43.065-96-96-96zm0 160c-35.29 0-64-28.71-64-64s28.71-64 64-64 64 28.71 64 64-28.71 64-64 64zm0-256C85.961 0 0 85.961 0 192c0 77.413 26.97 99.031 172.268 309.67 9.534 13.772 29.929 13.774 39.465 0C357.03 291.031 384 269.413 384 192 384 85.961 298.039 0 192 0zm0 473.931C52.705 272.488 32 256.494 32 192c0-42.738 16.643-82.917 46.863-113.137S149.262 32 192 32s82.917 16.643 113.137 46.863S352 149.262 352 192c0 64.49-20.692 80.47-160 281.931z"></path></svg> | |
| {{ event.eventLocation }} | |
| {% endif %} | |
| </div> | |
| <div class="event-section--btnContainer"> | |
| <a class="btn btn-blue" href="{{ event.eventLink }}" target="_blank" rel="noopener noreferrer"> | |
| Learn more | |
| </a> | |
| </div> | |
| </div> | |
| {% endif %} | |
| {% endfor %} | |
| {% endif %} | |
| </div> | |
| </div> | |
| </div> | |
| {% when 'fullImageArea' %} | |
| <section class="image-area my-5"> | |
| <div class="container"> | |
| <div class="row mb-5"> | |
| <div class="col-xl-10 mx-auto"> | |
| {% if area.fields.title %} | |
| <h3 class="area--title">{{ area.fields.title }}</h3> | |
| {% endif %} | |
| {% if area.fields.text %} | |
| {{ area.fields.text | markdownify }} | |
| {% endif %} | |
| </div> | |
| </div> | |
| </div> | |
| {% if area.fields.image %} | |
| <div class="container position-relative"> | |
| <img src="{{ area.fields.image.fields.file.url }}" alt="" class="img-fluid mx-auto {% if area.fields.mobileImage %}d-none d-md-block{% else %}d-block{% endif %}"> | |
| {% if area.fields.mobileImage %} | |
| <img src="{{ area.fields.mobileImage.fields.file.url }}" alt="" class="img-fluid mx-auto d-block d-md-none"> | |
| {% endif %} | |
| {% if area.fields.tooltips %} | |
| <svg id="hotzone" class="d-block mx-auto" viewBox="0 0 1500 827" width="100%" height="100%" preserveAspectRatio="xMinYMin slice"> | |
| {% for tooltip in area.fields.tooltips %} | |
| <circle class="image-area--hotspot" data-tooltip="{{ forloop.index }}" cx="{{ tooltip.fields.left }}" cy="{{ tooltip.fields.top }}" r="25" fill="transparent"></circle> | |
| {% endfor %} | |
| </svg> | |
| {% for tooltip in area.fields.tooltips %} | |
| <div class="image-area--tooltip js-tooltip d-none" data-tooltip="{{ forloop.index }}"> | |
| {{ tooltip.fields.text | markdownify }} | |
| </div> | |
| {% endfor %} | |
| {% endif %} | |
| </div> | |
| {% if area.fields.tooltips %} | |
| <div class="container mt-5 d-sm-block d-lg-none"> | |
| <div class="row"> | |
| {% for tooltip in area.fields.tooltips %} | |
| <div class="col-12"> | |
| <div class="image-area--accordion"> | |
| <div class="image-area--top" data-toggle="collapse" href="#tooltip-accordion-{{ forloop.index }}" role="button" aria-expanded="false"> | |
| <i class="fas fa-chevron-circle-down mr-3"></i> | |
| <h3>{{ tooltip.fields.title }}</h3> | |
| </div> | |
| <div id="tooltip-accordion-{{ forloop.index }}" class="image-area--bottom collapse"> | |
| {{ tooltip.fields.text | markdownify }} | |
| </div> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| </div> | |
| {% endif %} | |
| {% endif %} | |
| </section> | |
| {% when 'imageArea' %} | |
| {% assign data = area.fields %} | |
| {% assign column_num = data.columns | default: 1 %} | |
| <section class="grid-area" {% if data.backgroundColor %}style="background-color: {{ data.backgroundColor }}"{% endif %}> | |
| <div class="container{% if data.fullBackground %}-fluid{% endif %}"> | |
| <div class="container{% if data.fullWidthSubContainer %}-fluid{% endif %}"> | |
| {% if data.hideTitle != true %} | |
| <div class="row"> | |
| <div class="col-xl-10 mx-auto"> | |
| <div class="area-text"> | |
| <h3 class="area--title">{{ data.title }}</h3> | |
| </div> | |
| </div> | |
| </div> | |
| {% endif %} | |
| <div class="row"> | |
| {% for item in data.gridItems %} | |
| {% case item.sys.contentType.sys.id %} | |
| {% when 'imageGridItem' %} | |
| {% assign data = item.fields %} | |
| {% if data.imageColumnSize %} | |
| {% assign image_column = data.imageColumnSize | times: 0.1 | times: 12 | round %} | |
| {% assign text_column = 12 | minus: image_column %} | |
| {% else %} | |
| {% assign image_column = 12 %} | |
| {% assign text_column = 12 %} | |
| {% endif %} | |
| <div class="col-lg-{{ 12 | divided_by: column_num | floor }} mb-4"> | |
| <div class="grid-imageGridItem" style="background-color: {{ data.backgroundColor }}"> | |
| <div class="row"> | |
| <div class="col-lg-{{ image_column }} mb-4"> | |
| {% if data.url %} | |
| <a href="{% localeLink locale, data.url %}"> | |
| <img class="grid-imageGridItem--image" src="{{ data.image.fields.file.url }}" alt="{{ data.image.fields.title }}"> | |
| </a> | |
| {% else %} | |
| <img class="grid-imageGridItem--image" src="{{ data.image.fields.file.url }}" alt="{{ data.image.fields.title }}"> | |
| {% endif %} | |
| </div> | |
| <div class="col-lg-{{ text_column }}"> | |
| <div class="grid-imageGridItem--content {{ data.textSize }}"> | |
| {% if data.title %} | |
| {% if data.url %} | |
| <a href="{% localeLink locale, data.url %}"> | |
| <h3 class="mb-3" style="color: {{ data.headingColor }}">{{ data.title }}</h3> | |
| </a> | |
| {% else %} | |
| <h3 class="mb-3" style="color: {{ data.headingColor }}">{{ data.title }}</h3> | |
| {% endif %} | |
| {% endif %} | |
| {% if data.text %} | |
| {{ data.text | markdownify }} | |
| {% endif %} | |
| {% if data.links %} | |
| <div class="grid-imageGridItem--linkSection"> | |
| {% for link in data.links %} | |
| <a class="grid-imageGridItem--link" href="{% localeLink locale, link.fields.url %}">{{ link.fields.title }}</a> | |
| {% endfor %} | |
| </div> | |
| {% endif %} | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| {% when 'boxGridItem' %} | |
| {% assign data = item.fields %} | |
| {% assign base_size = 12 | divided_by: column_num | floor %} | |
| {% assign mobile_size = 12 | divided_by: 2 %} | |
| <div class="col-md-{{ mobile_size }} col-lg-{{ base_size }} my-4 mx-auto"> | |
| <div class="grid-boxGridItem" style="border-color: {{ data.backgroundColor }}"> | |
| <div> | |
| {% if data.subTitle %} | |
| <span class="grid-boxGridItem--subtitle"> | |
| {{ data.subTitle }} | |
| </span> | |
| {% endif %} | |
| <h4 class="grid-boxGridItem--title"> | |
| {{ data.title }} | |
| </h4> | |
| {% if data.video.fields.placeholderImage and data.video.fields.url %} | |
| <span class="grid-boxGridItem--video position-relative" data-video="{{ data.video.fields.url }}" data-toggle="modal" data-target="#videoModal"> | |
| <img class="img-fluid" src="{{ data.video.fields.placeholderImage.fields.file.url }}" alt="{{ data.video.fields.placeholderImage.fields.file.title }}"> | |
| <div class="video-button"> | |
| <div class="video-button--playButton"></div> | |
| </div> | |
| <div class="video-button--bg"></div> | |
| </span> | |
| {% endif %} | |
| {% if data.image.fields.file.url %} | |
| <a href="{{ data.buttonUrl | default: "#"}}"> | |
| <span class="grid-boxGridItem--image"> | |
| <img class="img-fluid" src="{{ data.image.fields.file.url }}" alt="{{ data.image.fields.file.title }}"> | |
| </span> | |
| </a> | |
| {% endif %} | |
| {% if data.suppressHorizontalRule == false %} | |
| <hr> | |
| {% endif %} | |
| {% if data.text %} | |
| <div class="grid-boxGridItem--copy"> | |
| {{ data.text | markdownify }} | |
| </div> | |
| {% endif %} | |
| </div> | |
| {% if data.buttonText %} | |
| <div> | |
| <a class="btn btn-blue" href="{% localeLink locale, data.buttonUrl %}">{{ data.buttonText }}</a> | |
| </div> | |
| {% endif %} | |
| </div> | |
| </div> | |
| {% when 'fullImageGridItem' %} | |
| {% assign data = item.fields %} | |
| {% assign sizing = column_num | divided_by: data.size %} | |
| <div class="col-lg-{{ 12 | divided_by: sizing }} mx-auto"> | |
| <div class="grid-fullImageGridItem"> | |
| <div class="grid-fullImageGridItem--image"> | |
| <img src="{{ data.image.fields.file.url }}" alt="{{ data.image.fields.file.title }}"> | |
| </div> | |
| <div class="grid-fullImageGridItem--bar"> | |
| {{ data.text | markdownify }} | |
| </div> | |
| </div> | |
| </div> | |
| {% when 'gridItem' %} | |
| {% assign data = item.fields %} | |
| {% assign sizing = column_num | divided_by: data.size %} | |
| <div class="col-lg-{{ 12 | divided_by: sizing | ceil }} mx-auto mb-3"> | |
| <div class="grid-gridItem p-3 {{ data.textSize }}" style="background-color: {{ data.backgroundColor }}"> | |
| {{ data.text | markdownify }} | |
| </div> | |
| </div> | |
| {% when 'socialMediaGridItem' %} | |
| {% assign data = item.fields %} | |
| <div class="col my-4 mx-auto"> | |
| <div class="grid-boxGridItem"> | |
| <h4 class="grid-boxGridItem--title"> | |
| {{ data.title }} | |
| </h4> | |
| {% if data.type == 'twitter' %} | |
| <a class="twitter-timeline" data-chrome="nofooter transparent noheader" data-height="450" data-theme="light" href="{{ data.link }}?ref_src=twsrc%5Etfw">Tweets</a> | |
| <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> | |
| {% endif %} | |
| </div> | |
| </div> | |
| {% when 'videoGridItem' %} | |
| {% assign data = item.fields.video.fields %} | |
| <div class="col mx-auto"> | |
| <div class="grid-videoGridItem" data-video="{{ data.url }}" data-toggle="modal" data-target="#videoModal"> | |
| <img class="img-fluid" src="{{ data.placeholderImage.fields.file.url }}" alt="{{ data.placeholderImage.fields.file.title }}"> | |
| </div> | |
| </div> | |
| {% when 'accordionArea' %} | |
| <div class="col"> | |
| <div class="accordion-area accordion-area--grid"> | |
| <div class="container"> | |
| <div class="row"> | |
| {% for accordion in item.fields.accordions %} | |
| {% assign acc = accordion.fields %} | |
| <div class="col-sm-12"> | |
| <div class="accordion-area--heading" data-toggle="collapse" href="#accordion-{{ forloop.index }}" role="button" aria-expanded="false"> | |
| <div>{{ acc.titleText | markdownify }}</div> | |
| <div class="icons"> | |
| <i class="fas fa-chevron-circle-up mr-3"></i> | |
| </div> | |
| </div> | |
| <div id="accordion-{{ forloop.index }}" class="collapse"> | |
| {{ acc.text | markdownify }} | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| {% else %} | |
| {% endcase %} | |
| {% endfor %} | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| {% when 'headerArea' %} | |
| <section class="general-header" style="background-color: {{ area.fields.backgroundColor }};"> | |
| <h1>{{ area.fields.title }}</h1> | |
| </section> | |
| {% when 'hero' %} | |
| {% include hero-banner, | |
| banner_url: banner.fields.image.fields.file.url, | |
| banner_position: banner.fields.backgroundPosition, | |
| disableScroll: banner.fields.disableScroll, | |
| text: banner.fields.text, | |
| disableScroll: banner.fields.disableScroll | |
| %} | |
| {% when 'imageOverlaySection' %} | |
| <section class="img-overlay-section"> | |
| <div class="container-fluid px-0"> | |
| {% link area.fields.url %} | |
| <div class="row no-gutters"> | |
| {% for imageBlock in area.fields.imageBlocks %} | |
| <div class="col-6 col-sm img-overlay-section--block"> | |
| <div class="img-overlay-section--overlay"></div> | |
| <div class="img-overlay-section--text"> | |
| {{ imageBlock.fields.overlayText | richText }} | |
| </div> | |
| <img class="w-100" src="{{ imageBlock.fields.image.fields.file.url }}" alt="{{ imageBlock.fields.image.fields.file.title }}"> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| {% endlink %} | |
| </div> | |
| </section> | |
| {% when 'linkArea' %} | |
| <section class="link-area"> | |
| <div class="container my-5"> | |
| <div class="row"> | |
| {% for link in area.fields.links %} | |
| <div class="col my-3 text-center"> | |
| <a href="{% localeLink locale, link.fields.url %}"><img class="img-fluid" src="{{ link.fields.image.fields.file.url }}" alt="{{ link.fields.title }}"></a> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| </div> | |
| </section> | |
| {% when 'marketoForm' %} | |
| <section class="marketo-section"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col"> | |
| {{ area.fields.marketoFormContent | markdownify }} | |
| </div> | |
| <div class="col"> | |
| <div class="marketo-section--container"> | |
| <form id="mktoForm_{{ area.fields.marketoFormId }}"></form> | |
| <p class="marketo-section--success d-none text-center"> | |
| {{ area.fields.postSubmissionMessage.fields.value }} | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script defer src="//app-sj27.marketo.com/js/forms2/js/forms2.min.js"></script> | |
| {% if area.fields.zoomInfoFormId %} | |
| <script>window._zi = { formId: '{{ area.fields.zoomInfoFormId }}'}</script> | |
| {% endif %} | |
| </section> | |
| {% when 'quoteArea' %} | |
| <section class="quote-area"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-sm-12"> | |
| <div class="quote-area--quote" style="background-color: {{ area.fields.backgroundColor }};"> | |
| {{ area.fields.text | markdownify }} | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| {% when 'tooltipSection' %} | |
| <section class="tooltip-section"> | |
| <div class="container"> | |
| <div class="row"> | |
| <h2 class="area--title"> | |
| {{ area.fields.title }} | |
| </h2> | |
| </div> | |
| <div class="row no-gutters"> | |
| {% for tooltip in area.fields.tooltips %} | |
| <div class="col-md"> | |
| <div class="tooltip-section--block mx-auto" data-toggle="tooltip" title="{{ tooltip.fields.text | plainText }}"> | |
| <img src="{{ tooltip.fields.icon.fields.file.url }}" alt="{{ tooltip.fields.icon.fields.title }}"> | |
| <h5> | |
| {{ tooltip.fields.header }} | |
| </h5> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| </div> | |
| </section> | |
| {% when 'sectionRowStandard' %} | |
| <section class="row-standard bg--{{ area.fields.backgroundColor | default: 'white' }} {{ area.fields.specialStyle }}"> | |
| <div class="container"> | |
| <div class="row"> | |
| {% for column in area.fields.columns %} | |
| {% assign item = column.fields %} | |
| <div class="col-md d-flex align-items-center"> | |
| <div class="m-3"> | |
| {% if item.image.fields.file.url %} | |
| <img class="img-fluid my-3" src="{{ item.image.fields.file.url }}" alt="{{ item.image.fields.file.title }}"> | |
| {% endif %} | |
| {% if item.title %} | |
| <h3>{{ item.title }}</h3> | |
| {% endif %} | |
| {% if item.content %} | |
| {{ item.content | richText }} | |
| {% endif %} | |
| {% if item.link.fields.title %} | |
| <a class="btn btn-blue" href="{% localeLink locale, item.link.fields.url %}"> | |
| {{ item.link.fields.title }} <i class="fas fa-chevron-circle-right"></i> | |
| </a> | |
| {% endif %} | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| </div> | |
| </section> | |
| {% when 'carouselLogo' %} | |
| <section class="logo-carousel"> | |
| {% if area.fields.title %} | |
| <div class="container"> | |
| <div class="row text-center"> | |
| <h3 class="text-secondary">{{ area.fields.title }}</h3> | |
| </div> | |
| </div> | |
| {% endif %} | |
| <div class="container my-5"> | |
| <div class="swiper-container logo-carousel--swiper"> | |
| <div class="swiper-wrapper"> | |
| {% for image in area.fields.images %} | |
| <div class="swiper-slide"> | |
| <div class="d-flex justify-content-center"> | |
| <img class="logo my-3" src="{{ image.fields.file.url }}" alt="{{ image.fields.file.title }}"> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| {% when 'sectionSwitchCards' %} | |
| <section class="switch-section"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-4"> | |
| <h3>{{ area.fields.title }}</h3> | |
| <ul class="switch-section--list"> | |
| {% for card in area.fields.cards %} | |
| <li> | |
| <button class="btn btn-link js-switchcard py-0 {% if forloop.index <= 1 %}active{% endif %}" data-id="{{ forloop.index }}"> | |
| {{ card.fields.title }} | |
| </button> | |
| </li> | |
| {% endfor %} | |
| </ul> | |
| </div> | |
| <div class="col-md-8"> | |
| {% for card in area.fields.cards %} | |
| <div class="switch-section--card {% if forloop.index <= 1 %}active{% endif %}" data-id="{{ forloop.index }}"> | |
| {{ card.fields.content | richText }} | |
| </div> | |
| {% endfor %} | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| {% else %} | |
| {{ area.sys.contentType.sys.id }} | |
| {% endcase %} | |
| {% endfor %} | |
| {%- comment -%} Call to actions {%- endcomment -%} | |
| {% for cta in c_page.callToActions %} | |
| {% include call-to-action, | |
| title: cta.fields.title, | |
| text: cta.fields.text, | |
| url: cta.fields.url, | |
| bgColor: cta.fields.backgroundColor, | |
| %} | |
| {% endfor %} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Example of the Data