<p>Just a slight syntax issue it seems.</p>

<p>If you want just the first image - always test if there is an image, then get it like this:</p>

<pre><code>{% if entry.galleryPhotos.first()|length %}
    {% set image = entry.galleryPhotos.first() %}`
    &lt;img src={{ image.url }} etc&gt;
{% endif %
</code></pre>

<p>Or if you want to loop over a few images...note here you don't need the <code>|length</code> test as the for loop will not be entered if there is no image:</p>

<pre><code>{% for image in entry.galleryPhotos %}
    &lt;img src={{ image.url }} etc&gt;
</code></pre>

CC BY-SA 3.0
2016-11-18T03:00:19.820Z
Hi Jeremy! Thank you so much for your quick response! It still doesn't work... :/ Here's the updated code:
craftnewbie
CC BY-SA 3.0
2016-11-18T03:02:56.467Z
Hi Jeremy! Thank you so much for your quick response! Yes, there are images! You can test the site... But your suggestion still doesn't work... :/ Here's the updated code:
craftnewbie
CC BY-SA 3.0
2016-11-18T03:04:50.227Z
<ul class="menu">
{% for galleryEntries in craft.entries.section ('gallery') %}      
<li><a href="{{ galleryEntries.url }}" {% if craft.request.url == galleryEntries.url %}class="active"{% endif %}>{{ galleryEntries.title }}</a></li> {% endfor %} </ul></nav> 
<section class="photoslider"><div class="photos">
{% for image in entry.galleryPhotos.first()| length %}
{% set image = entry.galleryPhotos.first() %}        
<div class="item responsive single-item"><div class="image-wrap">          <img src="{{ image.getUrl() }}" alt="{{ image.title }}"></div></div>{% endfor %} </div></section>
craftnewbie
CC BY-SA 3.0
2016-11-18T03:09:56.170Z
Actually, after adding the "first()" it stopped working altogether... When, I take the edit out, back to              {% for image in entry.galleryPhotos %}
                            
                <div class="item responsive single-item">
                     <div class="image-wrap">          
                         <img src="{{ image.Url() }}" alt="{{ image.title }}">
                     </div>
                </div>    
             {% endfor %} It works...
craftnewbie
CC BY-SA 3.0
2016-11-18T03:16:56.300Z
I can't really read that!  But read what I posted more carefully - you don't put the single image code inside the for loop...jsut use it on it's own.  I.e. set a variable for the first image OR loop through the images.
Jeremy Daalder
CC BY-SA 3.0
2016-11-18T16:19:42.640Z
Sorry Jeremy! Basically, I wanted the first image to already show, but there are a few images in each link and they all need to load to allow the list option to show. Even taking the for loop out and using your first suggestion, the image still doesn't load (unless you click on the link).
craftnewbie
CC BY-SA 3.0
2016-11-19T08:05:22.180Z
The code I gave above is definitely the basic code for showing images from an entry.  If you need a bit more help getting it going, find me on Slack and DM me the whole template maybe.
Jeremy Daalder
CC BY-SA 3.0
2016-11-18T02:48:55.877Z
2016-11-18T02:55:01.247Z
2016-11-18T02:55:01.247Z
Jeremy Daalder
<p>I'm sure this is a simple question, but I'm a newbie in this, so I'd greatly appreciate all the help I can get! :)</p>

<p>The site is carstensphotos.lumenage.com for now. It's a one page site, so I used the index as the template for the Gallery Section ('gallery'), where the photographer will be able to upload his pics. I'm trying to get the first image of the first entry to show with no success. </p>

<p>Code:</p>

<pre><code>&lt;ul class="menu"&gt;
  {% for galleryEntries in craft.entries.section ('gallery') %}       
  &lt;li&gt;&lt;a href="{{ galleryEntries.url }}" {% if craft.request.url == galleryEntries.url %}class="active"{% endif %}&gt;{{ galleryEntries.title }}&lt;/a&gt;&lt;/li&gt;
  {% endfor %} 
&lt;/ul&gt;
&lt;/nav&gt;  
&lt;section class="photoslider"&gt;
   &lt;div class="photos"&gt;
   {% for image in entry.galleryPhotos.first() %}               
      &lt;div class="item responsive" id="1"&gt;
           &lt;div class="image-wrap"&gt;          
                &lt;img src="{{ image.getUrl() }}" alt="{{ image.title }}"&gt;
           &lt;/div&gt;
      &lt;/div&gt;    
    {% endfor %}                 
    &lt;/div&gt;
 &lt;/section&gt;
</code></pre>

<p>Thank you very much!   </p>

<templating><assets><sections>
I can't get the first image to show on the homepage
# I can't get the first image to show on the homepage

(Asked by: username_0 on 2016-11-18)

I'm sure this is a simple question, but I'm a newbie in this, so I'd greatly appreciate all the help I can get! :)
The site is carstensphotos.lumenage.com for now. It's a one page site, so I used the index as the template for the Gallery Section ('gallery'), where the photographer will be able to upload his pics. I'm trying to get the first image of the first entry to show with no success. 
Code:

  {% for galleryEntries in craft.entries.section ('gallery') %}       
  {{ galleryEntries.title }}
  {% endfor %} 

  

   
   {% for image in entry.galleryPhotos.first() %}               
      
                     
                
           
          
    {% endfor %}                 
    
 

Thank you very much!

**Tags:** templating, assets, sections


---

## 1 answers

### Answer by username_1 on 2016-11-18. Score: 2

Just a slight syntax issue it seems.
If you want just the first image - always test if there is an image, then get it like this:
{% if entry.galleryPhotos.first()|length %}
    {% set image = entry.galleryPhotos.first() %}`
    
{% endif %

Or if you want to loop over a few images...note here you don't need the |length test as the for loop will not be entered if there is no image:
{% for image in entry.galleryPhotos %}

> **Comments:**
> **username_0**: Hi Jeremy! Thank you so much for your quick response! It still doesn't work... :/ Here's the updated code:  
> **username_0**: Hi Jeremy! Thank you so much for your quick response! Yes, there are images! You can test the site... But your suggestion still doesn't work... :/ Here's the updated code:  
> **username_0**: <ul class="menu"> {% for galleryEntries in craft.entries.section ('gallery') %}       <li><a href="{{ galleryEntries.url }}" {% if craft.request.url == galleryEntries.url %}class="active"{% endif %}>{{ galleryEntries.title }}</a></li> {% endfor %} </ul></nav>  <section class="photoslider"><div class="photos"> {% for image in entry.galleryPhotos.first()| length %} {% set image = entry.galleryPhotos.first() %}         <div class="item responsive single-item"><div class="image-wrap">          <img src="{{ image.getUrl() }}" alt="{{ image.title }}"></div></div>{% endfor %} </div></section>  
> **username_0**: Actually, after adding the "first()" it stopped working altogether... When, I take the edit out, back to              {% for image in entry.galleryPhotos %}                                              <div class="item responsive single-item">                      <div class="image-wrap">                                    <img src="{{ image.Url() }}" alt="{{ image.title }}">                      </div>                 </div>                  {% endfor %} It works...  
> **username_1**: I can't really read that!  But read what I posted more carefully - you don't put the single image code inside the for loop...jsut use it on it's own.  I.e. set a variable for the first image OR loop through the images.  
> **username_0**: Sorry Jeremy! Basically, I wanted the first image to already show, but there are a few images in each link and they all need to load to allow the list option to show. Even taking the for loop out and using your first suggestion, the image still doesn't load (unless you click on the link).  
> **username_1**: The code I gave above is definitely the basic code for showing images from an entry.  If you need a bit more help getting it going, find me on Slack and DM me the whole template maybe.  

---

