Display images from metafields in slider

Display images from metafields in slider

kathi-do
Visitor
3 0 0

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
kathido_0-1720526373054.png

 

{%- 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&colon;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&colon;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 -%}
Replies 0 (0)