Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hello everyone,
I hope you can help me 🙂
My target is to add a customized slider as a section to my theme. But the images should not be selected via the image picker, they will be loaded from metafields instead.
With the following code I can display the images from the meta fields in the frontend:
{%- if product.metafields.custom_slider.content.value != blank -%} <div> {% for image in product.metafields.custom_slider.content.value %} <p>IMAGE {{ image }}</p> <img class="lazyload" loading="lazy" width="100" height="100" src=" {{ image | image_url: width: '1640x' }}" data-widths="[475, 880, 1200, 1620]" data-aspectratio="{{ image.aspect_ratio }}" data-sizes="auto" > {% endfor %} </div> {%- endif -%}
m_img MediaListDrop
The browsers html shows the following:
<source data-srcset=" Liquid error (sections/slideshow-customized line 188): invalid url input 750w" media="(max-width: 480px)" width="428" height="400" srcset=" Liquid error (sections/slideshow-customized line 188): invalid url input 750w">
{%- assign content = product.metafields.custom_slider.content.value -%} {%- if content != blank and content != null and content != '' -%} <script> var content = {{ content | json }}; if (content && Array.isArray(content) && content.length > 0) { content.forEach(function(url, index) { // Logge die URL in die Konsole console.log('URL ' + (index + 1) + ':', url); }); } </script> {%- for block in section.blocks -%} <div class="slide block-{{ forloop.index }} content-align-{{ block.settings.text_position | split: ' ' | first }} content-valign-{{ block.settings.text_position | split: ' ' | last }}" data-index="{{ forloop.index }}" {{ block.shopify_attributes }} > <div class="slide__image has-overlay lazyload-placeholder"> {%- if content != blank -%} {%- liquid assign img = content assign img_crop = block.settings.image_align_mobile assign img_align = 'img-fit--' | append: block.settings.image_align_desktop assign m_img_align = 'img-fit--mob-' | append: block.settings.image_align_mobile if content != blank assign m_img = content else assign m_img = content endif -%} <picture> {%- if section.settings.size == 'full-viewport' -%} {%- comment -%} ---------- Mobile / full height ---------- {%- endcomment -%} {%- liquid assign sizes = '(max-aspect-ratio: 1/2) 50vh, 100vw' assign split_sizes = '(max-aspect-ratio: 1/2) 50vh, 50vw' -%} {%- if m_img.height < 1500 -%} {%- assign m_img_width = m_img.height | times: 0.5 | ceil -%} <source data-srcset="{{ m_img | image_url: width: m_img_width, height: m_img.height, crop: img_crop }}" media="(max-width: 480px)" width="{{ m_img_width }}" height="{{ m_img.height }}" > {%- else -%} <source data-srcset=" {{ m_img | image_url: width: 750, height: 1500, crop: img_crop }} 750w {%- if m_img.height >= 1712 %}, {{ m_img | image_url: width: 856, height: 1712, crop: img_crop }} 856w{% endif -%} " media="(max-width: 480px)" width="428" height="{{ 428 | divided_by: 0.5 | ceil }}" > {%- endif -%} {%- else -%} {%- comment -%} ---------- Mobile / fixed height ---------- {%- endcomment -%} {%- liquid assign slide_height_2x = section.settings.height_mobile | times: 2 assign m_img_ratio = 428.0 | divided_by: section.settings.height_mobile -%} {%- if m_img.width < 750 or m_img.height < slide_height_2x -%} {%- comment -%} Image smaller than container {%- endcomment -%} {%- liquid if m_img.width < 750 assign m_img_ratio = 375.0 | divided_by: section.settings.height_mobile assign m_img_width = m_img.width assign m_img_height = m_img.width | divided_by: m_img_ratio | ceil else assign m_img_width = m_img.height | times: m_img_ratio | ceil assign m_img_height = m_img.height endif -%} <source data-srcset="{{ m_img | image_url: width: m_img_width, height: m_img_height, crop: img_crop }}" media="(max-width: 480px)" width="{{ m_img_width }}" height="{{ m_img_height }}" > {%- else -%} {%- comment -%} Image larger than container {%- endcomment -%} <source data-srcset=" {{ m_img | image_url: width: 750, height: slide_height_2x, crop: img_crop }} 750w {%- if m_img.width >= 856 %}, {{ m_img | image_url: width: 856, height: slide_height_2x, crop: img_crop }} 856w{% endif -%} " media="(max-width: 480px)" width="428" height="{{ 428 | divided_by: m_img_ratio | ceil }}" > {%- endif -%} {%- comment -%} {%- if content != blank and m_img.width >= 1280 and m_img.height >= slide_height_2x %} <source data-srcset="{{ m_img | image_url: width: 1280 }} 1280w" media="(max-width: 640px)" width="640" height="{{ 640 | divided_by: m_img.aspect_ratio | ceil }}"> {%- endif -%} {%- endcomment -%} {%- endif -%} {%- if section.settings.enable_split -%} {%- comment -%} ---------- Desktop / half width ---------- {%- endcomment -%} <img data-srcset=" {%- if img.width < 600 %}{{ img | image_url }} {{ img.width }}w{% endif -%} {%- if img.width >= 600 %}{{ img | image_url: width: 600 }} 600w{% endif -%} {%- if img.width >= 960 %}, {{ img | image_url: width: 960 }} 960w{% endif -%} {%- if img.width >= 1200 %}, {{ img | image_url: width: 1200 }} 1200w{% endif -%} {%- if img.width >= 1440 %}, {{ img | image_url: width: 1440 }} 1440w{% endif -%} " data-src="{{ img | image_url: width: 960 }}" data-sizes="{{ split_sizes }}" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{ img.width }} {{ img.height }}'%3E%3C/svg%3E" class="img-fit {{ img_align }} {{ m_img_align }} lazyload-manual" width="{{ img.width }}" height="{{ img.height }}" alt="{{ img.alt | escape }}" > {%- else -%} {%- comment -%} ---------- Desktop / full width ---------- {%- endcomment -%} <img data-srcset=" {%- if img.width < 1200 %}{{ img | image_url }} {{ img.width }}w{% endif -%} {%- if img.width >= 1200 %}{{ img | image_url: width: 1200 }} 1200w{% endif -%} {%- if img.width >= 1440 %}, {{ img | image_url: width: 1440 }} 1440w{% endif -%} {%- if img.width >= 1680 %}, {{ img | image_url: width: 1680 }} 1680w{% endif -%} {%- if img.width >= 1920 %}, {{ img | image_url: width: 1920 }} 1920w{% endif -%} {%- if img.width >= 2560 %}, {{ img | image_url: width: 2560 }} 2560w{% endif -%} {%- if img.width >= 3200 %}, {{ img | image_url: width: 3200 }} 3200w{% endif -%} " data-src="{{ img | image_url: width: 1680 }}" data-sizes="{{ sizes }}" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{ img.width }} {{ img.height }}'%3E%3C/svg%3E" class="img-fit {{ img_align }} {{ m_img_align }} lazyload-manual" width="{{ img.width }}" height="{{ img.height }}" alt="{{ img.alt | escape }}" > {%- endif -%} </picture> <noscript> <img class="img-fit {{ m_img_align }} {{ img_align }}" src="{{ img | image_url: width: 1680 }}" width="{{ img.width }}" height="{{ img.height }}" alt="{{ img.alt | escape }}" > </noscript> <div>m_img {{ m_img }}</div> {%- else -%} {%- capture placeholder -%}lifestyle-{% cycle '1', '2' %}{%- endcapture -%} {{ placeholder | placeholder_svg_tag: 'img-fit placeholder dark lazyload' }} {%- endif -%} </div> {%- if block.settings.heading != blank or block.settings.text != blank or block.settings.button_1_text != blank or block.settings.button_2_text != blank -%} <div class="text-overlay{% unless section.settings.text_box_style == 'none' %} text-overlay--box text-overlay--{{ section.settings.text_box_style }}{% endunless %}{% unless bg_color != false and bg_color != settings.col_page_bg and section.settings.text_box_style == 'bg' %} text-overlay--stacked-no-pad{% endunless %} transition transition-out"> {%- if block.settings.heading != blank -%} <h2 class="text-overlay__heading slide__heading {{ block.settings.heading_size }}"> {{ block.settings.heading | newline_to_br }} </h2> {%- endif -%} {%- if block.settings.text != blank -%} <div class="text-overlay__text slide__text{% if block.settings.enlarge_text %} large-text{% endif %} rte"> {{ block.settings.text }} </div> {%- endif -%} {%- if block.settings.button_1_text != blank or block.settings.button_2_text != blank -%} <div class="slide__btns"> {%- if block.settings.button_1_text != blank -%} <a href="{{ block.settings.button_1_url }}" class="slide-btn button button--hollow"> {{- block.settings.button_1_text | escape -}} </a> {%- endif -%} {%- if block.settings.button_2_text != blank -%} <a href="{{ block.settings.button_2_url }}" class="slide-btn button button--hollow"> {{- block.settings.button_2_text | escape -}} </a> {%- endif -%} </div> {%- endif -%} </div> {%- endif -%} </div> {%- endfor -%}
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025