<p>You can use Twigs <a href="https://twig.symfony.com/doc/2.x/functions/random.html" rel="nofollow noreferrer">Random</a> function</p>

<pre><code>{{ random(['masonryLarge', 'masonryMedium', 'masonrySmall']) }} 
</code></pre>

<p>So you could do something like</p>

<pre><code>{% for entry in craft.entries.section('news').limit(10).all()  %}
    {% set image = entry.bannerImage.one() %}
    &lt;div class="grid-item js-isotope-item js-grid-item"&gt;
        &lt;div class="card"&gt;
            &lt;div class="item"&gt;&lt;img alt=""  src="{{ image.getUrl( random(['masonryLarge', 'masonryMedium', 'masonrySmall']) )}}"/&gt;&lt;/div&gt;
            &lt;div class="card-block"&gt;
                &lt;div class="card-posted"&gt;&lt;a href="#"&gt;{{ entry.author }}&lt;/a&gt; on {{ entry.postDate | date('M d, Y') }}&lt;/div&gt;
                &lt;h4 class="card-title"&gt;{{ entry.title }}&lt;/h4&gt;
                &lt;div class="card-text"&gt;Lorem ipsum dolor sit amet, consect etur adipiscing elit. Mauris vel auctorol est. Integer nunc ipsum...&lt;/div&gt;
                &lt;a href="{{ entry.url }}" class="card-read-more"&gt;Continue&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
{% endfor %}
</code></pre>

<p>Or you can use Twigs <a href="https://twig.symfony.com/doc/2.x/functions/cycle.html" rel="nofollow noreferrer">Cycle</a> function</p>

<pre><code>{% for entry in craft.entries.section('news').limit(10).all()  %}
    {% set transform = cycle(['masonryLarge', 'masonryMedium', 'masonrySmall'], loop.index0) %}
{% endfor %}
</code></pre>

CC BY-SA 3.0
2018-03-13T07:53:02.000Z
2018-03-13T07:53:02.000Z
Robin Schambach
<p>We are using a masonry grid, with 3 image sizes (different heights). The images are (one of) the banner image(s) from the news entries. We played around with <a href="https://craftcms.stackexchange.com/questions/8630/transform-different-image-if-specific-id-or-order">this</a>, however this doesn't work as we need to limit the image output - per entry - to only one. Running on the latest Craft 3 version. </p>

<p>How can we, randomly, have one out of three image transforms, applied to the banner image of each entry?</p>

<p>This is the code:</p>

<pre><code>{% block content %}
    &lt;div class="content"&gt;
        &lt;div class="grid-items js-isotope js-grid-items"&gt;
            {% for entry in craft.entries.section('news').limit(10).all()  %}
            {% set image = entry.bannerImage.one() %}
            &lt;div class="grid-item js-isotope-item js-grid-item"&gt;
                &lt;div class="card"&gt;
                    &lt;div class="item"&gt;&lt;img alt=""  src="{{ image.getUrl( 'masonryLarge' )}}"/&gt;&lt;/div&gt;
                    &lt;div class="card-block"&gt;
                        &lt;div class="card-posted"&gt;&lt;a href="#"&gt;{{ entry.author }}&lt;/a&gt; on {{ entry.postDate | date('M d, Y') }}&lt;/div&gt;
                        &lt;h4 class="card-title"&gt;{{ entry.title }}&lt;/h4&gt;
                        &lt;div class="card-text"&gt;Lorem ipsum dolor sit amet, consect etur adipiscing elit. Mauris vel auctorol est. Integer nunc ipsum...&lt;/div&gt;
                        &lt;a href="{{ entry.url }}" class="card-read-more"&gt;Continue&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            {% endfor %}
        &lt;/div&gt;
    &lt;/div&gt;
{% endblock %}
</code></pre>

<p>The transforms are: masonryLarge, masonryMedium &amp; masonrySmall</p>

<craft3><image-transforms><image>
Random transforms
# Random transforms

(Asked by: username_0 on 2018-03-13)

We are using a masonry grid, with 3 image sizes (different heights). The images are (one of) the banner image(s) from the news entries. We played around with this, however this doesn't work as we need to limit the image output - per entry - to only one. Running on the latest Craft 3 version. 
How can we, randomly, have one out of three image transforms, applied to the banner image of each entry?
This is the code:
{% block content %}
    
        
            {% for entry in craft.entries.section('news').limit(10).all()  %}
            {% set image = entry.bannerImage.one() %}
            
                
                    
                    
                        {{ entry.author }} on {{ entry.postDate | date('M d, Y') }}
                        {{ entry.title }}
                        Lorem ipsum dolor sit amet, consect etur adipiscing elit. Mauris vel auctorol est. Integer nunc ipsum...
                        Continue
                    
                
            
            {% endfor %}
        
    
{% endblock %}

The transforms are: masonryLarge, masonryMedium & masonrySmall

**Tags:** craft3, image-transforms, image


---

## 1 answers

### Answer by username_1 on 2018-03-13. Score: 3 | Accepted answer

You can use Twigs Random function
{{ random(['masonryLarge', 'masonryMedium', 'masonrySmall']) }} 

So you could do something like
{% for entry in craft.entries.section('news').limit(10).all()  %}
    {% set image = entry.bannerImage.one() %}
    
        
            
            
                {{ entry.author }} on {{ entry.postDate | date('M d, Y') }}
                {{ entry.title }}
                Lorem ipsum dolor sit amet, consect etur adipiscing elit. Mauris vel auctorol est. Integer nunc ipsum...
                Continue
            
        
    
{% endfor %}

Or you can use Twigs Cycle function
{% for entry in craft.entries.section('news').limit(10).all()  %}
    {% set transform = cycle(['masonryLarge', 'masonryMedium', 'masonrySmall'], loop.index0) %}
{% endfor %}


---

