Help get image from banner on Child page

Kirby 3 Solved ✅
1

I want to get the image from the banner of a child page as a listing image on the parent page. Wht code would I need on the parent page?

Child page banner:


<?php 
  $bannerimages = $page->cover()->toFiles();
  $firstslide = $bannerimages->first();
  $noOfSlides = $bannerimages->count();
?>  
<!-- HERO CAROUSEL -->
<div id="hero" class="banner bg-dark carousel slide carousel-fade" data-bs-ride="carousel" data-sal="fade">
  <?php if($noOfSlides > 1): ?>
  <div class="carousel-indicators">
    <?php foreach($bannerimages as $bannerimage): ?>
    <button type="button" data-bs-target="#hero" data-bs-slide-to="<?= $bannerimages->indexOf($bannerimage); ?>" class="<?php if($bannerimage == $firstslide) echo 'active' ?>" aria-current="true" aria-label="Slide"></button>
    <?php endforeach ?> 
  </div>
  <?php endif; ?>

  <div class="carousel-inner">
  <?php foreach($bannerimages as $bannerimage): ?>
    <div class="carousel-item<?php if($bannerimage == $firstslide) echo ' active' ?>">
      <img src="<?= $bannerimage->crop(1600, 900, 90)->url() ?>" class="d-block w-100" alt="ALT TAG">
      <div class="curve"></div>
      <div class="carousel-caption d-none d-md-block">
        <h1><?= $bannerimage->caption()->kt() ?></h1>
      </div>
    </div>
  <?php endforeach ?> 
  </div>

  <?php if($noOfSlides > 1): ?>
  <button class="carousel-control-prev" type="button" data-bs-target="#hero" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#hero" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
  <?php endif; ?>
</div>

Parent Page Code (so far):

<?php $housetypes = $page->children()->listed(); ?>
<?php foreach($housetypes as $house): ?>
<a href="<?= $house->url() ?>" class="slide text-center">
  <div class="hover-frame relative">
    <img class="img-fluid" src="CODE NEEDED HERE" alt="Alt Tag">
    <div class="overlay">
      <div class="text">
        <p class="pre-header"><?= $house->title(); ?></p>
        <p class="blurb">The House Type A is a delightful home featuring an open-plan kitchen/dining area and a separate living room, together with an en-suite main bedroom, two further bedrooms and a family bathroom.</p>
      </div>
    </div>
  </div>
  <p class="pre-header">4 Bedroom Home</p>
  <h4>House Type A</h4>
</a>
<?php endforeach ?>
2 
Same as on the child, just using `$house` instead of `$page`, so

$bannerimages = $house->cover()->toFiles();

3

Sorry, I’m a PHP noob,this is what I have now and not working:

<?php $housetypes = $page->children()->listed(); ?>

<?php foreach($housetypes as $house): ?>

<?php 
  $bannerimages = $house->cover()->toFiles();
  $firstslide = $bannerimages->first();
?>
  
<a href="<?= $house->url() ?>" class="slide text-center">
  <div class="hover-frame relative">
    <img class="img-fluid" src="<?= $firstslide->crop(700, 500, 90)->url() ?>" alt="Alt Tag">
    <div class="overlay">
      <div class="text">
        <p class="pre-header"><?= $house->title(); ?></p>
        <p class="blurb">The House Type A is a delightful home featuring an open-plan kitchen/dining area and a separate living room, together with an en-suite main bedroom, two further bedrooms and a family bathroom.</p>
      </div>
    </div>
  </div>
  <p class="pre-header">4 Bedroom Home</p>
  <h4>House Type A</h4>
</a>
<?php endforeach ?>
4

Do those children have a cover field? $firstslide might not return a file (if $bannerimages is an empty collection), you always need if statements to prevent errors.

5

Ah I see - whats the best way to wrap this in an If statement to check for the Cover field?

This is what I think would work but it doesn’t:

<?php if $house->cover()->isNotEmpty(); ?>
<img class="img-fluid" src="<?= $firstslide->crop(700, 500, 90)->url() ?>" alt="<?= $house->title(); ?>">
<?php endif ?>
6

This seems to work. Is this the best way:

<?php if ($firstslide->isNotEmpty()): ?>
<img class="img-fluid" src="<?= $firstslide->crop(700, 500, 90)->url() ?>" alt="<?= $house->title(); ?>">
<?php endif ?>
7

No, none of those.

<?php if ($firstslide): ?>
<img class="img-fluid" src="<?= $firstslide->crop(700, 500, 90)->url() ?>" alt="<?= $house->title(); ?>">
<?php endif ?>
8

Thank you so much :slight_smile: