Add class as a standalone prop as opposed to inside of attributes

[LushawnDev]

I don't know if this will be possible for both the <Picture> and <Image> components, but for the <BackgroundImage> component, I wonder if it would be possible to be able to pass a class name to the container as direct a prop instead of through the attributes prop? This would allow the scoped CSS to still work, as described in the docs here.

This would be great for your other components too, although I can understand how that may be tricky for example for <Picture>, would you make the class attach to the image or picture tags...

Here is the current and desired syntax to clarify: Current:

<BackgroundImage
  src="/src/images/florence-2.jpg"
  tag="section"
  attributes={{ container: { class: "showcase" } }}
>

Desired:

<BackgroundImage
  src="/src/images/florence-2.jpg"
  tag="section"
  class="showcase"
>

Thanks for your work on a great Astro integration so far!

[KevinFocke]

My front dev is a little rusty & you seem to be way more knowledgeable. Trying to use this workaround for setting a grid-area attribute on a Picture, but so far it's not working. Any idea why?

Code:

<a class="card" href={`/project/${slug}`} rel="prefetch">
    <span class="title">{data.title}</span>
    <Picture
        attributes={{ container: { class: "pictureingrid" } }}
        src={data.img}
        alt={data.img_alt || ""}
        loading="lazy"
        decoding="async"
        width="100%"
        height="100%"
        objectFit="cover"
    />
</a>

Style: .pictureingrid { grid-area: 1 / 1 / 3 / 3; }

[LushawnDev]

Hey sorry for the late reply @KevinFocke , I've been away! I hope you did manage to fix this issue but just in case you didn't or for any others, I believe your attributes should be pointing to picture, not container. The container definition is for the BackroundPicture component I've made the same mistake many times as well...

Like this:

    <Picture
        attributes={{ picture: { class: "pictureingrid" } }}
        src={data.img}
        alt={data.img_alt || ""}
        loading="lazy"
        decoding="async"
        width="100%"
        height="100%"
        objectFit="cover"
    />

[KevinFocke]

@LushawnDev Thanks for the help. Unfortunately, it's not fixed yet. I think it messes up the grid somehow.

Visual before:

Code before:

<a class="card" href={`/project/${slug}`} rel="prefetch">
    <span class="title">{data.title}</span>
    <img
        src={data.img}
        alt={data.img_alt || ""}
        loading="lazy"
        decoding="async"
    />
</a>

<style>
    img {
        grid-area: 1 / 1 / 3 / 3;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .card {
        display: grid;
        grid-template: auto 1fr / auto 1fr;
        height: 11rem;
        background: var(--gradient-subtle);
        border: 1px solid var(--gray-800);
        border-radius: 0.25rem;
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        text-decoration: none;
        font-family: var(--font-brand);
        font-size: var(--text-lg);
        font-weight: 500;
        transition: box-shadow var(--theme-transition);
    }

Visual after:

Code after

<a class="card" href={`/project/${slug}`} rel="prefetch">
    <span class="title">{data.title}</span>
    <Picture
        attributes={{ picture: { class: "pictureingrid" } }}
        src={data.img}
        alt={data.img_alt || ""}
        loading="lazy"
        decoding="async"
        breakpoints={{ count: 10, minWidth: 108, maxWidth: 192 }}
        width="100%"
        height="100%"
        objectFit="cover"
    />
</a>

<style>
    .pictureingrid {
        grid-area: 1 / 1 / 3 / 3;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .card {
        display: grid;
        grid-template: auto 1fr / auto 1fr;
        height: 11rem;
        background: var(--gradient-subtle);
        border: 1px solid var(--gray-800);
        border-radius: 0.25rem;
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        text-decoration: none;
        font-family: var(--font-brand);
        font-size: var(--text-lg);
        font-weight: 500;
        transition: box-shadow var(--theme-transition);
    }

[LushawnDev]

@KevinFocke try this out, I use these as a universal reset when working with astro-imagetools and it usually fixes those kinds of issues! I believe it's because of the inline styling that it applies to picture and img elements. Give it a go and let me know if it fixes your problem.

img {
  max-width: 100%;
  display: block;
}

picture {
  display: block !important;
  height: 100% !important;
  width: 100%;
}