Hi folks,
First post, and I couldn’t find exactly what I need, but apologise if it has been asked before.
I am design-qualified, but not code-proficient, so trying code is something I currently feel too clumsy about editing - fairly sure if I just winged it I’d set fire to the store. Unfortunately though it seems it needs to happen with our theme.
We are using the “Impulse” theme (see HERE), and have been using multiple snippets - the “Row Of Images” (up to 4 images which auto-resize depending on number) - for our Brands page (see HERE).
Unfortunately, the snippet only allows for up to four images which - I’m sure you can imagine - is awkward as ■■■■ when we need to add or remove brands, making a lot of work for us in such circumstances.
I was wanting to see if it is possible to modify it to allow for any number of images (or, if I had to put a number on it, up to 100) at the current size when 4 are in place, so that we can simply insert more and when that happens, or when one is deleted, they automatically realign? Other than that I was wanting to keep the look and layout the same (max 4 rows, and I think they’re 400 x 400px if memory serves?
Alternatively, though I feel this would be MORE work, if it were possible to amend so that they are still independent rows, but can “overflow” or realign across multiple rows when added to / subtracted from? This one feels like it would be much harder though, so preference would be for the first idea.
See the code below.
{%- assign gutter_width = 0 -%}
{%- assign aspect_total = 0 -%}
{% if block.settings.enable_gutter %}
{%- assign gutter_width = 1 -%}
{% endif %}
{%- assign gutter_total = gutter_width -%}
{% capture image_count %}{% if block.settings.image_1 %}+{% endif %}{% if block.settings.image_2 %}+{% endif %}{% if block.settings.image_3 %}+{% endif %}{% if block.settings.image_4 %}+{% endif %}{% endcapture %}
{%- assign image_index = 0 -%}
{%- assign enable_zoom = block.settings.enable_zoom -%}
{% comment %}
If any image links are set, disable zoom
{% endcomment %}
{% if block.settings.image_1_link != blank or block.settings.image_2_link != blank or block.settings.image_3_link != blank or block.settings.image_4_link != blank %}
{%- assign enable_zoom = false -%}
{% endif %}
{% if block.settings.image_1 == blank and block.settings.image_2 == blank and block.settings.image_3 == blank and block.settings.image_4 == blank %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% if block.settings.image_1 %}
{%- assign image_index = image_index | plus: 1 -%}
{% if block.settings.image_1_link != blank %}
{% endif %}
{%- assign img_url = block.settings.image_1 | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- assign aspect_total = aspect_total | plus: block.settings.image_1.aspect_ratio -%}
{%- assign gutter_total = gutter_total | plus: gutter_width -%}
{% if block.settings.image_1_link != blank %}
{% endif %}
{% endif %}
{% if block.settings.image_2 %}
{%- assign image_index = image_index | plus: 1 -%}
{% if block.settings.image_2_link != blank %}
{% endif %}
{%- assign img_url = block.settings.image_2 | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- assign aspect_total = aspect_total | plus: block.settings.image_2.aspect_ratio -%}
{%- assign gutter_total = gutter_total | plus: gutter_width -%}
{% if block.settings.image_2_link != blank %}
{% endif %}
{% endif %}
{% if block.settings.image_3 %}
{%- assign image_index = image_index | plus: 1 -%}
{% if block.settings.image_3_link != blank %}
{% endif %}
{%- assign img_url = block.settings.image_3 | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- assign aspect_total = aspect_total | plus: block.settings.image_3.aspect_ratio -%}
{%- assign gutter_total = gutter_total | plus: gutter_width -%}
{% if block.settings.image_3_link != blank %}
{% endif %}
{% endif %}
{% if block.settings.image_4 %}
{%- assign image_index = image_index | plus: 1 -%}
{% if block.settings.image_4_link != blank %}
{% endif %}
{%- assign img_url = block.settings.image_4 | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- assign aspect_total = aspect_total | plus: block.settings.image_4.aspect_ratio -%}
{%- assign gutter_total = gutter_total | plus: gutter_width -%}
{% if block.settings.image_4_link != blank %}
{% endif %}
{% endif %}
{%- assign images_width = 100.0 | minus: gutter_total -%}
{% style %}
.image-row-{{ block.id }}--1 {
margin: 0 0 {{ gutter_width }}% {{ gutter_width }}%;
width: {{ block.settings.image_1.aspect_ratio | divided_by: aspect_total | times: images_width }}% !important;
}
.image-row-{{ block.id }}--1:after {
padding-bottom: {{ 100 | divided_by: block.settings.image_1.aspect_ratio }}%;
}
.image-row-{{ block.id }}--2 {
margin: 0 0 {{ gutter_width }}% {{ gutter_width }}%;
width: {{ block.settings.image_2.aspect_ratio | divided_by: aspect_total | times: images_width }}% !important;
}
.image-row-{{ block.id }}--2:after {
padding-bottom: {{ 100 | divided_by: block.settings.image_2.aspect_ratio }}%;
}
.image-row-{{ block.id }}--3 {
margin: 0 0 {{ gutter_width }}% {{ gutter_width }}%;
width: {{ block.settings.image_3.aspect_ratio | divided_by: aspect_total | times: images_width }}% !important;
}
.image-row-{{ block.id }}--3:after {
padding-bottom: {{ 100 | divided_by: block.settings.image_3.aspect_ratio }}%;
}
.image-row-{{ block.id }}--4 {
margin: 0 0 {{ gutter_width }}% {{ gutter_width }}%;
width: {{ block.settings.image_4.aspect_ratio | divided_by: aspect_total | times: images_width }}% !important;
}
.image-row-{{ block.id }}--4:after {
padding-bottom: {{ 100 | divided_by: block.settings.image_4.aspect_ratio }}%;
}
{% endstyle %}