Display an image with its id or order

Kirby 3 Solved ✅
#1

Hello,

I am new to Getkirby 3, I have already received a lot of help from the forum with the different messages.

Currently, I display 2 images stored in the panel.
I can display them on the front side.

<?php if($image = page('home-1-la-cave')->image('cave-triple-hop-1.jpg')): ?>
   <img src="<?= $image->url() ?>" alt="Instant Image">
<?php endif ?>

<?php if($image = page('home-1-la-cave')->image('cave-triple-hop-2.jpg')): ?>
   <img src="<?= $image->url() ?>" alt="Instant Image">
<?php endif ?>

The problem is that it only works with the name of the image.

I would like to display the image with an id or by “sort” (position 1 or 2) because if I change the name of the image it requires updating the code of the page on the front.

Thanks you

#2 
<?php


if ($p = page('home-1-la-cave') {
  $images = $p->images()->sortBy('sort', 'asc');
  foreach ($images as $image):
?>
<img src="<?= $image->url() ?>" alt="Instant Image">
<?php endforeach ?>

Note that you better leave the image’s alt attribute empty if it doesn’t provide useful information about the image. Ideally, if the image is important, the alt attribute should describe the image.

#3

I’d personally do something like this:

<?php

if (($p = page('home-1-la-cave')) && $p->hasImages()) :
    $images = $p->images()->sortBy('sort', 'asc');
    foreach ($images as $image) :
        echo $image; # <!-- This should print the image tag by default if I remember correctly
    endforeach;
endif;

?>
#4

There’s a pair of parenthesis missing:

if (($p = page('home-1-la-cave')) && $p->hasImages()) :
1 Like
#5

great is good, thanks.

For the alt or the title of the image how to add one?

Knowing that in the panel I do not have the possibility of adding these texts.

Capture d’écran 2020-02-04 à 15.12.50
Capture d’écran 2020-02-04 à 15.12.501427×980 164 KB

#6

You can add the possibility to insert one via a file blueprint: https://getkirby.com/docs/reference/panel/blueprints/file

#7

Thank you very much.
I found it for alt but it doesn’t seem to exist for the title of the image.

#8

@mickaeldurand You can define whatever fields you need in a file blueprint.

#9

Thanks

I manage to put the title and the alt now.

I post the example for beginners like me:

<?php
if (($p = page('home-1-la-cave')) && $p->hasImages('title')) :
    $images = $p->images()->sortBy('sort', 'asc');
    foreach ($images as $image) :
        //echo $image; # <!-- This should print the image tag by default if I remember correctly
        echo '<img src="'.$image->url().'" title="'.$image->title().'" alt="'.$image->alt().'" />' ;
        endforeach;
endif;
?>
#10

It’s not good practice to echo HTML tags, better do it like this:

<?php
if (($p = page('home-1-la-cave')) && $p->hasImages('title')) :
$images = $p->images()->sortBy('sort', 'asc');
foreach ($images as $image) : ?>
     <img src="<?= $image->url() ?>" title="<?= $image->title() ?>" alt="<?= $image->alt() ?>" />
<?php endforeach ?>
<?php endif ?>
#11

Thank you for your answers.

I have another problem. I have 5 images in total and I have selected only 3. The problem is that there are 5 images displayed. While I want to display only 3.

Capture d’écran 2020-02-05 à 23.36.49
Capture d’écran 2020-02-05 à 23.36.49964×688 110 KB

#12

This could get the images directly from the page folder.

You didn’t mention above that you use a files field to select images. But we can of course get them from the field as well.

<?php if (($p = page('home-1-la-cave'))) : ?>
    <?php $images = $p->fieldname_of_field_with_images()->toFiles(); ?>
    <?php if ($images->isNotEmpty()) : ?>
        <?php foreach ($images as $image) : ?>
        <img src="<?= $image->url() ?>" title="<?= $image->title() ?>" alt="<?= $image->alt() ?>" />
        <?php endforeach ?>
    <?php endif ?>
<?php endif ?>

Replace fieldname_of_field_with_images with the name of your field in the blueprint.