Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-03-13T07:53:02.000Z
Answers.LastActivityDate: 2018-03-13T07:53:02.000Z
Answers.UserDisplayName: Robin Schambach
Body: <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>
  
Tags: <craft3><image-transforms><image>
Title: Random transforms
ThreadText: # 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](https://craftcms.stackexchange.com/questions/8630/transform-different-image-if-specific-id-or-order), 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 %}
      <div class="content">
          <div class="grid-items js-isotope js-grid-items">
              {% for entry in craft.entries.section('news').limit(10).all()  %}
              {% set image = entry.bannerImage.one() %}
              <div class="grid-item js-isotope-item js-grid-item">
                  <div class="card">
                      <div class="item"><img alt=""  src="{{ image.getUrl( 'masonryLarge' )}}"/></div>
                      <div class="card-block">
                          <div class="card-posted"><a href="#">{{ entry.author }}</a> on {{ entry.postDate | date('M d, Y') }}</div>
                          <h4 class="card-title">{{ entry.title }}</h4>
                          <div class="card-text">Lorem ipsum dolor sit amet, consect etur adipiscing elit. Mauris vel auctorol est. Integer nunc ipsum...</div>
                          <a href="{{ entry.url }}" class="card-read-more">Continue</a>
                      </div>
                  </div>
              </div>
              {% endfor %}
          </div>
      </div>
  {% 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](https://twig.symfony.com/doc/2.x/functions/random.html) 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() %}
      <div class="grid-item js-isotope-item js-grid-item">
          <div class="card">
              <div class="item"><img alt=""  src="{{ image.getUrl( random(['masonryLarge', 'masonryMedium', 'masonrySmall']) )}}"/></div>
              <div class="card-block">
                  <div class="card-posted"><a href="#">{{ entry.author }}</a> on {{ entry.postDate | date('M d, Y') }}</div>
                  <h4 class="card-title">{{ entry.title }}</h4>
                  <div class="card-text">Lorem ipsum dolor sit amet, consect etur adipiscing elit. Mauris vel auctorol est. Integer nunc ipsum...</div>
                  <a href="{{ entry.url }}" class="card-read-more">Continue</a>
              </div>
          </div>
      </div>
  {% endfor %}
  
  ```
  
  Or you can use Twigs [Cycle](https://twig.symfony.com/doc/2.x/functions/cycle.html) function
  
  ```
  {% for entry in craft.entries.section('news').limit(10).all()  %}
      {% set transform = cycle(['masonryLarge', 'masonryMedium', 'masonrySmall'], loop.index0) %}
  {% endfor %}
  
  ```
  
  
  ---
  
  