Kirby using always first image in alphabetically order

Kirby 2 Solved ✅
1

I’m using this code to display a header image on every site:

<?php if($image = $data->image()): ?>
	<img src="<?php echo thumb($image, array(
			'width' => 480,
			'quality' => 1
		))->url(); ?>"
		data-src="<?php echo $image->resize(1140)->url() ?>"
		alt="<?php if ($image->caption()->isNotEmpty()) { echo html($image->caption()).' - '; } ?><?php echo $site->title()->html(); ?>"
		title="<?php if ($image->caption()->isNotEmpty()) { echo html($image->caption()).' - '; } ?><?php echo $site->title()->html(); ?>"
		class="lazyload blur-up" />
<?php endif ?>

But regardless how many images I upload, kirby used always the image who ist the first in alphabetical order. Is this a bug or a feature?

So when I upload two pictures a-image.jpg & b-image.jpg and select b-image.jpg on the panel selection list, always a-image.jpg is showing on the site.

My workaround is to rename the images to display the certain picture I want.

Any suggestion on this issue?

3

You can pass a file name as an argument of the image() method.
For example image('b-image.jpg')

EDIT: you can obviously store the value of the selected image in a select field or pull a random image. That’s up to you :slight_smile:

4

What do you mean by that?

If you select an image in the Panel via a select field, you can grab it in your template like this:

<?php if($image = $data->image($data->selectfield()): ?>
<!-- your code -->
<?php endif ?>

Other than that, you could sort your images manually in the Panel and then grab the first one of the sorted list:

<?php if($image = $data->images()->sortBy('sort')->first()): ?>
5

Regardless which image I select in the panel, it shows every time the image who is the first in alphabetical order.

6

How do you select the image in the Panel?

As already said above

$image = $data->image();

i.e. without specifying any specific image, always returns the first image from the file system.

7

Ok, now I get it!

But is it possible to select a certain image in the panel without specifying the exact filename in the code? Because I can’t hard code the exact file name for every page.

Unfortunately this code does not work:

<?php if($image = $data->image($data->selectfield())): ?>
	<img src="<?php echo thumb($image, array(
			'width' => 480,
			'quality' => 1
		))->url(); ?>"
		data-src="<?php echo $image->resize(1140)->url() ?>"
		alt="<?php if ($image->caption()->isNotEmpty()) { echo html($image->caption()).' - '; } ?><?php echo $site->title()->html(); ?>"
		title="<?php if ($image->caption()->isNotEmpty()) { echo html($image->caption()).' - '; } ?><?php echo $site->title()->html(); ?>"
		class="lazyload blur-up" />
<?php endif ?>

8

Maybe your selectfield is not called “selectfield”?

You can also try:

<?php if($image = $data->name_of_selectfield()->toFile()): ?>

$data->name_of_selectfield() gets the filename from the field. So whatever you have selected in the Panel is passed to the image method in the example I posted above, not a hardcoded filename.

9

Now it works!

But there is one little disadvantage on this approach, I loose the small thumbnail besides the select in the panel (like in the screenshot above).

selectfield: image
  label: Bild
  type: select
  options: images
10

You can use the image field as well, it’s an extended select field after all. Does not change anything code-wise in your templates.

1 Like