Hi, I’m frustrated that I don’t know how to do this! I have a rich text section that requires an image – if there’s no image, it just defaults to a placeholder. How do I make it so that if there’s no image, the text just expands to full width?
Code is below.
Thanks in advance for any help.
{{ '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 }}> </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 %}
