# Randomize the hero background

**URL:** <https://forum.getkirby.com/t/randomize-the-hero-background/5942>\
**Category:** Questions\
**Tags:** v2\
**Created:** [December 3, 2016, 8:17pm UTC](https://forum.getkirby.com/t/randomize-the-hero-background/5942 "2016-12-03T20:17:12Z")\
**Posts on this page:** 8\
**Page:** 2

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [December 13, 2016, 12:42pm UTC](https://forum.getkirby.com/t/randomize-the-hero-background/5942/21 "2016-12-13T12:42:48Z")

</div>

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

Otherwise:

```auto
<?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.

---

<div class="post-metadata">

**Author:** ![andreaballerino](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/andreaballerino/32/3252_2.png) [@andreaballerino](https://forum.getkirby.com/u/andreaballerino)\
**Post date:** [December 13, 2016, 2:39pm UTC](https://forum.getkirby.com/t/randomize-the-hero-background/5942/22 "2016-12-13T14:39:23Z")

</div>

Thanks, it help me 🙂

---

<div class="post-metadata">

**Author:** ![andreaballerino](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/andreaballerino/32/3252_2.png) [@andreaballerino](https://forum.getkirby.com/u/andreaballerino)\
**Post date:** [March 19, 2017, 10:25am UTC](https://forum.getkirby.com/t/randomize-the-hero-background/5942/23 "2017-03-19T10:25:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [March 19, 2017, 10:43am UTC](https://forum.getkirby.com/t/randomize-the-hero-background/5942/24 "2017-03-19T10:43:55Z")

</div>

Sure, you might as well use the thumb function.

---

<div class="post-metadata">

**Author:** ![andreaballerino](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/andreaballerino/32/3252_2.png) [@andreaballerino](https://forum.getkirby.com/u/andreaballerino)\
**Post date:** [March 19, 2017, 12:36pm UTC](https://forum.getkirby.com/t/randomize-the-hero-background/5942/25 "2017-03-19T12:36:28Z")

</div>

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

Thank you.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [March 19, 2017, 12:40pm UTC](https://forum.getkirby.com/t/randomize-the-hero-background/5942/26 "2017-03-19T12:40:13Z")

</div>

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

```auto
<?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>

```

---

<div class="post-metadata">

**Author:** ![andreaballerino](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/andreaballerino/32/3252_2.png) [@andreaballerino](https://forum.getkirby.com/u/andreaballerino)\
**Post date:** [March 19, 2017, 12:48pm UTC](https://forum.getkirby.com/t/randomize-the-hero-background/5942/27 "2017-03-19T12:48:37Z")

</div>

My mistake, it works well, thank you Sonja 😌

---

<div class="post-metadata">

**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\
**Post date:** [February 6, 2025, 4:50pm UTC](https://forum.getkirby.com/t/randomize-the-hero-background/5942/28 "2025-02-06T16:50:25Z")

</div>



[Previous page](https://forum.getkirby.com/t/randomize-the-hero-background/5942.md?page=1)