Help understanding using this with RTE images

[Eaglef90]

I am trying to figure out how to make images inserted into the Umbraco RTE responsive and I think your package can do this but the only documentation on using your package with the RTE just says"

@SlimsyService.ConvertImgToResponsive(Model, "richTextBody", renderPicture:true, pictureSources: new []{"webp"})

but I have no idea what any of those parameters are, what options they have, and how to adjust the width/height of displayed images depending on resolution with that. Is there clear documentation on how to use this with RTE or is this not the right package for me to be looking at?

[Jeavon]

Hello @Eaglef90

Yes it can do that indeed.

Taking that example, if you had a RTE property named RichTextBody, you would probably render it like this @Model.RichTextBody

So to convert images within that RTE to <picture> you would update in the cshtml file to @SlimsyService.ConvertImgToResponsive(Model, "richTextBody", renderPicture:true, pictureSources: new []{"webp"})

The last parameter is the additional formats you want to render, mostly the example of webp is what people want.

This would render source sets in the same way as using the Slimsy Tag Helper and will allow LazySizes to select the best size based on the computed display based on your css.

If you run the demo site, the "content pages" show this in action - https://github.com/Jeavon/Slimsy/blob/dev-v5/src/Slimsy.TestSite/Views/contentPage.cshtml#L28

Hope that helps you!

[Eaglef90]

Thank you for your response. How would I specify the source attributes for the picture tag? Like setting min/max widths for media and the srcset? Like right now when I hard code a picture to display I use

<picture class="newsHeadlineImage">
    <source media="(min-width: 1024px)" srcset="@Url.GetCropUrl(newsArticle.article.HeadlineImage, width: 423, height: 238, imageCropMode: ImageCropMode.Max)">
    <source media="(max-width: 1023px)" srcset="@Url.GetCropUrl(newsArticle.article.HeadlineImage, width: 160, height: 90, imageCropMode: ImageCropMode.Max)">
    <img src="" alt="@newsArticle.article.Headline Headline Image" decoding="async" />
</picture>

[Jeavon]

@Eaglef90 when using LazySizes.js with Slimsy you do not need to specify like this as it calculates the sizes based on computed space. You ensure your image is sized by your css using percentages and it will work out the best fit, dpi etc

[Jeavon]

It might help to have a look at the source on the demo page at https://slimsydemo.crumpled-dog.com/people/