Hey everyone,
I’m using the Symmetry theme and I was trying to achieve a landing page Section with 2 Fullscreen Images next to each other without spacing. One Image is actually just going to be a plain color to put text on, but to keep it responsive I thought this would be best solution.
The Custom Content Section basically allows the general settings for this, but the images will a) not be full width and b) have spacing between them.
Does anyone know a way to get this done? The Code for the Custom Section is as follows:
{% for block in section.blocks %}
{% if block.type == 'image' %}
{%- assign show_overlay_text = false -%}
{%- if block.settings.title != blank or block.settings.subheading != blank or block.settings.text != blank or block.settings.button_label != blank -%}
{%- assign show_overlay_text = true -%}
{%- endif -%}
{%- unless block.settings.image_link == blank or block.settings.text contains '' -%}{%- endunless -%}
{%- if block.settings.image == blank -%}
{{- 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' -}}
{%- else -%}
{%- if block.settings.height == 'adapt' -%}
{%- endif -%}
{%- endif -%}
{%- if show_overlay_text -%}
{%- if block.settings.subheading != blank -%}
{{ block.settings.subheading | escape }}
{%- endif -%}
{%- if block.settings.title != blank -%}
## {{ block.settings.title | newline_to_br }}
{%- endif -%}
{%- if block.settings.text != blank -%}
{{ block.settings.text }}
{%- endif -%}
{%- if block.settings.button_label != blank -%}
{%- if block.settings.text contains '' -%}
{{ block.settings.button_label }}
{%- else -%}
{{ block.settings.button_label }}
{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- unless block.settings.image_link == blank or block.settings.text contains '' -%}{%- endunless -%}
{% elsif block.type == 'text' %}
{%- if block.settings.subheading != blank -%}
{{ block.settings.subheading | escape }}
{%- endif -%}
{%- if block.settings.title != blank -%}
# {{ block.settings.title | escape }}
{%- endif -%}
{{ block.settings.text }}
{%- if block.settings.button_label != blank -%}
{{ block.settings.button_label | escape }}
{%- endif -%}
{% elsif block.type == 'video' %}
{% elsif block.type == 'html' %}
{{ block.settings.code }}
{% endif %}
{% endfor %}
{% schema %}
{
"name": "Custom content",
"max_blocks": 5,
"settings": [
{
"type": "select",
"id": "alignment",
"label": "Vertical alignment",
"default": "top",
"options": [
{
"value": "top",
"label": "Top"
},
{
"value": "middle",
"label": "Middle"
},
{
"value": "bottom",
"label": "Bottom"
}
]
}
],
"blocks": [
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "select",
"id": "width",
"label": "Width",
"default": "half",
"options": [
{
"value": "quarter",
"label": "25%"
},
{
"value": "third",
"label": "33%"
},
{
"value": "half",
"label": "50%"
},
{
"value": "two-thirds",
"label": "66%"
},
{
"value": "three-quarters",
"label": "75%"
},
{
"value": "full",
"label": "100%"
}
]
},
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "2048 x 1024px recommended"
},
{
"type": "select",
"id": "image_position",
"label": "Image alignment",
"info": "Used to keep the subject of your image in view",
"default": "center center",
"options": [
{
"value": "top left",
"label": "Top left"
},
{
"value": "top center",
"label": "Top center"
},
{
"value": "top right",
"label": "Top right"
},
{
"value": "center left",
"label": "Middle left"
},
{
"value": "center center",
"label": "Middle center"
},
{
"value": "center right",
"label": "Middle right"
},
{
"value": "bottom left",
"label": "Bottom left"
},
{
"value": "bottom center",
"label": "Bottom center"
},
{
"value": "bottom right",
"label": "Bottom right"
}
]
},
{
"type": "radio",
"id": "height",
"label": "Image height",
"options": [
{
"value": "adapt",
"label": "Natural"
},
{
"value": "fixed",
"label": "Fixed height"
}
],
"default": "adapt"
},
{
"type": "range",
"id": "height_desktop",
"min": 200,
"max": 1000,
"step": 20,
"unit": "px",
"label": "Desktop fixed height",
"default": 600
},
{
"type": "range",
"id": "height_mobile",
"min": 100,
"max": 1000,
"step": 20,
"unit": "px",
"label": "Mobile fixed height",
"default": 500
},
{
"type": "text",
"id": "subheading",
"label": "Subheading",
"default": "Subheading"
},
{
"type": "textarea",
"id": "title",
"label": "Heading",
"default": "Tell your story"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "
Pair text with an image to tell a story
"
},
{
"type": "checkbox",
"id": "enlarge_text",
"label": "Enlarge text",
"default": false
},
{
"type": "text",
"id": "button_label",
"label": "Button"
},
{
"type": "url",
"id": "image_link",
"label": "Image link"
},
{
"type": "select",
"id": "text_alignment",
"label": "Text overlay position",
"options": [
{
"value": "top left",
"label": "Top left"
},
{
"value": "top center",
"label": "Top center"
},
{
"value": "top right",
"label": "Top right"
},
{
"value": "center left",
"label": "Middle left"
},
{
"value": "center center",
"label": "Middle center"
},
{
"value": "center right",
"label": "Middle right"
},
{
"value": "bottom left",
"label": "Bottom left"
},
{
"value": "bottom center",
"label": "Bottom center"
},
{
"value": "bottom right",
"label": "Bottom right"
}
],
"default": "center center"
},
{
"type": "header",
"content": "Layout"
},
{
"id": "mobile_overlay_under",
"type": "checkbox",
"label": "Show text below image on mobile",
"default": false
},
{
"id": "overlay_style",
"type": "select",
"label": "Overlay style",
"default": "shadow",
"options": [
{
"value": "full",
"label": "Tint"
},
{
"value": "box",
"label": "Box"
},
{
"value": "shadow",
"label": "Text shadow"
},
{
"value": "full image-overlay--bg-shadow",
"label": "Text shadow and tint"
},
{
"value": "no_background",
"label": "No background"
}
]
}
]
},
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "select",
"id": "width",
"label": "Width",
"default": "half",
"options": [
{
"value": "quarter",
"label": "25%"
},
{
"value": "third",
"label": "33%"
},
{
"value": "half",
"label": "50%"
},
{
"value": "two-thirds",
"label": "66%"
},
{
"value": "three-quarters",
"label": "75%"
},
{
"value": "full",
"label": "100%"
}
]
},
{
"type": "text",
"id": "subheading",
"label": "Subheading"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Rich text"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "
Use this text to share information about your store with your customers.
Describe products, share announcements, or welcome customers to your store.
"
},
{
"type": "text",
"id": "button_label",
"label": "Button"
},
{
"type": "url",
"id": "button_link",
"label": "Button link"
},
{
"type": "select",
"id": "button_style",
"label": "Button style",
"default": "primary",
"options": [
{
"label": "Button - primary",
"value": "primary"
},
{
"label": "Button - secondary",
"value": "secondary"
},
{
"label": "Link",
"value": "link"
}
]
},
{
"type": "select",
"id": "text_alignment",
"label": "Text alignment",
"default": "center",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
}
]
},
{
"type": "video",
"name": "Embedded video",
"settings": [
{
"type": "select",
"id": "width",
"label": "Width",
"default": "half",
"options": [
{
"value": "quarter",
"label": "25%"
},
{
"value": "third",
"label": "33%"
},
{
"value": "half",
"label": "50%"
},
{
"value": "two-thirds",
"label": "66%"
},
{
"value": "three-quarters",
"label": "75%"
},
{
"value": "full",
"label": "100%"
}
]
},
{
"id": "video_url",
"type": "video_url",
"label": "Video URL",
"accept": ["youtube", "vimeo"],
"info": "Supports Youtube and Vimeo",
"default": "https:\/\/www.youtube.com\/watch?v=_9VUPq3SxOc"
}
]
},
{
"type": "html",
"name": "Custom Liquid",
"settings": [
{
"type": "select",
"id": "width",
"label": "Width",
"default": "half",
"options": [
{
"value": "quarter",
"label": "25%"
},
{
"value": "third",
"label": "33%"
},
{
"value": "half",
"label": "50%"
},
{
"value": "two-thirds",
"label": "66%"
},
{
"value": "three-quarters",
"label": "75%"
},
{
"value": "full",
"label": "100%"
}
]
},
{
"type": "liquid",
"id": "code",
"label": "Custom Liquid"
}
]
}
],
"presets": [
{
"name": "Custom content",
"settings": {
"alignment": "middle"
},
"blocks": [
{
"type": "image",
"settings": {
"width": "half"
}
},
{
"type": "text",
"settings": {
"title": "Welcome",
"text": "
Use this text to share information about your store with your customers.
Describe products, share announcements, or welcome customers to your store.
",
"width": "half"
}
}
]
}
]
}
{% endschema %}
Any help would be apperiacted!