In the website I am seeking to rebuild, the code below displays the image of a map. If I click on the image, an extra large version of the map is displayed in another page. (To be clear: the first image is not simply a thumbnail. )
<p><a href="uploads/images/climate/tfulllarge.jpg"><img style="margin: 8px auto; display: block;" src="uploads/images/climate/tfullsmall.jpg" alt="tfullsmall" width="92%" /></a></p>
This code will not work in Kirby, even if I paste it in with adjusted file paths. It produces an error page. Neither can the panel editor create the scenario I have described.
Can someone point me to how to do this, please?
Andrew
If your files are in a static folder somewhere (i.e. not managed through the Panel), it might be as straightforward as prepending a slash to ensure the URL is absolute, not relative – in case your uploads folder is a direct child of your Kirby install’s root folder: <a href="/uploads/images/climate/tfulllarge.jpg"> (the code you posted above would always try to find that file in a subfolder of the URL currently displayed in the browser).
If you upload your images via the Panel (i.e. they are located in the same folder as the .txt content file of the page they belong to), you’d have to use the $file->url() method in your template; for example: <a href="<?= page()->file('tfulllarge.jpg')->url() ?>"> to display a URL of the file tfulllarge.jpg. That’s because files inside Kirby’s content structure are not accessible directly; instead, the url() method creates a temporary copy in the /media folder and returns the URL to that.