# Getting cover images from children if they exist

**URL:** <https://forum.getkirby.com/t/getting-cover-images-from-children-if-they-exist/18359>\
**Category:** Questions\
**Tags:** v3\
**Created:** [May 27, 2020, 7:41pm UTC](https://forum.getkirby.com/t/getting-cover-images-from-children-if-they-exist/18359 "2020-05-27T19:41:20Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![johannesverwoerd](https://avatars.discourse-cdn.com/v4/letter/j/bbe5ce/32.png) [@johannesverwoerd](https://forum.getkirby.com/u/johannesverwoerd)\
**Post date:** [May 27, 2020, 7:41pm UTC](https://forum.getkirby.com/t/getting-cover-images-from-children-if-they-exist/18359/1 "2020-05-27T19:41:20Z")

</div>

I try to get  
the cover image or if it doesnt exist  
the first image or if it doesnt exist  
the first subpage its cover image or if it doesnt exist  
thefirst subpage its first image or if it doesnt exist  
(nothing)

I try tis but it doesnt work. I get an error when there is no coverimage on the first subpage

```auto
  <?php if($image = $page->cover()->toFile()): ?>
		

		<!-- Load MAIN IMAGE -->
        <img class="placeholderimg" src="<?= $image->thumb('xs')->url() ?>">
		<img data-src="<?= $image->url() ?>" class="lazyload" srcset="<?= $image->srcset([300, 500, 1000, 1500, 1800, 2000]) ?>">   
		<?php else: ?>  
        
            <?php if($image = $page->image()): ?>
           <img class="placeholderimg" src="<?= $image->thumb('xs')->url() ?>">
	       <img data-src="<?= $image->url() ?>" class="lazyload" srcset="<?= $image->srcset([300, 500, 1000, 1500, 1800, 2000]) ?>">   
           
            <?php else: ?> 
    			
                <?php if($image = $page->children()->first()->cover()->toFile()): ?>
                <p> childrens cover</p>
        	    <img class="placeholderimg lazyload" src="<?= $image->url() ?>" srcset="<?= $image->srcset([1]) ?>">
	    	    <img data-src="<?= $image->url() ?>" class="lazyimage lazyload" srcset="<?= $image->srcset([300, 500, 1000]) ?>">   
            
                <?php // no image in selection
                else: ?>  
        
        
                    <?php if($image = $page->children()->first()->images()->first()->toFile()): ?>
                    <p> childrens first image</p>
             	    <img class="placeholderimg lazyload" src="<?= $image->url() ?>" srcset="<?= $image->srcset([1]) ?>">
	           	    <img data-src="<?= $image->url() ?>" class="lazyimage lazyload" srcset="<?= $image->srcset([300, 500, 1000]) ?>">   

                    <?php endif ?>
        
        
                <?php endif ?>
            
    
            <?php endif ?>
        <?php endif ?>

```

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [May 27, 2020, 8:34pm UTC](https://forum.getkirby.com/t/getting-cover-images-from-children-if-they-exist/18359/2 "2020-05-27T20:34:39Z")

</div>

First, I’d suggest you simplify your code, using if - elseif, instead of nesting your stuff.  
Secondly, I’d try to be less repetitive, no idea why you use different srcsets here, and different classes. If that can be avoided, it would help to make the code more readable as well.

This should work, but try to clean up:

```auto
<?php if ($image = $page->cover()->toFile()) : ?>

  <!-- Load MAIN IMAGE -->
  <img class="placeholderimg" src="<?= $image->thumb('xs')->url() ?>">
  <img data-src="<?= $image->url() ?>" class="lazyload" srcset="<?= $image->srcset([300, 500, 1000, 1500, 1800, 2000]) ?>">

<?php elseif ($image = $page->image()) : ?>
  <img class="placeholderimg" src="<?= $image->thumb('xs')->url() ?>">
  <img data-src="<?= $image->url() ?>" class="lazyload" srcset="<?= $image->srcset([300, 500, 1000, 1500, 1800, 2000]) ?>">

<!-- Here you can't be sure you have a child, so: -->
<?php elseif ( ($p = $page->children()->first() ) && $image = $p->cover()->toFile()) : ?>
  <p> childrens cover</p>
  <img class="placeholderimg lazyload" src="<?= $image->url() ?>" srcset="<?= $image->srcset([1]) ?>">
  <img data-src="<?= $image->url() ?>" class="lazyimage lazyload" srcset="<?= $image->srcset([300, 500, 1000]) ?>">

<!-- converting the first image to file doesn't make sense, so: -->
<?php elseif ( ($p = $page->children()->first() ) && $image = $p->images()->first()) : ?>
  <p> childrens first image</p>
  <img class="placeholderimg lazyload" src="<?= $image->url() ?>" srcset="<?= $image->srcset([1]) ?>">
  <img data-src="<?= $image->url() ?>" class="lazyimage lazyload" srcset="<?= $image->srcset([300, 500, 1000]) ?>">

<?php endif ?>

```

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [May 27, 2020, 8:48pm UTC](https://forum.getkirby.com/t/getting-cover-images-from-children-if-they-exist/18359/3 "2020-05-27T20:48:27Z")

</div>

```auto
<?php 
$placeholderImage = $page->cover()->toFile() ?? $page->image();
if (! $placeholderImage) {
  if ( $p = $page->children()->first()) {
    $fallbackImage = $p->cover()->toFile() ?? $p->images()->first();
  }
}
?>
<?php if ($placeholderImage) : ?>

  <!-- Load MAIN IMAGE -->
  <img class="placeholderimg" src="<?= $image->thumb('xs')->url() ?>">
  <img data-src="<?= $image->url() ?>" class="lazyload" srcset="<?= $image->srcset([300, 500, 1000, 1500, 1800, 2000]) ?>">

<?php elseif ($fallbackImage) : ?>
  <img class="placeholderimg lazyload" src="<?= $image->url() ?>" srcset="<?= $image->srcset([1]) ?>">
  <img data-src="<?= $image->url() ?>" class="lazyimage lazyload" srcset="<?= $image->srcset([300, 500, 1000]) ?>">

<?php endif ?>

```

---

<div class="post-metadata">

**Author:** ![johannesverwoerd](https://avatars.discourse-cdn.com/v4/letter/j/bbe5ce/32.png) [@johannesverwoerd](https://forum.getkirby.com/u/johannesverwoerd)\
**Post date:** [May 28, 2020, 7:17am UTC](https://forum.getkirby.com/t/getting-cover-images-from-children-if-they-exist/18359/4 "2020-05-28T07:17:51Z")

</div>

I simplified the first version but I still get an error on one spot: when the child doesnt have an image at all:

```auto
<?php else: ?>    
        <!-- Is there an image? -->
        <?php if ($image = $page->cover()->toFile()) : ?>
        <?php elseif ($image = $page->image()) : ?>
        <!-- Here you can't be sure you have a child, so: -->
        <?php elseif ( ($p = $page->children()->first() ) && $image = $p->cover()->toFile()) : ?>
        <!-- converting the first image to file doesn't make sense, so: -->
        <?php elseif ( ($p = $page->children()->first() ) && $image = $p->images()->first()) : ?>
        <?php endif ?>
 
        <img class="placeholderimg" src="<?= $image->thumb('xs')->url() ?>">
        <img data-src="<?= $image->url() ?>" class="lazyload" srcset="<?= $image->srcset([300, 500, 1000, 1500, 1800, 2000]) ?>">
    
<?php endif ?>

```

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [May 28, 2020, 7:36am UTC](https://forum.getkirby.com/t/getting-cover-images-from-children-if-they-exist/18359/5 "2020-05-28T07:36:51Z")

</div>

Please wrap code blocks within three backticks on a separate line before and after the code block.

You have two endifs, which doesn’t make sense.

The code otherwise shouldn’t throw an error once that is removed. If it still does, please indicate the line where the error is thrown.

---

<div class="post-metadata">

**Author:** ![johannesverwoerd](https://avatars.discourse-cdn.com/v4/letter/j/bbe5ce/32.png) [@johannesverwoerd](https://forum.getkirby.com/u/johannesverwoerd)\
**Post date:** [May 28, 2020, 10:01am UTC](https://forum.getkirby.com/t/getting-cover-images-from-children-if-they-exist/18359/6 "2020-05-28T10:01:15Z")

</div>

The endif is part of a higher level condition.

It works now like this:

```
<?php if ($image = $thumb->cover()->toFile()) : ?>
     
    <img class="placeholderimg" src="<?= $image->url() ?>" srcset="<?= $image->srcset([1]) ?>">
    <img data-src="<?= $image->url() ?>" class="lazyload" srcset="<?= $image->srcset([300, 500, 1000, 1500, 1800, 2000]) ?>">

    <?php elseif ($image = $thumb->image()) : ?>  

    <img class="placeholderimg" src="<?= $image->url() ?>" srcset="<?= $image->srcset([1]) ?>">
    <img data-src="<?= $image->url() ?>" class="lazyload" srcset="<?= $image->srcset([300, 500, 1000, 1500, 1800, 2000]) ?>">

    <?php elseif ( ($p = $thumb->children()->first() ) && $image = $p->cover()->toFile()) : ?> 

    <img class="placeholderimg" src="<?= $image->url() ?>" srcset="<?= $image->srcset([1]) ?>">
    <img data-src="<?= $image->url() ?>" class="lazyload" srcset="<?= $image->srcset([300, 500, 1000, 1500, 1800, 2000]) ?>">

    <?php elseif ( ($p = $thumb->children()->first() ) && $image = $p->images()->first()) : ?>
    
    <img class="placeholderimg" src="<?= $image->url() ?>" srcset="<?= $image->srcset([1]) ?>">
    <img data-src="<?= $image->url() ?>" class="lazyload" srcset="<?= $image->srcset([300, 500, 1000, 1500, 1800, 2000]) ?>">

    <?php endif ?>
```

---

<div class="post-metadata">

**Author:** ![pixelijn](https://avatars.discourse-cdn.com/v4/letter/p/7ab992/32.png) [@pixelijn](https://forum.getkirby.com/u/pixelijn)\
**Post date:** [May 28, 2020, 10:14am UTC](https://forum.getkirby.com/t/getting-cover-images-from-children-if-they-exist/18359/7 "2020-05-28T10:14:15Z")

</div>

But now your html is completely the same and you repeat it 4 times while you only need it once!

---

<div class="post-metadata">

**Author:** ![johannesverwoerd](https://avatars.discourse-cdn.com/v4/letter/j/bbe5ce/32.png) [@johannesverwoerd](https://forum.getkirby.com/u/johannesverwoerd)\
**Post date:** [May 28, 2020, 10:28am UTC](https://forum.getkirby.com/t/getting-cover-images-from-children-if-they-exist/18359/8 "2020-05-28T10:28:21Z")

</div>

Then where should it be placed?

---

<div class="post-metadata">

**Author:** ![pixelijn](https://avatars.discourse-cdn.com/v4/letter/p/7ab992/32.png) [@pixelijn](https://forum.getkirby.com/u/pixelijn)\
**Post date:** [May 28, 2020, 11:10am UTC](https://forum.getkirby.com/t/getting-cover-images-from-children-if-they-exist/18359/9 "2020-05-28T11:10:09Z")

</div>

Use the logic to define the image, as [outlined abov](https://forum.getkirby.com/t/getting-cover-images-from-children-if-they-exist/18359/3)e, but now you need only one image definition.

Then one if statement to print your html.