Hi all,
I am using the theme 'masonry' by clean canvas and they have a custom page called story.page which allows you to use the editor to re-arrange and quickly add images, text through the themes menu. I want to have a page that has in this order:
Text, Images, featured collection.
So i have been trying to add the 'featured collection' section to the page which i have been successful in getting it into the editor. I can select the collection i want to display and name it etc. but it doesnt actually show up on the page itself. It is just blank. Any ideas? here is the code I have probably butchered!
thanks in advance!
Russell
From the asset 'page-story-template'
<div data-section-type="nested-sections">
{% if section.settings.show_page_content %}
<div class="content-header">
<h1 class="page-title">{{ page.title }}</h1>
</div>
<div class="reading-container rte">{{ page.content }}</div>
{% endif %}
{% for block in section.blocks %}
{% if block.type == 'richtext' %}
<div class="super-spacey-row" {{ block.shopify_attributes }}>
<div class="reading-container align-{{ block.settings.alignment }}">
{% if block.settings.title != blank %}
<h1>{{ block.settings.title | escape }}</h1>
{% endif %}
<div class="rte">
{{ block.settings.text }}
</div>
</div>
</div>
{% elsif block.type == 'image-with-text' %}
{% capture image_html %}
<div class="text-beside-image__image lazyload--placeholder">
{% if block.settings.image_url != blank %}
<a href="{{ block.settings.image_url }}">
{% endif %}
{% if block.settings.image == blank %}
<div class="placeholder-image">{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}</div>
{% else %}
<div class="rimage-outer-wrapper lazyload fade-in rimage-bg-{% if block.settings.image_fill %}fill{% else %}fit{% endif %}"
data-bgset="{% render 'bgset', image: block.settings.image %}"
data-sizes="auto"
data-parent-fit="cover"
style="max-width: {{ block.settings.image.width }}px; max-height: {{ block.settings.image.height }}px">
<div class="rimage-wrapper" style="padding-top:{{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%">
<noscript>
<img src="{{ block.settings.image | img_url: '1024x1024' }}" alt="{{ block.settings.image.alt | escape }}" class="rimage__image">
</noscript>
</div>
</div>
{% endif %}
{% if block.settings.image_url != blank %}
</a>
{% endif %}
</div>
{% endcapture %}
<div class="text-beside-image spacey-row {% if block.settings.show_background_tint %}background-tint{% endif %} cf section-id-{{ block.id }}" {{ block.shopify_attributes }}>
{% if block.settings.layout == 'left' %}{{ image_html }}{% endif %}
<div class="text-beside-image__text">
<div class="text-beside-image__text__wrap {% if block.settings.show_background_tint %}padded-block{% else %}vertically-padded-block padded-block-desktop-{{ block.settings.layout }}{% endif %}">
{% if block.settings.title != blank %}
<h1 class="text-beside-image__title">{{ block.settings.title | escape }}</h1>
{% endif %}
<div class="rte">{{ block.settings.text }}</div>
{% if block.settings.button_text != blank %}
<div class="button-row">
{% if block.settings.button_url != blank %}
<a class="button auto-width" href="{{ block.settings.button_url }}">
{% else %}
<span class="button auto-width">
{% endif %}
{{ block.settings.button_text | escape }}
{% if block.settings.button_url == blank %}
</span>
{% else %}
</a>
{% endif %}
</div>
{% endif %}
</div>
</div>
{% if block.settings.layout == 'right' %}{{ image_html }}{% endif %}
</div>
{% elsif block.type == 'image-with-text-overlay' %}
<style>
.section-id-{{ block.id }} .overlay-text .text-1 {
font-size: {{ block.settings.slide_overlay_line1_size_int }}px;
}
.section-id-{{ block.id }} .overlay-text .text-2 {
font-size: {{ block.settings.slide_overlay_line1_size_int | times: 0.6 | round }}px;
}
.section-id-{{ block.id }} .slide::after {
background-color: {{ block.settings.tint_color }};
opacity: {{ block.settings.tint_opacity | divided_by: 100.00 }};
}
</style>
<div class="section-id-{{ block.id }} {% unless block.settings.fullwidth %}spacey-row{% endunless %}" data-nested-section-type="image-with-text-overlay" {{ block.shopify_attributes }}>
<div class="full-width-image slideshow scaled-text-base">
<div class="slide has-tint">
{% if block.settings.link_url != blank %}<a href="{{ block.settings.link_url }}">{% endif %}
{% if block.settings.image == blank %}
<div class="placeholder-image placeholder--banner {% if block.settings.heading != blank or block.settings.subheading != blank or block.settings.button_text != blank %}dark{% endif %}">
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{% else %}
<div class="rimage-outer-wrapper lazyload fade-in"
data-bgset="{% render 'bgset', image: block.settings.image %}"
data-sizes="auto"
data-parent-fit="cover">
<div class="rimage-wrapper" style="padding-top:{{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%">
<noscript>
<img src="{{ block.settings.image | img_url: '1024x1024' }}" alt="{{ block.settings.image.alt | escape }}" class="rimage__image">
</noscript>
</div>
</div>
{% endif %}
{% if block.settings.heading != blank or block.settings.subheading != blank or block.settings.button_text != blank %}
<div class="overlay-text {{ block.settings.overlay_position }} {{ block.settings.overlay_color }}">
<div class="inner">
{% if block.settings.heading != blank %}
<h1 class="text-1"><div class="scaled-text">{{ block.settings.heading | escape }}</div></h1>
{% endif %}
{% if block.settings.subheading != blank %}
<div class="text-2"><div class="scaled-text">{{ block.settings.subheading | escape }}</div></div>
{% endif %}
{% if block.settings.button_text != blank %}
<div class="text-3">
<span class="button">{{ block.settings.button_text | escape }}</span>
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if block.settings.link_url != blank %}</a>{% endif %}
</div>
</div>
</div>
{% elsif block.type == 'video' %}
<div {% unless block.settings.fullwidth %}class="spacey-row"{% endunless %} data-nested-section-type="video" {{ block.shopify_attributes }}>
{% if block.settings.title != blank %}
<div class="spacey-row">
<h2 class="h1 align-center">{{ block.settings.title }}</h2>
</div>
{% endif %}
{% if block.settings.video_url != blank %}
<div class="video-container" data-video-url="{{ block.settings.video_url }}" data-video-id="{{ block.settings.video_url.id }}" data-video-type="{{ block.settings.video_url.type }}" data-video-autoplay="{% if block.settings.cover_image == blank %}{{ block.settings.autoplay }}{% else %}false{% endif %}">
{% if block.settings.cover_image != blank %}
<div class="video-container__cover">
<div class="rimage-outer-wrapper lazyload fade-in"
data-bgset="{% render 'bgset', image: block.settings.cover_image %}"
data-sizes="auto"
data-parent-fit="cover">
<noscript>
<div class="rimage-wrapper" style="padding-top:{{ 1 | divided_by: block.settings.cover_image.aspect_ratio | times: 100 }}%">
<img src="{{ block.settings.cover_image | img_url: '1024x1024' }}" alt="{{ block.settings.cover_image.alt | escape }}" class="rimage__image">
</div>
</noscript>
</div>
<button class="button plain video-container__play" aria-label="{{ 'general.accessibility_labels.video_play' | t | escape }}">{% render 'svg-play' %}</button>
</div>
{% endif %}
</div>
{% endif %}
</div>
{% elsif block.type == 'featured-collection' %}
<div data-section-type="featured-collection">
{% assign collection = collections[section.settings.collection] %}
{% unless collection == blank %}
<div class="spacey-row align-center">
<h1><a href="{{ collection.url }}">{{ section.settings.title | escape }}</a></h1>
</div>
{%- if collection.products != blank and settings.adv_ratio -%}
{%- capture calculated_aspect_ratio -%}{% render 'minmax-image-ratio', products: collection.products, type: settings.prod_thumb_img_ratio == 'tallest' %}{%- endcapture -%}
{%- endif -%}
<div class="blocklayout" data-row-limit="{{ section.settings.row_count }}">
{% for product in collection.products %}
{%- comment %}<locksmith:5a61>{% endcomment -%}
{%- capture var %}{% render 'locksmith-variables', scope: 'subject', subject: product, subject_parent: collection, variable: 'transparent' %}{% endcapture %}{% if var == "true" %}{% else %}{% continue %}{% endif -%}
{%- comment %}</locksmith:5a61>{% endcomment -%}
{% render 'product-block', product: product, product_collection: collection, calculated_aspect_ratio: calculated_aspect_ratio %}
{% endfor %}
</div>
{% else %}
<div class="spacey-row align-center">
<h1>{{ section.settings.title }}</h1>
</div>
<div class="blocklayout" data-row-limit="{{ section.settings.row_count }}">
{% for i in (1..12) %}
{% render 'onboarding-product-block' %}
{% endfor %}
</div>
{% endunless %}
</div>
{% endif %}
{% endfor %}
</div>
{% schema %}
{
"name": "Story page",
"settings": [
{
"type": "checkbox",
"id": "show_page_content",
"label": "Show page content",
"default": true
}
],
"blocks": [
{
"type": "richtext",
"name": "Rich text",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Rich text"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"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": "alignment",
"label": "Alignment",
"default": "center",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
}
]
}
]
},
{
"type": "image-with-text",
"name": "Image with text",
"settings": [
{
"type": "select",
"id": "layout",
"label": "Layout",
"default": "right",
"options": [
{
"value": "right",
"label": "Text on left"
},
{
"value": "left",
"label": "Text on right"
}
]
},
{
"type": "checkbox",
"id": "show_background_tint",
"label": "Show background tint",
"default": true
},
{
"type": "header",
"content": "Image"
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "checkbox",
"id": "image_fill",
"label": "Fill container",
"default": true
},
{
"type": "url",
"id": "image_url",
"label": "Link"
},
{
"type": "header",
"content": "Text"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Image with text"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Use this text to share information about your store with your customers.</p><p>Describe product, share announcements, or welcome customers to your store.</p>"
},
{
"type": "text",
"id": "button_text",
"label": "Button text"
},
{
"type": "url",
"id": "button_url",
"label": "Button link"
}
]
},
{
"type": "image-with-text-overlay",
"name": "Image with text overlay",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "checkbox",
"id": "fullwidth",
"label": "Full width",
"default": true
},
{
"type": "header",
"content": "Overlay"
},
{
"type": "color",
"id": "tint_color",
"label": "Overlay",
"default": "#3d4246"
},
{
"type": "range",
"id": "tint_opacity",
"min": 0,
"max": 100,
"step": 1,
"unit": "%",
"label": "Opacity",
"default": 25
},
{
"type": "header",
"content": "Text"
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Image with text overlay"
},
{
"type": "text",
"id": "subheading",
"label": "Subheading",
"default": "Tell your story with images"
},
{
"type": "text",
"id": "button_text",
"label": "Button text",
"default": "See more"
},
{
"type": "select",
"id": "overlay_position",
"label": "Text position",
"options": [
{
"value": "posy-top posx-left",
"label": "Top Left"
},
{
"value": "posy-top posx-middle",
"label": "Top Middle"
},
{
"value": "posy-top posx-right",
"label": "Top Right"
},
{
"value": "posy-middle posx-left",
"label": "Middle Left"
},
{
"value": "posy-middle posx-middle",
"label": "Middle Middle"
},
{
"value": "posy-middle posx-right",
"label": "Middle Right"
},
{
"value": "posy-bottom posx-left",
"label": "Bottom Left"
},
{
"value": "posy-bottom posx-middle",
"label": "Bottom Middle"
},
{
"value": "posy-bottom posx-right",
"label": "Bottom Right"
}
],
"default": "posy-middle posx-middle"
},
{
"type": "select",
"id": "overlay_color",
"label": "Color",
"options": [
{
"value": "col-light",
"label": "Light"
},
{
"value": "col-dark",
"label": "Dark"
}
],
"default": "col-light"
},
{
"type": "range",
"id": "slide_overlay_line1_size_int",
"min": 40,
"max": 100,
"step": 10,
"unit": "px",
"label": "Font size",
"default": 50
},
{
"type": "url",
"id": "link_url",
"label": "Image link"
}
]
},
{
"type": "video",
"name": "Video",
"settings": [
{
"type": "checkbox",
"id": "fullwidth",
"label": "Full width",
"default": true
},
{
"type": "text",
"id": "title",
"label": "Heading"
},
{
"id": "video_url",
"type": "video_url",
"label": "Video link",
"accept": ["youtube", "vimeo"],
"info": "Supports Youtube and Vimeo",
"default": "https:\/\/www.youtube.com\/watch?v=_9VUPq3SxOc"
},
{
"id": "autoplay",
"type": "checkbox",
"label": "Autoplay",
"info": "Video will be muted",
"default": false
},
{
"id": "cover_image",
"type": "image_picker",
"label": "Cover image"
}
]
},
{
"name": "Featured collection",
"type": "index-section",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Featured collection"
},
{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "select",
"id": "row_count",
"label": "Rows",
"options": [
{
"label": "1",
"value": "1"
},
{
"label": "2",
"value": "2"
},
{
"label": "3",
"value": "3"
},
{
"label": "No row limit (max 50 products)",
"value": ""
}
],
"default": "1"
},
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show product vendors",
"default": true
}
]
}
]
}
{% endschema %}
