Use images inside of frontmatter | Astro Lounge | Page 1

gaunt gyro Jun 22, 2023, 4:31 PM

#

I've see a couple of messages regarding that topic and wonder if as of June 2023 there is a proper way to reference images from the frontmatter of a .md or .mdx file.

I've seen this:

Relative images can now be referenced in Markdown, MDX, and Markdoc files. These will automatically be optimized and hashed by Astro’s build process.

on https://docs.astro.build/en/guides/assets/ without any context to it, so I would guess this is not only tied to the experimental assets folder nor to the body of markdown files, but both seem to be the case.

Is there anything I'm overseeing? I'm currently replacing these paths by myself by importing them via import.meta.glob but this doesn't feel right even tho it works. Overall this seems like a p pretty basic functionality to ask for isn't it? 😕 🤔

misty kindle Jun 22, 2023, 4:33 PM

#

you can use the image helper function in your schema, then reference them using the path.
https://docs.astro.build/en/guides/assets/#update-content-collections-schemas

gaunt gyro Jun 22, 2023, 4:36 PM

#

I saw that as well, but again, is this only possible when using the assets folder? Because the image in the example isn't isnide of the assets folder. Nor is there like anything visible on the first sight that references to the assets folder in this example.

@misty kindle thx for the quick answer btw.! ❤️

misty kindle Jun 22, 2023, 4:40 PM

#

there's no requirement to use the assets folder, it's just a recommendation. so, if your image is somewhere in the content folder, you can reference to that. the path is relative from the folder each file is in

gaunt gyro Jun 22, 2023, 4:41 PM

#

Let me give it a try

#

Okay so I did update my config to the following

const projectCollection = defineCollection({
  type: 'content',
  schema: ({ image }) => z.object({
    ....,
    overviewImage: image(),
  }),
});

my markdown now references my image, from src/content/projects to src/images/projekte/bambino-tours/projekt-uebersicht/bambino-tours-projektuebersicht.jpg

---
...
overviewImage: ../../images/projekte/bambino-tours/projekt-uebersicht/bambino-tours-projektuebersicht.jpg
---

With that from what u've said and what I've read I would think I could just use it inside of my template. But all I get passed in is a simple string that is not handled what so ever 😕

#

Same thing if I put the image inside of the content folder and try to reference it from there

deep brook Jun 22, 2023, 4:56 PM

#

I'm actually trying to solve this problem now as well

gaunt gyro Jun 22, 2023, 5:16 PM

#

@deep brook If you find out more let me know 🙂

deep brook Jun 22, 2023, 5:16 PM

#

@gaunt gyro Will do

deep brook Jun 22, 2023, 5:45 PM

#

@gaunt gyro Okay I think I have something working. I am using the expirimental assets, but i'm not sure if it's required or not

gaunt gyro Jun 22, 2023, 5:46 PM

#

In combination with images in frontmatter?

deep brook Jun 22, 2023, 5:47 PM

#

yeah I'll send some screenshots

#

Here's my content collection config

#

Frontmatter

#

Background image using frontmatter

#

Post component for the post collection screen

#

Astro Project Structure

#

I also verified this issue worked when I deployed it remotely because that's where I was having my problem originally

gaunt gyro Jun 22, 2023, 5:51 PM

#

It looks exactly like what I'm doing besides the assets folder. But in the example the image was also imported from content thats why I'm confused..

#

So post.data.image is an object now and not a string anymore correct?

deep brook Jun 22, 2023, 5:52 PM

#

Yeah my understanding is the Zod image() function converts the string into an image object. Just like if you imported in the image in a JS file

gaunt gyro Jun 22, 2023, 5:54 PM

#

misty kindle there's no requirement to use the assets folder, it's just a recommendation. so,...

So is this

there's no requirement to use the assets folder, it's just a recommendation. so, if your image is somewhere in the content folder, you can reference to that. the path is relative from the folder each file is in

Actually false? Or do I maybe still need to enable the experimental feature for it to work

gaunt gyro Jun 22, 2023, 5:55 PM

#

deep brook Yeah my understanding is the Zod image() function converts the string into an im...

Could you try putting the image inside of the content folder and reference it from there and see if it still works?

misty kindle Jun 22, 2023, 5:55 PM

#

gaunt gyro So is this > there's no requirement to use the assets folder, it's just a recom...

you still need to enable the experimental feature to use assets optimisation, but using src/assets as the route to store files isn't necessary.

gaunt gyro Jun 22, 2023, 5:56 PM

#

ah!!

gaunt gyro Jun 22, 2023, 7:48 PM

#

Nope doesnt work for me tho..

#Use images inside of frontmatter