Referencing images in content folders, directly in .txt files

1

Hello! Long time ExpressionEngine user here trying out Kirby for the first time!

Everything is going well, loving the system so far, but I have run into my first thing that a google search hasn’t solved for me.

I have a content folder about that contains about.jpg and about.txt

I would like to reference about.jpg in the content of the txt file, using an HTML image tag (it appears mid body of text).

I am aware of the KirbyText option (image…) but it writes the figure for me, and I need more control, for prefers-color-scheme and srcset reasons.

I also understand how I could handle this issue using templates and fields, but I have other pages with different image layouts that need this same capability, or else I am going to be making a lot of redundant templates just to serve images inside content for one-off pages.

I just need to dynamically get the about.jpg path to put into my content as HTML.

Is this possible?

Thanks for any help!

2

Using HTML within Markdown is possible. The other alternative would be to use custom KirbyTags (or to overwrite the image Kirbytag):

3

Hi thanks so much for the reply!

I am aware of both options, but the problem I am having is getting the path to the image to put into the HTML. the image lives here content/about/about.jpg but when I use that I get a 404 on the image.

I’ve noticed that Kirby stores a reference to my content folder images in the media folder, which is wonderful, but I would rather not hardcode that path into my content, as it contains a randomized hash in the path.

Is there a way for me to get the correct path to the image dynamically that can be used in the mark up.

e.g. <img src='I_need_this_path_image.jpg' alt='...'>

Thank you!

4

True, then I think your best bet is a custom KirbyTag. Alternatively, you can keep the files in the content folder rather than them being copied to the media folder.

However, a custom KirbyTag is the better option in my opinion, because you can also use a srcset atttribute to make your images responsive, a create thumbs.

5

Are you saying there is no way aside from building a custom KirbyTag to simply get the direct path to an image that is stored in the content folder for use directly in a .txt file?

Sorry, but I feel like, maybe I’m not communicating the need properly, let me try to expand with an example.

For example, this folder structure

content/
    about/
        about.jpg
        about.txt

Contents of about.txt

Title: About
----
Body: This is some text, and now I want to reference about.jpg in this <img src='???' alt='about photo'> and then some more text here.
----
Date: 2021-03-21 10:35
...

I’m just looking to find out how to get the part that would go into the ??? in the above Body field.

6

I do understand your problem.

There is one other option, which is will work if you open up direct access to the content folder which is by default locked in the .htaccess.

Text: <img src="/content/2_notes/desert.jpg">

But it’s not the best of ideas, because you have to add the path to the file starting from /content and if you change the sorting number of the page folder, the link won’t work anymore.

Therefore I was suggesting the best option.

7

Thanks for the help, I appreciate it!