Answers.Body: <p>If I understand the question properly, this should do it for you:</p>
  
  <pre><code>{% if entry.gallery|length %}
  &lt;div class="main-carousel"&gt;
      {% for image in entry.gallery.all() %}
      &lt;div class="carousel-cell"&gt;
          &lt;img src="{{ image.url }}" alt="{{ image.title }}" /&gt;
      &lt;/div&gt;
      {% endfor %}
  &lt;/div&gt;
  {% endif %}
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-05-06T10:14:43.950Z
Answers.LastActivityDate: 2020-05-06T10:14:43.950Z
Answers.UserDisplayName: Oli
Body: <p>I'm trying to use <a href="https://flickity.metafizzy.co/" rel="nofollow noreferrer">flickity</a> to create a draggable gallery on a single entry template, but I'm having issues with the output.</p>
  
  <p>In the backend it looks like this. A field using multiple assets.
  <a href="https://i.sstatic.net/AmQbd.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/AmQbd.jpg" alt="enter image description here"></a></p>
  
  <p>Without flickity I'd put them out like this which lists each image from the field.</p>
  
  <pre><code>{% if entry.gallery|length %}
      {% for image in entry.gallery.all() %}
        &lt;img src="{{ image.url }}" alt="{{ image.title }}" /&gt;
      {% endfor %}
    {% endif %}
  </code></pre>
  
  <p>For flickity to work it needs to look like this </p>
  
  <pre><code>&lt;div class="main-carousel"&gt;
    &lt;div class="carousel-cell"&gt;&lt;img src=""&gt;&lt;/div&gt;
    &lt;div class="carousel-cell"&gt;&lt;img src=""&gt;&lt;/div&gt;
    &lt;div class="carousel-cell"&gt;&lt;img src=""&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have trouble combining these two things successfully. The goal is to dynamically output each image from the assets into a carousel-cell div. Does anyone have pointers how to do so? Thank you!</p>
  
Tags: <assets><field><forloop><assets-field>
Title: Outputting image assets with flickity
ThreadText: # Outputting image assets with flickity
  
  (Asked by: username_0 on 2020-05-06)
  
  I'm trying to use [flickity](https://flickity.metafizzy.co/) to create a draggable gallery on a single entry template, but I'm having issues with the output.
  
  In the backend it looks like this. A field using multiple assets.
  [![enter image description here](https://i.sstatic.net/AmQbd.jpg)](https://i.sstatic.net/AmQbd.jpg)
  
  Without flickity I'd put them out like this which lists each image from the field.
  
  ```
  {% if entry.gallery|length %}
      {% for image in entry.gallery.all() %}
        <img src="{{ image.url }}" alt="{{ image.title }}" />
      {% endfor %}
    {% endif %}
  
  ```
  
  For flickity to work it needs to look like this
  
  ```
  <div class="main-carousel">
    <div class="carousel-cell"><img src=""></div>
    <div class="carousel-cell"><img src=""></div>
    <div class="carousel-cell"><img src=""></div>
  </div>
  
  ```
  
  I have trouble combining these two things successfully. The goal is to dynamically output each image from the assets into a carousel-cell div. Does anyone have pointers how to do so? Thank you!
  
  **Tags:** assets, field, forloop, assets-field
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2020-05-06. Score: 1
  
  If I understand the question properly, this should do it for you:
  
  ```
  {% if entry.gallery|length %}
  <div class="main-carousel">
      {% for image in entry.gallery.all() %}
      <div class="carousel-cell">
          <img src="{{ image.url }}" alt="{{ image.title }}" />
      </div>
      {% endfor %}
  </div>
  {% endif %}
  
  ```
  
  
  ---
  
  