How do I add thumbnail images to the blog posts?

[reignbeox]

I'm really sorry that I have to make this post but I'm a noob in website stuff and am trying to fumble through this.

For two and a half weekends now I've been trying to get thumbnail images to show up on the blog page like in this example from the recipe blog.

I understand that the index.js says how stuff is rendered on the page and looking at the tambouille-blog code I tried my hardest to copy bit by bit but I always get some sort of error. Occasionally I manage to fix them but then ultimately get stuck at some point and need to revert.
Nonetheless, I can't imagine it to be that much of a hassle. It's just about adding a thumbnail after all no?

Don't really know who to ask or where to look for answers except here.

tldr: how do I add a thumbnail image to the blog post list?
like so:

[vahidtakro]

tldr: how do I add a thumbnail image to the blog post list?

simply add these lines to your ListLayout.js / index.js file after </time></dd> line:

    {images ? (
      <Image
        className="rounded object-cover"
        src={`/_next/image?url=${images}&w=640&q=20`}
        slug="slug"
        title={`${title}`}
        alt={`${title}`}
        layout="responsive"
        placeholder="blur"
        blurDataURL={`/_next/image?url=${images}&w=16&q=1`}
        width={640}
        height={400}
      />
    ) : null}

you should also include images into your frontMatter:
const { slug, date, title, summary, tags, images } = frontMatter

and import nextjs Image Component at top of the page(s):
import Image from 'next/image'

for more information: next/image

[reignbeox]

@aloisdg Ah I see. makes a bit more sense to me now then.
Actually, have a copy of your project right here trying to decipher parts and bits of it.

Do you remember where you set the padding for the images?
Every value that I change either changes the spacing between the articles or the length of the right-hand text

/

[reignbeox]

Ah I got it. gap-2!

[aloisdg]

For rwd purpose, I use gap-2 xl:gap-4 :) source

[vahidtakro]

Would you also perhaps know where I can edit the padding inside of the containers? The image sits a bit too snug on the text.

You may need to read how Tailwind works. so then you can modify the "className" in the way you want.

[reignbeox]

Would you also perhaps know where I can edit the padding inside of the containers? The image sits a bit too snug on the text.

You may need to read how Tailwind works. so then you can modify the "className" in the way you want.

I agree. Now that I managed to fix this one issue, I started looking into other resources to learn from.
One of course is the tailwind documentation but I also found the tailwind examples where stuff is a little bit more descriptive.

Thanks for the help people!