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 -%}
But when I try to insert these images into my slider, I see the text
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">
Below is my code and the added console.log returns
Show More
{% unless full_width %}
{% endunless %} {%- if section.blocks.size > 0 -%}
{%- for block in section.blocks -%}
{%- 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 -%}
m_img {{ m_img }}
{%- else -%} {%- capture placeholder -%}lifestyle-{% cycle '1', '2' %}{%- endcapture -%} {{ placeholder | placeholder_svg_tag: 'img-fit placeholder dark lazyload' }} {%- endif -%}
{%- if block.settings.heading != blank or block.settings.text != blank or block.settings.button_1_text != blank or block.settings.button_2_text != blank -%}{%- if block.settings.heading != blank -%}## {{ block.settings.heading | newline_to_br }}{%- endif -%} {%- if block.settings.text != blank -%}{{ block.settings.text }}
{%- endif -%} {%- if block.settings.button_1_text != blank or block.settings.button_2_text != blank -%}{%- if block.settings.button_1_text != blank -%} {{- block.settings.button_1_text | escape -}} {%- endif -%} {%- if block.settings.button_2_text != blank -%} {{- block.settings.button_2_text | escape -}} {%- endif -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%} {% unless full_width %}
{% endunless %}
{%- endif -%} {% schema %} { "name": "Slideshow", "class": "banner-candidate", "max_blocks": 5, "settings": [ { "type": "header", "content": "Layout" }, { "type": "select", "id": "size", "label": "Size", "info": "Height is restricted to 1080px maximum", "options": [ { "value": "full-fixed", "label": "Full width / fixed height" }, { "value": "full-viewport", "label": "Full width / full height" }, { "value": "page-fixed", "label": "Page width / fixed height" } ], "default": "full-fixed" }, { "type": "range", "id": "height_desktop", "min": 400, "max": 800, "step": 10, "unit": "px", "label": "Fixed height (desktop)", "default": 700 }, { "type": "range", "id": "height_mobile", "min": 300, "max": 600, "step": 10, "unit": "px", "label": "Fixed height (mobile)", "default": 400 }, { "type": "checkbox", "id": "enable_split", "label": "Enable split screen", "info": "Shows two slides on desktop", "default": false }, { "type": "header", "content": "Image tint" }, { "type": "color", "id": "tint_color", "label": "Color", "default": "#000000" }, { "type": "range", "id": "tint_opacity", "min": 0, "max": 80, "step": 5, "unit": "%", "label": "Opacity", "default": 20 }, { "type": "header", "content": "Text overlay" }, { "type": "select", "id": "text_box_style", "label": "Box style", "options": [ { "value": "none", "label": "None" }, { "value": "bg", "label": "Background" }, { "value": "border", "label": "Border" } ], "default": "none" }, { "type": "color", "id": "text_bg_color", "label": "Background / border color", "default": "#000000" }, { "type": "range", "id": "text_bg_opacity", "min": 0, "max": 100, "step": 5, "unit": "%", "label": "Background opacity", "default": 50 }, { "type": "color", "id": "text_color", "label": "Text color", "default": "#ffffff" }, { "type": "checkbox", "id": "text_below_mobile", "label": "Show text below image on mobile", "info": "Does not apply to \"full height\" mode", "default": false }, { "type": "header", "content": "Control" }, { "type": "select", "id": "slide_mode", "label": "Transition", "info": "Always slides with split screen enabled", "options": [ { "value": "slide", "label": "Slide" }, { "value": "fade", "label": "Fade" } ], "default": "slide" }, { "id": "autoplay", "type": "checkbox", "label": "Auto-rotate slides", "default": true }, { "type": "range", "id": "autoplay_speed", "min": 2, "max": 10, "step": 1, "unit": "s", "label": "Change slides every", "default": 5 }, { "type": "checkbox", "id": "show_mobile_arrows", "label": "Show arrows on small screens", "default": true } ], "blocks": [ { "type": "image", "name": "Slide", "settings": [ { "type": "image_picker", "id": "image_desktop", "label": "Image", "info": "For best results, use a landscape shaped image with a minimum width of 3200px." }, { "type": "image_picker", "id": "image_mobile", "label": "Mobile image (optional)", "info": "For best results, use a square or portrait shaped image. If no mobile image is provided, the desktop image will be used." }, { "type": "select", "id": "image_align_desktop", "label": "Desktop image alignment", "options": [ { "value": "top", "label": "Top" }, { "value": "left", "label": "Left" }, { "value": "center", "label": "Center" }, { "value": "right", "label": "Right" }, { "value": "bottom", "label": "Bottom" } ], "default": "center" }, { "type": "select", "id": "image_align_mobile", "label": "Mobile image alignment", "options": [ { "value": "top", "label": "Top" }, { "value": "left", "label": "Left" }, { "value": "center", "label": "Center" }, { "value": "right", "label": "Right" }, { "value": "bottom", "label": "Bottom" } ], "default": "center" }, { "type": "header", "content": "Text content" }, { "type": "select", "id": "text_position", "label": "Text position", "options": [ { "value": "left top", "label": "Top left" }, { "value": "center top", "label": "Top center" }, { "value": "right top", "label": "Top right" }, { "value": "left center", "label": "Middle left" }, { "value": "center center", "label": "Middle center" }, { "value": "right center", "label": "Middle right" }, { "value": "left bottom", "label": "Bottom left" }, { "value": "center bottom", "label": "Bottom center" }, { "value": "right bottom", "label": "Bottom right" } ], "default": "center center" }, { "type": "text", "id": "heading", "label": "Heading", "default": "Tell your story" }, { "type": "select", "id": "heading_size", "label": "Heading size", "options": [ { "value": "h2", "label": "Small" }, { "value": "h1", "label": "Medium" }, { "value": "h0", "label": "Large" } ], "default": "h1" }, { "type": "richtext", "id": "text", "label": "Text", "default": "
Pair text with an image to tell a story
" }, { "type": "checkbox", "id": "enlarge_text", "label": "Enlarge text", "default": false }, { "type": "text", "id": "button_1_text", "label": "Button 1 text", "default": "See more" }, { "type": "url", "id": "button_1_url", "label": "Button 1 link" }, { "type": "text", "id": "button_2_text", "label": "Button 2 text" }, { "type": "url", "id": "button_2_url", "label": "Button 2 link" } ] } ], "presets": [ { "name": "Slideshow", "blocks": [ { "type": "image" }, { "type": "image" } ] } ] } {% endschema %} ```