How to have semi-dynamic list of images inside a Astro collection

Question

How to have semi-dynamic list of images inside a collection?

I was almost sure it would not work but did try it anyway... (Importing the photos inside a generated route

interface Props {
  entry: CollectionEntry<'project'>;
}

export async function getStaticPaths() {
  const work = await getCollection('project', entry => !entry.data.hidden);
  return work.map(entry => ({
    params: { slug: entry.slug },
    props: { entry },
  }));
}

const { slug, data, render } = Astro.props.entry;
const { Content } = await render();

const { slug, data, render } = Astro.props.entry;

const allPhotos = await Astro.glob('../../content/project/*/photo/*.jpg');
const photos = allPhotos.filter(module => module?.default?.src?.includes(`project/${slug}`));

The error:

Missing height attribute for /src/content/project/vstavačová/photo/115929-realizace.jpg?origWidth=4608&origHeight=2592&origFormat=jpg. When using remote images, both dimensions are always required in order to avoid CLS.
  Hint:
    If your image is inside your `src` folder, you probably meant to import it instead. See the Imports guide for more information https://docs.astro.build/en/guides/imports/#other-assets.

How to have semi-dynamic list of images inside a Astro collection

0 Answers0