ryanC

[solved] Showing only first image of Repeater array

Recommended Posts

ryanC    10

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:

repeater.png.096dd70c7fd8bc77d65b98316ccc31c8.png


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!

Share this post


Link to post
Share on other sites
ryanC    10

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.

Share this post


Link to post
Share on other sites
szabesz    1,378
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.

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By ryanC
      Hi, I have just set up a basic repeater. It has a title field, a body field, and an image field. I can get the title and body to show up, but I don't know what code to use for an image.  I have checked many threads about Repeater, but they are above my php ability level to make sense of.
      This is what I have so far: 
      foreach($page->myrepeat as $myrepeat) { echo "<p>{$myrepeat->title}</p>"; echo "<p>{$myrepeat->body}</p> "; } So far so good... but how to get the image field to echo too? I copied some working code I was using for a different image field, and tried to use it here, but nothing:
      <?php foreach($page->myrepeat as $image) { echo "<img src='$image->url'>"; }?> I have given the image field its own unique name (myphoto) but I don't know how to work that in. All I did was add it to the code above, I'm sure it's not the proper syntax:
      <?php foreach($page->$myrepeat->myphoto as $image) { echo "<img src='$image->url'>"; }?> Any ideas on how to get this repeater image to show up? Thanks!