Can't syle with CSS

[kcoderhtml]

I'm pretty sure I'm missing something, but I couldn't find anything in the docs. How would I apply CSS styles to an Img tag?

[tsxoxo]

also struggling with this. I gather it's done with the help of the attributes prop, but I would appreciate at least one explicit example showing how to add classes to a <Picture> element

[TheNaubit]

Somewhat late but for me this worked:

Let's say I want to add a rounded-md class to the resulting img element inside the Picture component. Then I would do:

<Picture attributes={{ img: { class: "rounded-md" } }} alt="" src={imgSrc} />

For an Image component, it would be the same:

<Image attributes={{ img: { class: "rounded-md" } }} alt="" src={imgSrc} />

Or if you prefer to set the style attribute:

<Image attributes={{ img: { style: "border-radius: 0.5rem;" } }} alt="" src={imgSrc} />

Sources:

• https://astro-imagetools-docs.vercel.app/en/components/Picture#attributes
• https://astro-imagetools-docs.vercel.app/en/components/Img#attributes

[kcoderhtml]

Thank you! That helps a ton!

[kcoderhtml]

Justed tested and it doesn't seem to work or be referenced as an option in the documentation:

declare interface Attributes {
  picture?: Record<any, any>;
  style?: Record<any, any>;
  link?: Omit<Record<any, any>, "as" | "rel" | "imagesizes" | "imagesrcset">;
  img?: Omit<
    Record<any, any>,
    | "src"
    | "alt"
    | "srcset"
    | "sizes"
    | "width"
    | "height"
    | "loading"
    | "decoding"
  >;
}

[TheNaubit]

Could you share the code you are using? I am using right now exactly the code I shared

[kcoderhtml]

<Picture attributes={{ img: { class: "profile-pic" } }} alt="" src="/assets/profile-pic.webp" alt="Headshot of Kieran Klukas" />

[kcoderhtml]

Sorry, pasted the wrong snippet. Fixed it above.

[TheNaubit]

I don't know what you are trying to modify (which CSS properties) with profile-pic but keep in mind the Picture component creates a <picture> element with an <img> element inside. The code img: { class: "profile-pic" } is adding that class to the img component (you should see it in the dev tools) but you might want to apply that CSS to the picture component itself. In that case, you should use picture: { class: "profile-pic" }

[kcoderhtml]

Thanks, I tried a bunch of things to try and get it to style, but it didn't work. I'm closing this for now as it doesn't seem to be an issue with the code but rather user error on my part.

[Good-Shepherd-Collective]

I've also tried this several times, and I too, can't get it to work.

<Picture src={gscPosts[1].jetpack_featured_media_url} attributes={{ img: { class: "blog__thumbnail" } }} alt={gscPosts[1].title.rendered} />

This should pass the class="blog__thumbnail" to the img take correct?