Writing a layout with variable images | Astro Lounge | Page 1

unreal vortex Feb 24, 2025, 9:06 PM

#

I am building a portfolio page with links to sub pages, and I would like to include an image for each sub page.

I have the image URL in the frontmatter for each sub page's .md file.

How can I write an Image or Picture element on my portfolio page layout that can import an image from each subpage's .md file to show up in the portfolio index?

topaz jayBOT Feb 24, 2025, 9:06 PM

#

Hi @unreal vortex. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To create a portfolio page layout that displays images from each subpage's Markdown file, you can use Astro's content collections feature along with the <Image /> component. Here's how you can approach this:

First, set up a content collection for your portfolio items in src/content/config.ts:

import { defineCollection, z } from "astro:content";

const portfolioCollection = defineCollection({
  schema: ({ image }) => z.object({
    title: z.string(),
    cover: image(),
    coverAlt: z.string(),
  }),
});

export const collections = {
  portfolio: portfolioCollection,
};

In your portfolio item Markdown files, include the image information in the frontmatter:

---
title: "My Portfolio Item"
cover: "./item-cover.jpg"
coverAlt: "A description of the cover image"
---

This is the content of my portfolio item.

Now, in your portfolio index page, you can use the getCollection function to fetch all portfolio items and their associated images:

---
import { Image } from "astro:assets";
import { getCollection } from "astro:content";

const portfolioItems = await getCollection("portfolio");
---

{portfolioItems.map((item) => (
  <div>
    <Image src={item.data.cover} alt={item.data.coverAlt} />
    <h2>
      <a href={`/portfolio/${item.slug}`}>{item.data.title}</a>
    </h2>
  </div>
))}

This approach allows you to dynamically import and display images for each portfolio item on your index page. The <Image /> component will handle the optimization and processing of your images.

#

For more detailed information on working with images in content collections, you can refer to the Images in content collections section of the Astro documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@unreal vortex Kapa.ai is still learning and improving, please let me know how I did by reacting below.

unreal vortex Feb 24, 2025, 9:19 PM

#

Why does the getCollection function use item.data.cover and item.slug? shouldn't it be item.data.slug?

#

@topaz jay Why does the getCollection function use item.data.cover and item.slug? shouldn't it be item.data.slug?

topaz jayBOT Feb 24, 2025, 9:19 PM

#

Let me check the knowledge base for you again. One moment! :books:

#

Your question touches on an important aspect of how Astro's content collections work. Let me clarify this for you:

item.data.cover: This is correct. The data property contains all the frontmatter values defined in your content schema. In the example provided, cover was defined in the schema and frontmatter, so it's accessed via item.data.cover.
item.slug: This is also correct. The slug is not part of the data object, but is a separate property of the collection entry.

The slug is not accessed as item.data.slug because it's a special, reserved property in Astro's content collections. It's generated automatically based on the file name, or it can be customized using a slug field in the frontmatter.

According to the Astro documentation:

"Each CollectionEntry is an object with the following values:

id: A unique ID. Note that all IDs from Astro's built-in glob() loader are slugified.
slug: The generated slug for the entry."

The slug is used for routing and is separate from the data object that contains your frontmatter values.

If you want to use a custom slug, you would define it in your frontmatter like this:

---
title: "My Portfolio Item"
cover: "./item-cover.jpg"
coverAlt: "A description of the cover image"
slug: my-custom-slug
---

In this case, you would still access it as item.slug, not item.data.slug.

For more details on how slugs work in Astro content collections, you can refer to the Defining custom IDs section of the Astro documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@unreal vortex Kapa.ai is still learning and improving, please let me know how I did by reacting below.

unreal vortex Feb 24, 2025, 9:34 PM

#

@topaz jay My portfolio.astro page is located in /src/pages/portfolio.astro, my example portfolio Markdown file is located in /src/pages/portfolio/example.md, and one of my hero image is located in /public/example.png.

What path should I write so Astro can display example.png when the portfolio page is loaded?

topaz jayBOT Feb 24, 2025, 9:34 PM

#

Let me check the knowledge base for you again. One moment! :books:

#

To display the image /public/example.png on your portfolio page located at /src/pages/portfolio.astro, you should use the path relative to the public folder. In this case, the correct path would be /example.png.

Here's how you can use it in your portfolio.astro file:

---
import { Image } from 'astro:assets';
---

<Image src="/example.png" alt="Example portfolio image" width="200" height="150" />

It's important to note that images in the public/ folder are served as-is and are not processed or optimized by Astro. If you want to take advantage of Astro's image optimization features, it's recommended to store your images in the src/ directory instead.

However, if you choose to keep the image in the public/ folder, remember that you need to specify the width and height attributes when using the <Image /> component, as Astro cannot analyze files in the public/ folder to infer these dimensions automatically.

For more information on handling images in Astro, you can refer to the Images Guide in the Astro documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@unreal vortex Kapa.ai is still learning and improving, please let me know how I did by reacting below.

unreal vortex Feb 24, 2025, 9:35 PM

#

@astro My portfolio.astro page is located in /src/pages/portfolio.astro, my example portfolio Markdown file is located in /src/pages/portfolio/example.md, and one of my hero image is located in /src/assets/example.png.

What path should I write so Astro can display example.png when the portfolio page is loaded?

#

@topaz jay My portfolio.astro page is located in /src/pages/portfolio.astro, my example portfolio Markdown file is located in /src/pages/portfolio/example.md, and one of my hero image is located in /src/assets/example.png.

What path should I write so Astro can display example.png when the portfolio page is loaded?

topaz jayBOT Feb 24, 2025, 9:36 PM

#

Let me check the knowledge base for you again. One moment! :books:

#

To display the image /src/assets/example.png on your portfolio page located at /src/pages/portfolio.astro, you need to import the image and then use it with the <Image /> component. Here's how you can do it:

First, import the image and the Image component in your portfolio.astro file:

---
import { Image } from 'astro:assets';
import exampleImage from '../assets/example.png';
---

Then, use the <Image /> component to display the image:

<Image src={exampleImage} alt="Example portfolio image" />

By importing the image this way, Astro will handle the optimization and processing of your image automatically. You don't need to specify the width and height attributes as Astro can infer these from the imported image file.

This approach is recommended for images stored in the src/ directory, as it allows Astro to optimize and transform the images during the build process. According to the Astro Images Guide, "We recommend that local images are kept in src/ when possible so that Astro can transform, optimize and bundle them."

Remember that the import path is relative to the location of your portfolio.astro file. In this case, we use ../assets/example.png because we need to go up one directory level from /src/pages/ to reach /src/assets/.

#Writing a layout with variable images

For more detailed information on working with images in content collections, you can refer to the Images in content collections section of the Astro documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

For more details on how slugs work in Astro content collections, you can refer to the Defining custom IDs section of the Astro documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

For more information on handling images in Astro, you can refer to the Images Guide in the Astro documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

For more detailed information on using images in Astro, you can refer to the Images in `.astro` files section of the Astro documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#Writing a layout with variable images

For more detailed information on working with images in content collections, you can refer to the Images in content collections section of the Astro documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

For more details on how slugs work in Astro content collections, you can refer to the Defining custom IDs section of the Astro documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

For more information on handling images in Astro, you can refer to the Images Guide in the Astro documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

For more detailed information on using images in Astro, you can refer to the Images in .astro files section of the Astro documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

For more detailed information on using images in Astro, you can refer to the Images in `.astro` files section of the Astro documentation.