RafidMuhymin/astro-imagetools

Can't syle with CSS

Closed this issue · 10 comments

kcoderhtml commented

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 commented

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 commented

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:

kcoderhtml commented

Thank you! That helps a ton!

  • 🎉1
kcoderhtml commented

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 commented

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

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

Sorry, pasted the wrong snippet. Fixed it above.

TheNaubit commented

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 commented

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 commented

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?