Using random function on field group

[simonp]

Hello

I am really newbie

Aim

Looking at returning a random image/video on each page load

Have created a field group which has repeater on it, so i can create a max of 3 values

Using a for loop to go through x 3 group items

I was looking at using the |random function to return a random value for an array

But the function is not working the as i imagined

eg

{% for item in module.videos|random %}
<div class="videoBlock">
      <video id="varVID" src="{{ item.video_src }}" poster="{{ item.video_poster }}" autoplay loop muted></video>
</div>
{% endfor %}

[Jsum · Accepted solution]

Hi @simonp ,

I have created something like this before.

I am going to show you how to make a simple random image generator module. You will be able to expand this to suite your needs.

First, create an image field. At the bottom of your field settings, set the repeater options. You are going to need to open a preview of the module, and set an assortment of images to the repeater to test.

The snippet for the repeater image field will look something like this:

{% for item in module.image_field %}
	{% if item.src %}
		<img src="{{ item.src }}" alt="{{ item.alt }}" width="{{ item.width }}" height="{{ item.height }}">
	{% endif %}
{% endfor %}

You just need to strip this down a bit, and use the HubL random filter, like so:

{{ module.image_field|random }}

This is a pain to test in the module previewer, because you have to refresh the page, and refreshing the page resets the fields options. you can cause the previewer to update by adding and deleting spaces in the editor.

this filter is used to grab a random item from a group of items, it has wierd effects when used on a for loop. Use the shuffle filter instead.

Also, be aware that random means exactly that - random. Especially depending on the amount of images applied, you could end up getting the same image several times in a row. 

Let me know if that helps.

Need help? Hire Us Here

[HMeredith7]

No worries, we all start somewhere! It sounds like you're working on a project to display random images or   on each page load using a repeater field group in Windows 11 and Edge 2022. It's great that you're trying to implement this functionality. Regarding your issue with the |random function not working as expected, let's try to troubleshoot it. The |random function should indeed return a random value from an array. Make sure that you're applying the function correctly within your loop. Here's a basic example of how you might use it...
{% for item in repeaterField %}
{% set randomIndex = random(0, item.values.length - 1) %}
{{ item.values[randomIndex] }}
{% endfor %}
In this example, repeaterField is the name of your repeater field, item.values represents the array of values you have in each repeater item, and random Index calculates a random index within the range of available values. If you're still facing issues, double-check that you're using the correct syntax for the |random function. If you could share the specific code snippet you're working with, I'd be happy to help you.

[Jsum · Accepted solution]

Hi @simonp ,

I have created something like this before.

I am going to show you how to make a simple random image generator module. You will be able to expand this to suite your needs.

First, create an image field. At the bottom of your field settings, set the repeater options. You are going to need to open a preview of the module, and set an assortment of images to the repeater to test.

The snippet for the repeater image field will look something like this:

{% for item in module.image_field %}
	{% if item.src %}
		<img src="{{ item.src }}" alt="{{ item.alt }}" width="{{ item.width }}" height="{{ item.height }}">
	{% endif %}
{% endfor %}

You just need to strip this down a bit, and use the HubL random filter, like so:

{{ module.image_field|random }}

This is a pain to test in the module previewer, because you have to refresh the page, and refreshing the page resets the fields options. you can cause the previewer to update by adding and deleting spaces in the editor.

this filter is used to grab a random item from a group of items, it has wierd effects when used on a for loop. Use the shuffle filter instead.

Also, be aware that random means exactly that - random. Especially depending on the amount of images applied, you could end up getting the same image several times in a row. 

Let me know if that helps.

Need help? Hire Us Here

[Jsum]

@simonp ,

The random filter works. It is designed to to grab a random item from a collection of items. it isn't meant to be used in a for loop (I will edit my previous answer):

{{ module.image_field.src|random }}

Use Shuffle instead.

{% for item in module.image_field|shuffle %}
  {% if loop.index == 1 %}	
    {{ item.src }}
  {% endif %}
{% endfor %}

Need help? Hire Us Here

[simonp]

Thank you JSUM
Works a treat

Brill!

Quick question the conditional if , is that necessary - or - is it  simply checking we have a single value being returned.

Also I was finding random was working at returning a random value, but as explained I could not get the fieldname references  eg item.name_of_field to work or array reference to work eg item[Index].

[Jsum · Accepted solution]

You're welcome @simonp .

The condition is what causes just one item to be returned. Without it you will get every item, just in a random order. 

If I was able to help, please mark my solution. All the best.

Need help? Hire Us Here

[simonp]

will try - thank you

[simonp]

I tried to hard code the value with an array and random works fine

{% set seq_contentVideos = ["https://cdn2.hubspot.net/hubfs/5136573/2019-05/boeing-737-engine-start.mp4",
"https://www.w3schools.com/tags/movie.mp4"] %}

<h1> Video </h1>

{% for content in seq_contentVideos|random %}
<div class="videoBlock">
<video id="varVID" src="{{ content }}" poster="" autoplay loop muted></video>
</div>
{% endfor %}

-------

I am assuming you can randomise an array but not a field object

[simonp]

Running a pprint to see what values returned

Random is working, but unsure of returning the field names that make up the group - these do not seem to be working

Using the code snippet we use the following for loop

{% for item in module.videos %}
     {{ item.video_src }}
      {{ item.video_poster }}
      {{ item.number_field }}
{% endfor %}

But when I add the random function these no long work

If I add the random function and pprint

eg

{% for item in module.videos|random %}

{item | pprint = {{ item|pprint }}<br>

Pprint loops through item variable and returns the 3 values  but I am not sure  how i reference the values?

thanks