Randomize the hero background

Kirby 2 Solved ✅
8

Yes, I saw it, but I think it’s a little different in this case because the images are taken randomly.

Maybe I’m wrong, can you show me a working example?

9

As far as I know, you can’t add meta data to files in the assets folder, and can’t define the fields for that in a blueprint. The Panel doesn’t have access to files in the assets folder. But you could add the files to the site folder instead.

10

Ok, I have added the images in the content folder.

I would pick them randomly and filtered by (banner-). How can I do starting from this code:

<?php
   $images = $page->images()->filterBy('filename', '*=', 'banner-');
   foreach($images as $file) {
   $image_url = $file->images()->url();
   $caption = $file->caption();
      echo '<figure>';
      echo '<img src="' . $file->url() . '" alt="' . $caption . '">';
      echo '<figcaption><p>' . $caption . '</p></figcaption>';
      echo '</figure>';
   }
?>

For now I get the list of all images and caption (correctly). I just want one result for each refresh.

Thanks.

11 
<?php
   $image = $page->images()->filterBy('filename', '*=', 'banner-')->shuffle()->first();
   $image_url = $image->url();
   $caption = $image->caption();
?>
<figure>
   <img src="<?= $image_url ?>" alt="<?= $caption ?>">
   <figcaption><p><?= $caption ?></p></figcaption>
</figure>

On a side note: It’s considered good style not to echo HTML tags… and makes life easier.

1 Like
12

Thanks Sonja, it work :wink:

13

I wish do the same thing described here.

The user add a few images from the panel using the visual select plugin Kirby-Selector: https://github.com/storypioneers/kirby-selector

But, I want show just one image from the selected and random, is possible?

For example:

<?php
$hero = $page->hero()->split();
foreach($hero as $heroImage) : ?>
<div class="hero" style="background-image: url(<?php echo $page->images()->find($heroImage)->url() ?>);">
<?php endforeach ?>

Thanks :slight_smile:

14

You can use array_rand to get an arbitrary element of the array:

<?php
$hero = array_rand($page->hero()->split(), 1);
?>
<div class="hero" style="background-image: url(<?php echo $image = $page->image($hero)? $image->url(): '' ?>);">
15

Thanks Sonja, but I get an error with the Kirby CMS Debugger:

ParseError
syntax error, unexpected ‘)’

Is correct the code?

16

Certainly not correct, if it throws an error :wink:

Corrected now.

17

Yes, the echo :wink:

But, I get no url() now:

I have already selected the images:

plugin.jpg705×267 91.4 KB

And, this is the blueprints:

hero:
    label: Cabeçalho
    type: selector
    mode: multiple
    filter: hero
    types:
        - image

Thanks.

18

Sorry, I made a mistake. array_rand()only returns the key. This should work now, please note that I added parenthesis around the ternary expression as well.

<?php
    $imagelist = $page->hero()->split();
    $key = array_rand($imagelist);
    $hero = $imagelist[$key];
?>
<div class="hero" style="background-image: url(<?php echo ($image = $page->image($hero))? $image->url(): '' ?>);">
1 Like
19

Another great help, thank you Sonja.

Everything works perfectly :sunglasses:

1 Like
20

From this code if the user don’t select any image (for mistake) show an error.

Is possible do an if-else statements to show at least one image?

Maybe an image from the /assets/ folder, for example.

Thanks.

21

One thing you can do is require the field, of course.

Otherwise:

<?php
if($page->hero()->isNotEmpty()):
   $imagelist = $page->hero()->split();
   $number = array_rand($imagelist);
   $hero = $imagelist[$number];
   $image = $page->image($hero);
else:
   $image = $page->images()->first();
endif;
 ?>
 <div class="hero" style="background-image: url(<?php echo $image? $image->url(): '' ?>);"></div>

Or if you think the user does not even upload an image, you can even get an image from the assets folder as a last resort.

1 Like
22

Thanks, it help me :slight_smile:

23

Hi Sonja,
Starting from this code, is’t possible to insert also the Thumb function to resize by width or/and height, for example, the image in case it was too big?

Normally I use:
echo thumb($image, array('width' => 300, 'height' => 200));

Thanks.

24

Sure, you might as well use the thumb function.

25

I get some errors, can you show me how please?

Thank you.

26

“I get some errors” is not really very meaningful :pensive: What sort of errors do you get?

<?php
if($page->hero()->isNotEmpty()):
   $imagelist = $page->hero()->split();
   $number = array_rand($imagelist);
   $hero = $imagelist[$number];
   $image = $page->image($hero);
else:
   $image = $page->images()->first();
endif;
 ?>
 <div class="hero" style="background-image: url(<?php echo $image? thumb($image, array('width' => 300, 'height' => 200))->url(): '' ?>);"></div>
27

My mistake, it works well, thank you Sonja :relaxed: