looping over images in an image field

Question

I have an image field which lets the user input as many images as they want. (set allow number of values to unlimited in field settings) I'm creating a twig template where i want to loop over these images and apply specific style if it's the first image or set a different style if its any other image.

I know I can use {{ file_url(node.field_home_hero.entity.fileuri) }} to get the url of the image in an image field. I'm trying to get this for every image in my field now though which is proving to be a challenge.

I'm curently iterating over the field in twig as so:

{% for image in content.field_field_name %}
  {% if loop.first %}
    <div class="class1">
      <img src="{ file_url(node.image.entity.fileuri) }" >
    <div>
  {% else %}
    <div class="class2">
      <img src="{ file_url(node.image.entity.fileuri) }"> 
  {% endif %}
{% endfor %} 

But doing the above does not load up the images for me. I know for sure I'm messing up with the access somewhere but not able to figure out what i'm doing wrong. If someone could point me to the right direction that would be great!

Answer 1

If you want to access the file uri in the node you have to iterate over the field in the node:

{% for image in node.field_image %}
  {% if loop.first %}
    <div class="class1">
      <img src="{{ file_url(image.entity.fileuri) }}" />
    </div>
  {% else %}
    <div class="class2">
      <img src="{{ file_url(image.entity.fileuri) }}" />
    </div>
  {% endif %}
{% endfor %}