Create an HTML Div-Tag inside an PHP if statement?

The CMS Questions
1

Hi!

I have this php if statement in a div container. But the div container has a fixed size. So if there’s no image and the php isnt shown, i also need to not show the div container around it. How can i implement this container into the if statement?

<div class="article-preview-thumbnail">
   <?php if($article->thumbnail()->isNotEmpty()) {
      echo $article->image();
   } ?>
</div>

Thanks for your help.

2

You have to wrap your if statement around the container:

<?php if($article->thumbnail()->isNotEmpty()): ?>
  <div class="article-preview-thumbnail">
      <?= $article->image(); ?>
  </div>
<?php endif; ?>

But I wonder why you check for the thumbnail field but then call the image. What sort of field is thumbnail? If it is a files field, wouldn’t you want to get the file from that field?

3

Thank you!
It’s a files field wich is limited to 1. So if “thumbnail” is set its the image of this page. Probably a bit clunky if you upload more pictures right?

So I changed it to:

<?php if($article->thumbnail()->isNotEmpty()): ?>
   <div class="article-preview-thumbnail">
      <?= $article->thumbnail()->tofile(); ?>
   </div>
<?php endif; ?>
4

Testing if the field is not empty doesn’t guarantee that the file exists, so you better change your if statement to:

<?php if($image = $article->thumbnail()->toFile()): ?>
   <div class="article-preview-thumbnail">
      <?= $image ?>
   </div>
<?php endif; ?>

If your image is too large for where on the page it is used, consider using Kirby’s image resizing methods (resize(), crop()), so that you don’t server unnecessarily large images.

That page also has a chapter about responsive images.