Hola! ¡Tenemos nuestra Comunidad en Español!

Using random function on field group

SOLVE
Highlighted
New Contributor

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 %}

Reply
0 Upvotes
2 Accepted solutions

Accepted Solutions
Esteemed Advisor

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

- Jonathan Sumner
Reply
0 Upvotes
Esteemed Advisor

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

- Jonathan Sumner
Reply
0 Upvotes
7 Replies
New Contributor

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

Reply
0 Upvotes
New Contributor

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

Reply
0 Upvotes
Esteemed Advisor

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

- Jonathan Sumner
Reply
0 Upvotes
Esteemed Advisor

@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

- Jonathan Sumner
Reply
0 Upvotes
New Contributor

will try - thank you

Reply
0 Upvotes
New Contributor

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].

Reply
0 Upvotes
Esteemed Advisor

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

- Jonathan Sumner
Reply
0 Upvotes