Untitled
unknown
plain_text
a year ago
6.4 kB
1
Indexable
{% liquid
assign image = block.settings.image
assign mobile_image = block.settings.mobile_image
assign text_color = block.settings.text_color
assign button_fixed = block.settings.button_fixed
assign heading_size = block.settings.text_size | replace: 'small', 'h3' | replace: 'medium', 'h2' | replace: 'large', 'h1'
assign subtext_size = block.settings.text_size | replace: 'small', 'h6' | replace: 'medium', 'h6' | replace: 'large', 'h5'
assign content_position = ''
case block.settings.content_position
when 'top_left'
assign content_position = ' m:items-start m:justify-start'
if stack_on_mobile == true
assign content_position = ' m:justify-center sm:m:items-start sm:m:justify-start'
endif
when 'top_right'
assign content_position = ' m:justify-end m:items-start'
if stack_on_mobile == true
assign content_position = ' m:justify-center sm:m:items-start sm:m:justify-end'
endif
when 'top_center'
assign content_position = ' m:items-start m:justify-center'
if stack_on_mobile == true
assign content_position = ' m:justify-center sm:m:items-start sm:m:justify-center'
endif
when 'bottom_left'
assign content_position = ' m:items-end m:justify-start'
if stack_on_mobile == true
assign content_position = ' m:justify-center sm:m:items-end sm:m:justify-start'
endif
when 'bottom_right'
assign content_position = ' m:items-end m:justify-end'
if stack_on_mobile == true
assign content_position = ' m:justify-center sm:m:items-end sm:m:justify-end'
endif
when 'bottom_center'
assign content_position = ' m:justify-center m:items-end'
if stack_on_mobile == true
assign content_position = ' m:justify-center sm:m:items-end sm:m:justify-center'
endif
when 'center_left'
assign content_position = ' m:justify-start m:items-center'
if stack_on_mobile == true
assign content_position = ' m:justify-center sm:m:items-center sm:m:justify-start'
endif
when 'center_right'
assign content_position = ' m:items-center m:justify-end'
if stack_on_mobile == true
assign content_position = ' m:justify-center sm:m:items-center sm:m:justify-end'
endif
else
assign content_position = ' m:items-center m:justify-center'
endcase
assign use_content_above = block.settings.use_content_above
assign wrapper_class = 'm:w-full m:h-full'
assign mobile_wrapper_class = 'm:w-full m:h-full'
if mobile_image != blank
assign wrapper_class = wrapper_class | append: ' m:hidden md:m:block'
assign mobile_wrapper_class = mobile_wrapper_class | append: ' md:m:hidden'
endif
%}
<div class="m-image-card{% if stack_on_mobile == true or use_content_above == false %} m-image-card--content-stack{% endif %}{% if button_fixed == true %} m-image-card--button-fixed{% endif %} {{ grid_columns }} {{ image_card_class }}">
<div class="m-image-card__inner">
{% if image != blank %}
<{% if block.settings.link %}a href="{{ block.settings.link | default: "#" }}"{% else %}div{% endif %} class="m-image-card__img m:block m:h-full">
{% render 'responsive-image', image: image, wrapper_class: wrapper_class %}
{% if mobile_image != blank %}
{% render 'responsive-image', image: mobile_image, wrapper_class: mobile_wrapper_class %}
{% endif %}
</{% if block.settings.link %}a{% else %}div{% endif %}>
{% else %}
<div class="m-image-card__img m-placeholder-wrapper m-image-loaded m:w-full m:h-full">
{% capture current %}{% cycle 1, 2, 3, 4, 5 %}{% endcapture %}
{{ 'collection-' | append: current | placeholder_svg_tag: 'm-placeholder-svg m-placeholder-svg--no-border m:object-cover m:w-full m:h-full' }}
</div>
{% endif %}
<div
class="m-image-card__content {{ content_position }} {% if animated %} m-scroll-trigger animate--{{ animation_effect }}{% endif %}"
{% if animated %}
data-cascade
style="--animation-order: {{ index }};"
{% endif %}
>
<div class="m-richtext m-image-card__content-inner m:text-{{ text_color }} {% if stack_on_mobile == true %}m:text-center sm:m:text-{{ block.settings.content_alignment }}{% else %}m:text-{{ block.settings.content_alignment }}{% endif %}">
{% if block.settings.subtitle != blank or block.settings.title != blank %}
<div class="m-image-card__heading-group">
{% if block.settings.subtitle != blank %}
<p class="m-richtext__subtitle m-image-card__subheading {{ subtext_size }} m:text-{{ text_color }}">{{ block.settings.subtitle }}</p>
{% endif %}
{% if block.settings.title != blank %}
<h3 class="m-richtext__title m-image-card__heading {{ heading_size }} m:text-{{ text_color }}">{{ block.settings.title }}</h3>
{% endif %}
</div>
{% endif %}
{% if block.settings.button_label != blank %}
<a href="{{ block.settings.link }}" class="m-richtext__button m-button {{ block.settings.button_style | replace: 'sf__btn-primary', 'm-button--primary' | replace: 'sf__btn-secondary', 'm-button--secondary' | replace: 'sf__btn-link', 'm-button--link' | replace: 'sf__btn-white', 'm-button--white' }} {{ block.settings.button_size }}">
{{ block.settings.button_label }}
</a>
{% if button_fixed == true %}
<a href="{{ block.settings.link }}" class="m-richtext__button m-button m-button--fixed {{ block.settings.button_size }} m:text-{{ text_color }}">
{{ block.settings.button_label }}
<svg class="m-svg-icon" viewBox="0 0 15 15" fill="none">
<path d="M6.8125 0.349609C7 0.182943 7.17708 0.182943 7.34375 0.349609L13.875 6.91211C14.0625 7.07878 14.0625 7.24544 13.875 7.41211L7.34375 13.9746C7.17708 14.1413 7 14.1413 6.8125 13.9746L6.1875 13.3496C6.125 13.2871 6.09375 13.2038 6.09375 13.0996C6.09375 12.9954 6.125 12.9017 6.1875 12.8184L11.0312 7.97461H0.375C0.125 7.97461 0 7.84961 0 7.59961V6.72461C0 6.47461 0.125 6.34961 0.375 6.34961H11.0312L6.1875 1.50586C6.02083 1.31836 6.02083 1.14128 6.1875 0.974609L6.8125 0.349609Z" fill="currentColor"/>
</svg>
</a>
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
Leave a Comment