# Shuffle image checkbox

**URL:** <https://forum.getkirby.com/t/shuffle-image-checkbox/403>\
**Category:** Questions\
**Tags:** v2\
**Created:** [March 11, 2015, 5:05pm UTC](https://forum.getkirby.com/t/shuffle-image-checkbox/403 "2015-03-11T17:05:54Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![tommylee](https://avatars.discourse-cdn.com/v4/letter/t/edb3f5/32.png) [@tommylee](https://forum.getkirby.com/u/tommylee)\
**Post date:** [March 11, 2015, 5:05pm UTC](https://forum.getkirby.com/t/shuffle-image-checkbox/403/1 "2015-03-11T17:05:54Z")

</div>

Hi together,

I’m setting up my first kirby and now i got stuck at tryin’ to get an random background image on every reload.

my css in the header is :

```
background: url('<?php $bild = $page->Background()->shuffle()->first(); ?><?php if ($bild->empty()) { echo ('../../assets/img/background.jpg'); } else { echo thumb($page->image($bild))->url(); } ?>');

```

while `Background()` is the checkboxes field in my blueprint.

Some ideas? Thanks so far…

---

<div class="post-metadata">

**Author:** ![FabianSperrle](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/fabiansperrle/32/5426_2.png) [@FabianSperrle](https://forum.getkirby.com/u/FabianSperrle)\
**Post date:** [March 11, 2015, 5:15pm UTC](https://forum.getkirby.com/t/shuffle-image-checkbox/403/2 "2015-03-11T17:15:16Z")

</div>

Try

```
<?php if(!$page->background()->bool()): ?>
    background: url('../../assets/img/background.jpg');
<?php else: ?>
    background: url(<?php echo thumb($page->images()->shuffle()->first())->url(); ?>);
<?php endif; ?>

```

This uses the default image if the checkbox is not set, and else a random image.

`$page->background()` is just the value of the checkbox. You can’t shuffle that, and will especially not get an image object from there.

---

<div class="post-metadata">

**Author:** ![tommylee](https://avatars.discourse-cdn.com/v4/letter/t/edb3f5/32.png) [@tommylee](https://forum.getkirby.com/u/tommylee)\
**Post date:** [March 11, 2015, 5:26pm UTC](https://forum.getkirby.com/t/shuffle-image-checkbox/403/3 "2015-03-11T17:26:05Z")

</div>

doesnt work 😕 now I get the default image all the time i refresh… Whats the reason u think? Maybe bool() doesnt work

---

<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:** [March 11, 2015, 5:29pm UTC](https://forum.getkirby.com/t/shuffle-image-checkbox/403/4 "2015-03-11T17:29:37Z")

</div>

What is the checkbox for? Just to decide whether to show a background image or not at all? Maybe this works:

```php
<?php if($page->background()->bool()): ?>
   <?php if($bgimage = $page->images()->shuffle()->first()): ?>
        background: url(<?php echo thumb($bgimage)->url(); ?>);
   <?php else: ?>
        background: url('../../assets/img/background.jpg');
   <?php endif; ?>
<?php endif; ?>

```

---

<div class="post-metadata">

**Author:** ![tommylee](https://avatars.discourse-cdn.com/v4/letter/t/edb3f5/32.png) [@tommylee](https://forum.getkirby.com/u/tommylee)\
**Post date:** [March 11, 2015, 5:31pm UTC](https://forum.getkirby.com/t/shuffle-image-checkbox/403/5 "2015-03-11T17:31:08Z")

</div>

okay I used your code without the “!” in front of $page and it works! Sorry my fault thanks a lot 😄

---

<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:** [March 11, 2015, 5:34pm UTC](https://forum.getkirby.com/t/shuffle-image-checkbox/403/6 "2015-03-11T17:34:51Z")

</div>

Just beware that with that version, you will run into an error if you have set the checkbox but not image is available.

---

<div class="post-metadata">

**Author:** ![tommylee](https://avatars.discourse-cdn.com/v4/letter/t/edb3f5/32.png) [@tommylee](https://forum.getkirby.com/u/tommylee)\
**Post date:** [March 11, 2015, 5:43pm UTC](https://forum.getkirby.com/t/shuffle-image-checkbox/403/7 "2015-03-11T17:43:16Z")

</div>

The img in the assets is the background if the checkbox is empty. The checkbox images is just an selection of backgrounds. Yes u r right now i go an error …

---

<div class="post-metadata">

**Author:** ![FabianSperrle](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/fabiansperrle/32/5426_2.png) [@FabianSperrle](https://forum.getkirby.com/u/FabianSperrle)\
**Post date:** [March 11, 2015, 5:46pm UTC](https://forum.getkirby.com/t/shuffle-image-checkbox/403/8 "2015-03-11T17:46:04Z")

</div>

True that’s a problem…

```
<?php if(!$page->background()->bool() or ($image = $page->images()->shuffle()->first()) == null): ?>
    background: url('../../assets/img/background.jpg');
<?php else: ?>
    background: url(<?php echo thumb($image)->url(); ?>);
<?php endif; ?>
```

---

<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:** [March 11, 2015, 5:56pm UTC](https://forum.getkirby.com/t/shuffle-image-checkbox/403/9 "2015-03-11T17:56:21Z")

</div>

Still not sure if I really got what you are doing with the checkboxes XD I assume you select from all the page’s images the ones that should be used as potential background images. And from them you want to have one randomly displayed:

```php
<?php $backgrounds = $page->background()->split(','); ?>
<?php $bg_key = array_rand($backgrounds); ?>
<?php if($image = $page->image($backgrounds[$bg_key])): ?>
  background: url(<?php echo thumb($image)->url(); ?>);
<?php else: ?> 
  background: url('../../assets/img/background.jpg');
<?php endif; ?>

```

---

<div class="post-metadata">

**Author:** ![FabianSperrle](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/fabiansperrle/32/5426_2.png) [@FabianSperrle](https://forum.getkirby.com/u/FabianSperrle)\
**Post date:** [March 11, 2015, 6:19pm UTC](https://forum.getkirby.com/t/shuffle-image-checkbox/403/10 "2015-03-11T18:19:44Z")

</div>

> [@distantnative](#):
>
> Still not sure if I really got what you are doing with the checkboxes

Of course I can only guess what he was doing with them, but I use them quite often when developing new ‘features’ like that to be able to switch between old and new behaviour without much hassle.

---

<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:** [March 11, 2015, 6:24pm UTC](https://forum.getkirby.com/t/shuffle-image-checkbox/403/11 "2015-03-11T18:24:20Z")

</div>

Yea, but as I got it, @tommylee only wants to shuffle the images selected in the panel - but your solution shuffles through all images of the page

---

<div class="post-metadata">

**Author:** ![tommylee](https://avatars.discourse-cdn.com/v4/letter/t/edb3f5/32.png) [@tommylee](https://forum.getkirby.com/u/tommylee)\
**Post date:** [March 11, 2015, 7:10pm UTC](https://forum.getkirby.com/t/shuffle-image-checkbox/403/12 "2015-03-11T19:10:27Z")

</div>

on this page are some more fields with images, so i cant shuffle all images of the page. So i made a checkbox for selecting images which are used exclusively as backgrounds. Hope u got it now 😉

so thanks

> \<?php $backgrounds = $page-\>background()-\>split(','); ?\>

\<?php $bg\_key = array\_rand($backgrounds); ?\> \<?php if($image = $page-\>image($backgrounds[$bg\_key])): ?\>

background: url(\<?php echo thumb($image)-\>url(); ?\>);

\<?php else: ?\> 

background: url(‘…/…/assets/img/background.jpg’);

\<?php endif; ?\>

this works great and is exactly what I searched for

---

<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, 5:20pm UTC](https://forum.getkirby.com/t/shuffle-image-checkbox/403/14 "2025-02-06T17:20:48Z")

</div>