@fptt:
If I look in the source code of the rendered page I see:
<br />
<b>Warning</b>: get_resource_type() expects parameter 1 to be resource, boolean given in <b>E:\xampp_7.0.8\htdocs\kirby-2.3.1\kirby\toolkit\vendors\abeautifulsite\SimpleImage.php</b> on line <b>57</b><br />
I can not tell you, why the above code gives this warning with Kirby 2.3.1. May be the code is for Kirby older than 2.3.0…, I haven’t found it in the Kirby docs yet.
I think any square images furthermore are not shown with that two "if"s. The function $file->orientation() has three answers: landscape, portrait or square.
But I suggest to use the following code, tested on the page “/projects” of the Starterkit with Kirby 2.3.1 using XAMPP 7.0.8 (PHP 7.0.8) on Windows:
<div class="grid-item">
<a href="<?php echo $project->url(); ?>">
<?php if($image = $project->images()->sortBy('sort', 'asc')->first()): ?>
<?php if($image->orientation() == 'landscape'){ ?>
<img class="project-image" src="<?php echo $image->width(200)->url() ?>" alt="<?php echo $project->title()->html(); ?>" >
<?php } else { ?>
<img class="project-image" src="<?php echo $image->height(200)->url() ?>" alt="<?php echo $project->title()->html(); ?>" >
<?php }; ?>
<?php else: ?>
<?php echo $project->title()->html(); ?>
<?php endif; ?>
</a>
</div>
Hints:
- This code needs Kirby 2.3.0+ .
- Change “
200” two times to the identical size, you need or want for the longer border of the images. This code shows all images with this same longest border, if the original image is not lesser than this size.
- I have added the project title as text, if no image is available (
else:). You may want to add some css for this.
Addendum:
The hints apply accordingly!
If we use the Kirby helper “ecco” and the $file function “isLandscape”, the code can look like:
<div class="grid-item">
<a href="<?php echo $project->url(); ?>">
<?php if($image = $project->images()->sortBy('sort', 'asc')->first()): ?>
<img class="project-image" src="<?php ecco ($image->isLandscape(), $image->width(200)->url(), $image->height(200)->url()); ?>" alt="<?php echo $project->title()->html(); ?>">
<?php else: ?>
<?php echo $project->title()->html(); ?>
<?php endif; ?>
</a>
</div>
If we use the ternary operator instead like @texnixe suggested sometimes, the code could look like:
<div class="grid-item">
<a href="<?php echo $project->url(); ?>">
<?php if($image = $project->images()->sortBy('sort', 'asc')->first()): ?>
<img class="project-image" src="<?php echo ($image->isLandscape() ? $image->width(200)->url() : $image->height(200)->url(); ?>" alt="<?php echo $project->title()->html(); ?>">
<?php else: ?>
<?php echo $project->title()->html(); ?>
<?php endif; ?>
</a>
</div>
Good luck!
