How to call the first image


I am trying to call the first image from my product page, but nothing display when I move the images around. I don’t know what I am doing wrong.

<?php foreach ($page->children()->listed() as $product): ?>
<div class="col-lg-3">
    <a href="<?= $product->url() ?>">
        <figure class="products">
            <?= $product->image()->isFirst()->crop(440,380)?>
                    <?= $product->title() ?><br><span class="product-model"><strong>Model: </strong><?= $product->type()->upper() ?></span>
<?php endforeach ?>
<?php if ($image = $product->images()->first()) : ?>
<?= $image->crop(440, 380) ?>
<?php endif ?>

Which image is fetched, then? No image? Another image? Please be more specific when describing the issue.

Sorry, I want to be able to pull the first image from each folder

  1. 20191208_lorem-copy-copy
  2. 20191217_acaia_adirondack-chair
  3. 20200119_acacia-rocking-adironda

Again, which image do you get with the above code? It looks like you are trying to get the image from the wrong folders.

If you are on the outdoor page, then these three pages

  • 20191208_lorem-copy-copy
  • 20191217_acaia_adirondack-chair
  • 20200119_acacia-rocking-adironda

are not the children but the grandchildren of the outdoor page.

That’s why it is important that you provide exact information, otherwise I can’t help you.

Yes, I am on the outdoor section. Can I call grandchild from my outdoor?

Yes, you can. By using grandChildren() instead of children() in your loop.

But maybe you want to loop through the children first and then through the grandchildren? How can I possibly know that if you don’t tell me?

I know it is not always easy, but it would be great if you would be more specific when explaining a problem. You don’t answer my questions. Maybe my English is not great and you don’t understand me. But currently, we are not getting anywhere.

// get the children of the outdoor page
$productTypes= $page->children()->listed();
<!-- loop through the children -->
<?php foreach ($productTypes as $producttype): ?>
    <!-- foreach child, fetch its subpages -->
    <?php $products = $producttype->children()->listed(); ?>
    <!-- loop through the subpages -->
    <?php  foreach ($products as $product):  ?>
         <!-- check if there is an image and output it -->
        <?php if ($image = $product->images()->first()) : ?>
          <?= $image->crop(440, 380) ?>
        <?php endif ?>
    <?php endforeach ?>
<?php endforeach ?>
1 Like

I think I have a similar problem:

I have some subpages with some images. The editor can sort the images in the panel like they want. On these subpages the images are shown in the correct order, but not on the overview page. I want that the first image of that sorting is shown on the overview page.

<?php if ($image = $product->images()->first()): ?>
     <?= $image->resize(300) ?>
<?php endif ?>

This gives me I think the first images that got uploaded. Is that enough code or do you need more?

Are the images stored in a field or are they sorted within a files section?

In any case, you are not sorting anything when calling the pages images.

If you can $product->images() you get all images from the page folder in the order they are stored in the file system.

Ehm. I would say files section? This is the blueprint:

    width: 1/2
        type: files
        layout: cards
          cover: true
          ratio: 1/1

Yes, that’s a files section. Then you have to sort your images:

<?php if ($image = $product->images()->sortBy('sort', 'asc')->first()): ?>
     <?= $image->resize(300) ?>
<?php endif ?>

It would probably makes sense to add a file blueprint to only allow image uploads. Currently, your users can upload any type of file (allowed by Kirby).

Thank you! :slightly_smiling_face: