[solved] Showing only first image of Repeater array

[ryanC]

Hi, this is a followup to my last thread. I have tried to figure this out on my own by searching the forum and researching how the image field works, but I am having no luck so far. 

My page is meant to function as a simple image gallery, with one unique image per instance of repeater. I am using the default images field, with a maximum of 0, making it an array. I think my issue is probably related to it being an array.

Right now I have two instances of the repeater on my Processwire page. Item 1 (cherry photo) and Item 2 (orange photo).

I have created div in so I can style my repeaters with CSS. This is the code I have in my template:

        <?php
            foreach($page->product_repeat as $product_repeat) {
                echo "<div class='repeatItem'>";    
                echo "<h2>{$product_repeat->title}</h2>";
                echo "<p>{$product_repeat->body}</p> ";

            /*images go below*/
 
                 foreach($page->product_repeat as $image) { 
                    foreach($image->images as $image) {
                    echo "<img src='$image->url'>"; 
                    }
                }

                 echo "</div>";
             }
        ?>      

 

Attached is a screenshot of the final result:

All good except the photos are being duplicated. Item 1 only has the cherry photo in its image field. Item 2 only has the orange photo in its image field. The confusing part for me is, the titles and text aren’t being duplicated here. Only the photos.  

I figured this has something to do with the images field itself being an array … and I know I am supposed to add something like this to my code:

    ->first() 

But wherever I put it, either it does nothing, or it makes the images disappear completely.

I tried to solve this entire thing by creating a new image field with a maximum set to 1…. but when I do that no image shows up at all. The only way I can get the images to show up is if it’s set to 0, which duplicates the images.

Any help on this would be greatly appreciated. How would you add the "first" part of the image code to my code? Thanks!

[ryanC]

I think I solved it. Right when I think I won't be able to, I found this:

echo "<img src='{$product_repeat->images->first->url}'>";

So my code is now:

    <?php
            foreach($page->product_repeat as $product_repeat) {
                echo "<div class='repeatItem'>";    
                echo "<h2>{$product_repeat->title}</h2>";
                echo "<p>{$product_repeat->body}</p> ";
                echo "<img src='{$product_repeat->images->first->url}'>";
                 
                  /*this shouldn't have to move*/
                echo "</div>";
             }
    ?>   

totally removed the "for each" stuff.

[szabesz]

On 9/6/2017 at 1:22 AM, ryanC said:

echo "<img src='{$product_repeat->images->first->url}'>";

Hi, Just do not forget: https://processwire.com/api/ref/wire-array/

Quote: "Nearly all collections of items in ProcessWire are derived from the WireArray type. This includes collections of pages, fields, templates, modules and more."

Meaning if your WireArray/PageArray is sorted the way you need, you can just use first() to get the page.

+ one more tip:

On 9/6/2017 at 1:22 AM, ryanC said:

foreach($page->product_repeat as $product_repeat) {

It is a bit ambiguous, isn't it?

foreach($page->product_repeat as $repeater_item) {

or similar (eg. $product) would be easier to follow.

[ryanC]

Thanks for the tips, szabesz! Didn't see this post when you first made it.