My code is making it so every slide is showing the same image.

[connermaca]

Hi guys, 

I have been writing some code for the dawn 15.2 theme so that I can add multiple images for a single slide and whenever the page is loaded it selects a random image from the uploaded ones to show on the slide. 

The thing is now every slide is going through the images for the last slide only. 
Here us my code for selecting the images: 

{%- for block in section.blocks -%}
    <style>
      #Slide-{{ section.id }}-{{ forloop.index }} .banner__media::after {
        opacity: {{ block.settings.image_overlay_opacity | divided_by: 100.0 }};
      }
    </style>
    <div
      class="slideshow__slide grid__item grid--1-col slider__slide"
      id="Slide-{{ section.id }}-{{ forloop.index }}"
      {{ block.shopify_attributes }}
      role="group"
      aria-roledescription="{{ 'sections.slideshow.slide' | t }}"
      aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
      tabindex="-1"
    >
      <div class="slideshow__media banner__media media{% if block.settings.image == blank %} placeholder{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}">
      {%- for block in section.blocks -%}
        {%- assign rand_images = '' %} <!-- Initialize an empty string to hold image URLs -->
        
        {%- if block.settings.image_1 != blank -%}
          {%- assign rand_images = block.settings.image_1 | image_url | append: ',' -%} <!-- Append image 1 -->
          
        {%- endif -%}
        
        {%- if block.settings.image_2 != blank -%}
          {%- assign url_name = block.settings.image_2 | image_url | append: ',' %}
          {%- assign rand_images = rand_images | append: url_name -%} <!-- Append image 2 -->
        {%- endif -%}
      
        {%- if block.settings.image_3 != blank -%}
          {%- assign url_name = block.settings.image_3 | image_url | append: ',' %}
          {%- assign rand_images = rand_images | append: url_name -%} <!-- Append image 2 --> <!-- Append image 3 -->
        {%- endif -%}
      
        {%- if block.settings.image_4 != blank -%}
           {%- assign url_name = block.settings.image_4 | image_url | append: ',' %}
          {%- assign rand_images = rand_images | append: url_name -%} <!-- Append image 2 --> <!-- Append image 4 -->
        {%- endif -%}
      {%- endfor -%}
      
      {%- assign images_array = rand_images | split: ',' %} <!-- Convert the string into an array -->
      
      {%- assign random_index = 'now' | date: "%s" | modulo: images_array.size %} <!-- Generate a random index -->
      {%- assign random_image = images_array[random_index] %} <!-- Select the random image -->
      
      {%- if random_image != blank -%} <!-- Check if a random image was selected -->
        <div class="slideshow__media banner__media media{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}">
          <img src="{{ random_image }}" alt="Random Slideshow Image" height="auto" sizes="100vw" srcset="{{ random_image | image_url: width: 450 }} 450w, {{ random_image | image_url: width: 660 }} 660w, {{ random_image | image_url: width: 900 }} 900w, {{ random_image | image_url: width: 1320 }} 1320w, {{ random_image | image_url: width: 1800 }} 1800w, {{ random_image | image_url: width: 2136 }} 2136w, {{ random_image | image_url: width: 2400 }} 2400w, {{ random_image | image_url: width: 3600 }} 3600w" fetchpriority="high" loading="lazy">
        </div>
      {%- else -%} <!-- Fallback image if no image was found -->
        <div class="slideshow__media banner__media media">
        
        </div>
      {%- endif -%}

I figured that because I am setting the string of image URLS back to blank for each block it would work but no. 

Any help here would be fantastic thanks.

[Ahmad31 · Accepted solution]

The issue in your code stems from nesting two {% for block in section.blocks %} loops within each other. This results in the inner loop reusing the same section.blocks scope for each block, which overwrites your logic and causes the random image selection to always use the last slide's images. Here's how to fix it:

The Fix

1. Avoid the nested {% for block in section.blocks %} loop.
2. Build the rand_images array only once per block, not multiple times.
   Here's the corrected code:
   
   {%- for block in section.blocks -%}
   <style>
   #Slide-{{ section.id }}-{{ forloop.index }} .banner__media::after {
   opacity: {{ block.settings.image_overlay_opacity | divided_by: 100.0 }};
   }
   </style>
   <div
   class="slideshow__slide grid__item grid--1-col slider__slide"
   id="Slide-{{ section.id }}-{{ forloop.index }}"
   {{ block.shopify_attributes }}
   role="group"
   aria-roledescription="{{ 'sections.slideshow.slide' | t }}"
   aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
   tabindex="-1"
   >
   <div class="slideshow__media banner__media media{% if block.settings.image == blank %} placeholder{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}">
   
   {%- assign rand_images = '' -%} <!-- Initialize an empty string to hold image URLs -->
   
   {%- if block.settings.image_1 != blank -%}
   {%- assign rand_images = block.settings.image_1 | image_url | append: ',' -%}
   {%- endif -%}
   
   {%- if block.settings.image_2 != blank -%}
   {%- assign rand_images = rand_images | append: block.settings.image_2 | image_url | append: ',' -%}
   {%- endif -%}
   
   {%- if block.settings.image_3 != blank -%}
   {%- assign rand_images = rand_images | append: block.settings.image_3 | image_url | append: ',' -%}
   {%- endif -%}
   
   {%- if block.settings.image_4 != blank -%}
   {%- assign rand_images = rand_images | append: block.settings.image_4 | image_url | append: ',' -%}
   {%- endif -%}
   
   {%- assign images_array = rand_images | split: ',' | compact -%} <!-- Convert string to array and remove empty items -->
   
   {%- if images_array.size > 0 -%} <!-- Ensure there are images -->
   {%- assign random_index = 'now' | date: "%s" | modulo: images_array.size -%} <!-- Generate a random index -->
   {%- assign random_image = images_array[random_index] -%} <!-- Select a random image -->
   
   <img src="{{ random_image }}" alt="Random Slideshow Image" height="auto" sizes="100vw"
   srcset="{{ random_image | image_url: width: 450 }} 450w,
   {{ random_image | image_url: width: 660 }} 660w,
   {{ random_image | image_url: width: 900 }} 900w,
   {{ random_image | image_url: width: 1320 }} 1320w,
   {{ random_image | image_url: width: 1800 }} 1800w,
   {{ random_image | image_url: width: 2136 }} 2136w,
   {{ random_image | image_url: width: 2400 }} 2400w,
   {{ random_image | image_url: width: 3600 }} 3600w"
   fetchpriority="high" loading="lazy">
   {%- endif -%}
   </div>
   </div>
   {%- endfor -%}
   
   
   
   

[connermaca]

Didn't even notice I had nested for loops there thanks very much that has resolved it. The only thing with the resolution code you had there is the lines appending the URLs: {%- assign rand_images = rand_images | append: block.settings.image_4 | image_url | append: ',' -%}

I tried this before and for some reason having the multiple appends resulted in a blank, but once I staged the appends it worked fine. 

[Ahmad31]

You're very welcome—happy to help! If you found my assistance valuable, feel free to treat me to a coffee sometime. 😊☕