astro-imagetools
astro-imagetools copied to clipboard
RafidMuhymin
Layout styles
Is there a way to stop the component inserting inline css with the image?
I'm using this to load a bg image, the layout=fill has worked, just wanted to clean it up a bit.
Something like layout="none" maybe?
👍 Sounds interesting! I will take a look at this after the v0.1.0 (planning to do it today) release.
And two questions for you too, 😅. layout=fill is different from layout=none. How did it work for your use case?
And how are loading a background image using the component? It'll help me to implement background image optimization in the plugin.
I'm just inserting the image component with absolute positioning and object-fit behind my content. [Github link] [Live Link]
I was a bit surprised after inserting the image that it didnt keep its full page proportions (hadnt seen the inline style yet).
The fill essentially worked the same, just had it all done before on css.
Hi again.
Wanted to update astro and everything else to the latest version. Found out now image-tools is also inserting style="position: relative; display: inline-block;" into the picture element.
Can i disable this too? Have no inline styles?
Yeah, you are correct @bronze, they have been added to fix a few issues and for the transition between the placeholder and the image. And now, it's become more complex to do than before. Are you facing any issues because of the added styles? If yes, then can you share any examples?
I was using the <Picture> element as a background image and had to use position: absolute !important; on my image to make it work.
i could probably just use the BackgroundPicture now, but i just wanted to have a clean output and style things myself.
That makes sense. So, does the title Layout styles still make sense? I mean both the layout styles, other inline styles, and the CSS styles too can cause issues while manually styling the picture.
"Built-in styles" might be more inclusive.
Do you think this could be an option or maybe a simplified component? Maybe this can be achieved via the API already.
The APIs that are available currently return HTML strings. So, if you want to do this you'll have to manually manipulate them. But I am serious about this feature and I will try to work on this ASAP! PR is welcome too!
Hi @RafidMuhymin ive tried just passing a "nocss" flag along with the img code to disable any css (currently working on Img and Picture. Wanted to know what you think.
(im displaying the nocss=true for debugging purposes)
https://github.com/bronze/astro-imagetools/tree/nocss
I'm also struggling a little bit here, due to the display: inline-block; being set inline on the Img component. I want to center the image, and I'm trying to use a css class to set display: block; margin: 0 auto;, but the inline styles are winning out. I can add it as a style in attributes.img, but that just feels like escalating the specificity wars, and doesn't feel very scalable.
That said, adding more options to what are already a huge set of options, feels a bit wrong. I wonder if it would be possible to use normal css classes to do the internal astro-imagetools styling, rather than inline styles, which would at least make it possible to easily override the styles while keeping a default behavior.
Hey, I'd love to know if there is any update on this? I am often finding myself battling with the inline styles in a CSS war to make the layouts work as I want.
Did you find a workaround @IanVS ?
