Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-11-18T03:00:19.820Z
Answers.Text: Hi Jeremy! Thank you so much for your quick response! It still doesn't work... :/ Here's the updated code:
Answers.UserDisplayName: craftnewbie
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-11-18T03:02:56.467Z
Answers.Text: 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:
Answers.UserDisplayName: craftnewbie
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-11-18T03:04:50.227Z
Answers.Text: <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>
Answers.UserDisplayName: craftnewbie
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-11-18T03:09:56.170Z
Answers.Text: 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...
Answers.UserDisplayName: craftnewbie
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-11-18T03:16:56.300Z
Answers.Text: 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.
Answers.UserDisplayName: Jeremy Daalder
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-11-18T16:19:42.640Z
Answers.Text: 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).
Answers.UserDisplayName: craftnewbie
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-11-19T08:05:22.180Z
Answers.Text: 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.
Answers.UserDisplayName: Jeremy Daalder
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-11-18T02:48:55.877Z
Answers.LastActivityDate: 2016-11-18T02:55:01.247Z
Answers.LastEditDate: 2016-11-18T02:55:01.247Z
Answers.UserDisplayName: Jeremy Daalder
Body: <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>
  
Tags: <templating><assets><sections>
Title: I can't get the first image to show on the homepage
ThreadText: # 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:
  
  ```
  <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() %}               
        <div class="item responsive" id="1">
             <div class="image-wrap">          
                  <img src="{{ image.getUrl() }}" alt="{{ image.title }}">
             </div>
        </div>    
      {% endfor %}                 
      </div>
   </section>
  
  ```
  
  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() %}`
      <img src={{ image.url }} etc>
  {% 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 %}
      <img src={{ image.url }} etc>
  
  ```
  
  > **Comments:**
  > **username_0**: Hi username_1! Thank you so much for your quick response! It still doesn't work... :/ Here's the updated code:  
  > **username_0**: Hi username_1! 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 username_1! 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.  
  
  ---
  
  