Showing random logos in a custom module using image repeater field

[FurqanAli]

Hi there,

Hope you are doing well. I'm having issue in retaining indexes for random logos. Please check the code below:

{% set logo_images = module.logo_image %}
{% set total_logos = logo_images|length %}
{% set num_to_select = 3 %}
{% set selected_indices = [] %}

{% for i in range(num_to_select) %}
{% set random_index = range(total_logos)|random %}
{% if random_index not in selected_indices %}
{% set selected_indices = selected_indices + [random_index] %}
{{selected_indices}}
{% endif %}
{% endfor %}

{% for index in selected_indices %}
{% set logo = logo_images[index] %}
{% if logo.src %}
{% set sizeAttrs = 'width="{{ logo.width }}" height="{{ logo.height }}"' %}
{% if logo.size_type == 'auto' %}
{% set sizeAttrs = 'width="{{ logo.width }}" height="{{ logo.height }}" style="max-width: 100%; height: auto;"' %}
{% elif logo.size_type == 'auto_custom_max' %}
{% set sizeAttrs = 'width="{{ logo.max_width }}" height="{{ logo.max_height }}" style="max-width: 100%; height: auto;"' %}
{% endif %}
{% set loadingAttr = logo.loading != 'disabled' ? 'loading="{{ logo.loading }}"' : '' %}
<img src="{{ logo.src }}" alt="{{ logo.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
{% endif %}
{% endfor %}

I think the problem is I'm updating "selected_indices" inside loop but outside loop it is showing as empty. Can someone please help how I can update "selected_indices" globally?

[FurqanAli · Accepted solution]

Finally I was able to resolve the issue related to variable not retaining its value outside the loop by using append method. You can see the code below:

{% set logo_images = module.logo_image %}
{% set total_logos = logo_images|length %}
{% set num_to_select = 4 %}
{% set selected_indices = [] %}

{% if total_logos < num_to_select %}
{% set num_to_select = total_logos %}
{% endif %}

{% for i in range(num_to_select) %}
{% set random_index = range(total_logos)|random %}
{% if random_index not in selected_indices %}
{% do selected_indices.append(random_index) %}
{% else %}
{% set random_index = range(total_logos)|random %}
{% do selected_indices.append(random_index) %}
{% endif %}
{% endfor %}

{% for index in selected_indices %}
{% set logo = logo_images[index] %}
{% if logo.src %}
{% set sizeAttrs = 'width="{{ logo.width }}" height="{{ logo.height }}"' %}
{% if logo.size_type == 'auto' %}
{% set sizeAttrs = 'width="{{ logo.width }}" height="{{ logo.height }}" style="max-width: 100%; height: auto;"' %}
{% elif logo.size_type == 'auto_custom_max' %}
{% set sizeAttrs = 'width="{{ logo.max_width }}" height="{{ logo.max_height }}" style="max-width: 100%; height: auto;"' %}
{% endif %}
{% set loadingAttr = logo.loading != 'disabled' ? 'loading="{{ logo.loading }}"' : '' %}
<img src="{{ logo.src }}" alt="{{ logo.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
{% endif %}
{% endfor %}

I believe this thread will be useful to others. 

[himanshurauthan]

Hello @FurqanAli 

Based on the code you provided, it looks like you are correctly updating the selected_indices list inside the loop, but it's not being preserved outside of the loop because you're setting it to an empty list each time the template is rendered.

[FurqanAli]

Hi @himanshurauthan, Yes you are right that I have made an empty list in the start but that is to append the required random indexes and also to make it available outside the loop but I think what is updated inside loop is not available outside the loop. Any solution for that?

[himanshurauthan]

Hello @FurqanAli 

you could modify your code to do this:

{% set logo_images = module.logo_image %}
{% set total_logos = logo_images|length %}
{% set num_to_select = 3 %}
{% set selected_indices = module.selected_indices | default([]) %}

{% for i in range(num_to_select) %}
  {% set random_index = range(total_logos)|random %}
  {% if random_index not in selected_indices %}
    {% set selected_indices = selected_indices + [random_index] %}
  {% endif %}
{% endfor %}

{% for index in selected_indices %}
  {% set logo = logo_images[index] %}
  {% if logo.src %}
    {% set sizeAttrs = 'width="{{ logo.width }}" height="{{ logo.height }}"' %}
    {% if logo.size_type == 'auto' %}
      {% set sizeAttrs = 'width="{{ logo.width }}" height="{{ logo.height }}" style="max-width: 100%; height: auto;"' %}
    {% elif logo.size_type == 'auto_custom_max' %}
      {% set sizeAttrs = 'width="{{ logo.max_width }}" height="{{ logo.max_height }}" style="max-width: 100%; height: auto;"' %}
    {% endif %}
    {% set loadingAttr = logo.loading != 'disabled' ? 'loading="{{ logo.loading }}"' : '' %}
    <img src="{{ logo.src }}" alt="{{ logo.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
  {% endif %}
{% endfor %}

{% set module.selected_indices = selected_indices %}

[FurqanAli]

I have tried the code and also checked the required values but still its not populating as needed. I'm facing the same issue as its not retaining its value outside the loop. @himanshurauthan 

[FurqanAli]

thanks @himanshurauthan for sharing the code sample. Can you clarify do I need create an additional field for selected_indices in my module. Also, what should be the field type for this field as we don't have list type in design manager for custom module.

Thanks