Shopify themes, liquid, logos, and UX
Hey guys,
I keep trying to get 4 images on 1 line in the full width of the screen but I can't seem to get it work on the: images-with-text-overlay.liquid, (see code below). Anyone any idea how to fix this?
Regards,
Nakata
{%- if section.settings.title != blank -%}
<div class="section-header grid-item push-left-one-tenth lap--push-left-none">
<h2 class="section-header__title h4">{{ section.settings.title | escape }}</h2>
</div>
{%- endif -%}
<div class="image-with-text-overlay-holder image-with-text-overlay-holder--{{ section.settings.layout }} grid">
{%- for block in section.blocks -%}
{%- liquid
if section.settings.layout == 'regular'
assign css_class = ''
if section.blocks.size == 1 or forloop.index == 1 and section.blocks.size == 3
assign css_class = 'text-large ten-tenths lap--full-width push-left-one-tenth lap--push-left-none'
elsif section.blocks.size == 3
assign css_class = 'text-medium four-plus-tenths lap--five-plus-tenths push-top-one-tenth push-left-one-tenth'
if forloop.index == 2
assign css_class = css_class | append: ' lap--push-left-none'
endif
elsif section.blocks.size == 4 or section.blocks.size == 2
assign css_class = 'text-medium four-plus-tenths lap--five-plus-tenths push-top-one-tenth push-left-one-tenth'
if forloop.index == 1 or forloop.index == 3
assign css_class = css_class | append: ' lap--push-left-none'
endif
endif
if section.blocks.size == 4 and forloop.index > 2
assign css_class = css_class | append: ' push-top-one-tenth'
endif
else
if forloop.index == 1
if section.blocks.size == 1
assign css_class = 'text-large eight-tenths lap--ten-tenths push-left-one-tenth lap--push-left-none'
elsif section.blocks.size == 2
assign css_class = 'text-large five-tenths lap--seven-tenths push-left-one-tenth lap--push-left-none'
elsif section.blocks.size > 2
assign css_class = 'text-large six-tenths lap--seven-tenths push-left-one-tenth lap--push-left-none'
endif
elsif forloop.index == 2 or forloop.index == 4
if section.blocks.size == 2
assign css_class = 'text-medium four-tenths'
else
assign css_class = 'text-small three-tenths push-top-two-tenths'
endif
if forloop.index == 4
assign css_class = css_class | append: ' lap--five-tenths'
else
assign css_class = css_class | append: ' lap--four-tenths lap--push-top-three-tenths'
endif
assign css_class = css_class | append: ' push-left-one-tenth'
elsif forloop.index == 3
assign css_class = 'text-medium four-tenths lap--five-tenths palm--full-width'
if section.blocks.size == 4
assign css_class = css_class | append: ' push-left-two-tenths lap--push-left-none push-top-two-tenths lap--push-top-none'
else
assign css_class = css_class | append: ' push-left-three-tenths lap--push-left-two-tenths push-top-one-tenth'
endif
endif
endif
-%}
<div class="image-with-text-overlay {{ css_class }}" {{ block.shopify_attributes }}
{% unless section.settings.layout == 'regular' %}
{% if forloop.index == 2 %}
{% if section.blocks.size == 2 %}
data-scroll-speed=".3"
{% else %}
data-scroll-speed="-.3"
{% endif %}
{% elsif forloop.index == 3 and section.blocks.size == 4 %}
data-scroll-speed=".3"
{% endif %}
data-scroll-disable-on-lap
{% endunless %}
>
{%- if block.settings.button_label == blank and block.settings.button_link != blank -%}
<a href="{{ block.settings.button_link }}" class="image-with-text-overlay__wrap">
{%- else -%}
<div class="image-with-text-overlay__wrap">
{%- endif -%}
<div class="image-with-text-overlay__background">
{%- unless block.settings.image == blank -%}
{%- render 'lazy-image', image: block.settings.image, alt: block.settings.heading, type: 'background', alignment: block.settings.alignment -%}
{%- else -%}
<span class="onboarding-svg">
{{ 'image' | placeholder_svg_tag }}
</span>
{%- endunless -%}
</div>
<div class="image-with-text-overlay__content {{ section.settings.text_alignment }}">
<div>
{%- if block.settings.heading != blank -%}
<span class="image-with-text-overlay__heading"><span>{{ block.settings.heading | escape }}</span></span>
{%- endif -%}
{%- if block.settings.description != blank -%}
<div class="image-with-text-overlay__description rte">{{ block.settings.description }}</div>
{%- endif -%}
{%- if block.settings.button_label != blank -%}
<a class="image-with-text-overlay__button button button--underline" href="{{ block.settings.button_link }}" title="{{ block.settings.button_label | escape }}">
{{ block.settings.button_label | escape }}
<span class="svg svg__arrow" aria-hidden="true">{% render 'theme-symbols', icon: 'arrow-right' %}</span>
</a>
{%- endif -%}
</div>
</div>
{%- if block.settings.button_label == blank and block.settings.button_link != blank -%}
</a>
{%- else -%}
</div>
{%- endif -%}
</div>
{%- endfor -%}
@ can you please share your website link? we may need css for it
Hi there,
Thanks for reaching out so quickly,
Hereby the link:
https://www.hippashop.com/
Working on the grid in a draft version. Using the Grid in Asymmetrical mode on the live website and 'regular grid' in the updated version, which only allows for 2 images per row.
@ - can you please share preview link of regular grid version?
In case you couldn't get in: https://dv1s9d8wdna5hb95-55800922309.shopifypreview.com
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024