(Random) image path not correct on subpages

Kirby 3 Solved ✅
1

Hi there! First time poster :slight_smile:

I need some help with loading images from a page on subpages. I am loading a random image from a page in the footer of my website using the below snippet.

<?= $images = page('buttons')->images()->shuffle()->limit(1); ?>`

This works fine on pages that live directly in the /contents directory, on the same level as the “buttons” page, which is only used to store these image files. The following html is generated and correctly loads the image on example.url/magazines/

<img src="buttons/anow.gif" alt="Surprise Web 1.0 Page">

When I load subpages such as example.url/magazines/magazine1/, the images are not loaded. When I add …/ before the path in the Firefox inspectore, the image is loaded.

<img src="../buttons/anow.gif" alt="Surprise Web 1.0 Page">

I have been searching for a while now but can’t get my head around on how to load the page / the images in such a way that they are accessible from subpages. It seems to have to do with absolute / relative paths but I don’t know how to fix it. Anyone?

2

This returns a collection, not a single image. Use first() instead, if you want to echo the image directly.

3

@texnixe thanks for the swift reply! The below worked :smiley:

    <?= $images = page('buttons')->images()->shuffle()->first(); ?>

I had the line wrapped in an tag, which became unnecessary since first() directly outputs the img/alt construct. Nice! Thank you.