How to pull a single image from each subpages

Kirby 3 Questions 🤔
1

Hi,
I am trying to pulling a single image from each subpages to homepage. I have six subpages I can pulling the title but not an image from each subpages. Can please tell me what I am doing wrong.

Thank you,

<?php foreach ($page->children()->listed() as $product): ?> 
   <div class="col-lg-4">
          <a href="<?= $product->url() ?>">
                  <figure>
                       <?= $product->cover() ?>
                  </figure>
               <?= $product->title() ?>
         </a>
  </div> 
<?php endforeach ?>
2

You have to convert the field value that is store in the cover field to an image object (and check if it exists):

<?php if ($image = $page->cover()->toFile()): ?>
<figure>
  <?= $image ?>
</figure>
<?php endif ?>

If you want more control over the image tag (add a class or all attribute):

<?php if ($image = $page->cover()->toFile()): ?>
<figure>
  <img src="<?= $image->url() ?>" alt="">
</figure>
<?php endif ?>

You should add an image description in the alt attribute if the image is not purely decorative.

3

Thank you texnixe. But I do have question, why can I use foreach with children?

4

Not sure I understand your question? Your children are a collection of pages, so you have to loop through this collection to get each individual item.

5

This is my code. It did not work, it only pulled one image from the parent. I am trying to pull a single image from each child folder.

      <?php foreach ($page->children()->listed() as $product): ?>
                          <div class="col-lg-4">
                                <?php if ($product = $page->cover()->toFile()): ?>
                                     <a href="<?= $product->url() ?>">
                                          <figure class="product-image">
                                               <img src="<?= $product->url() ?>" alt="">
                                              </figure>
                                              <h3 class="product-title"><?= $product->title() ?></h3>
                                         </a>
                                    <?php endif ?>
                          </div>                             
                     <?php endforeach ?>
6

Lets analyze what you are doing here:

<?php foreach ($page->children()->listed() as $product): ?>

In this first line, you assign each child page in the loop to the $product variable.

But then in your third line

<?php if ($product = $page->cover()->toFile()): ?>

You assign a file from $pageto the same $product variable. What you would have to do, is get the file from $product–the child page– and use another variable for the image.

<?php foreach ($page->children()->listed() as $product): ?>
    <div class="col-lg-4">
    <!-- we try to get a file from the `$product` child and assign it to the `$image` variable -->
    <?php if ($image = $product->cover()->toFile()): ?>
        <a href="<?= $product->url() ?>">
            <figure class="product-image">
                <img src="<?= $image->url() ?>" alt="">
             </figure>
             <h3 class="product-title"><?= $product->title() ?></h3>
         </a>
    <?php endif ?>
    </div>                             
<?php endforeach ?>
7

Texnixe, thank you for your time to help me understand what is going on. I understand a little better, that I have to assign a new variable to images in order to pull images from the child pages. Maybe I am missing something here but it’s repeating images.

image
image.jpg1863Ă—396 507 KB

8

Where does this image come from? And what is stored in your the cover fields of your subpages?

9

It’s should be coming from the subpages.

image
image.png206Ă—504 17.5 KB

image

10

The images should come for each folder; example dining table, bistro and adirondack chairs etc…

11

Well, the subpage dining-table doesn’t have an image, only the subpages of dining-table seem to have image.

So I wonder what is actually stored in the product.txt file of the dining-table page.

12

This from the product.txt file.

image

13

Well, but according to what you outlined above, it seems you are pulling in the children of the outdoor page? Because the headlines under the image say “Dining Table”, “Chaiselounge” etc. And apart from that, I can’t see a field called cover in that text file?

So maybe you can explain again in more detail what exactly you are trying to achieve and on what page.

14

I will back to the drawing board with the blueprint. Thank you again for your help and time. When you help me I learn something every time.

15

If you don’t get it to work, feel free to send me a zipped version of your project, sorting that out in the real code is probably faster.

2 Likes