Individual Items in the Beyond Tellerrand Photo Galleries

[rudiger]

I hope this isn’t too cheeky, but I’d love to understand how the individual photos in the beautiful new Beyond Tellerrand galleries get assigned an HTML template.

One can setup file blueprints for the panel, but how does on achieve something similar for regular templates so that, for example, https://beyondtellerrand.com/photos/portraits-berlin-norman-posselt/cassie-evans.jpg gets packed in the HTML that it does instead of a browser default (and with cassie-evans.jpg in the url without jumping to the media folder)?

Is there some specially created magic going on behind the scenes, or is there something obvious that I’m missing?

[texnixe]

The image itself comes from the media folder:

<img alt="" src="https://beyondtellerrand.com/media/pages/photos/portraits-berlin-norman-posselt/2631825938-1578416643/cassie-evans-1600x1600.jpg">

I’m not familiar with how this is exactly implemented, but one way to achieve this is to make the images virtual pages.

How to create virtual pages for each photo in an album?

Basically as described here: https://getkirby.com/docs/guide/virtual-pages/content-from-csv In the album model, you would define the children, so each image would become a page (note that you can’t use the filename as slug, because that would redirect to the media folder. class AlbumPage extends Page { public function children() { $images = []; foreach ($this->images() as $image) { $images[] = [ 'slug' => $image->name(), // this could …

Another way to achieve this would be via a route, in which you always return the same template, but with the image from the URL.

[rudiger]

Great, thanks for the pointers.