0

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!

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>
7
  • Hi Jeremy! Thank you so much for your quick response! It still doesn't work... :/ Here's the updated code: Nov 18 '16 at 3:00
  • 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: Nov 18 '16 at 3:02
  • <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> Nov 18 '16 at 3:04
  • 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... Nov 18 '16 at 3:09
  • 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. Nov 18 '16 at 3:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.