Support for Rich Text images in Block List/Grid

[robertjf]

Hi,

I made the following extensions to enable easy support for Block List and Grid-embedded Rich Text editor images:

public static class SlimsyExtensions
{
    /// <summary>
    /// Convert img to img srcset, extracts width and height from querystrings
    /// </summary>
    /// <param name="htmlHelper"></param>
    /// <param name="publishedElement"></param>
    /// <param name="propertyAlias">Alias of the TinyMce property</param>
    /// <param name="generateLqip">Set to true if you want LQIP markup to be generated</param>
    /// <param name="removeStyleAttribute">If you don't want the inline style attribute added by TinyMce to render</param>
    /// <param name="renderPicture"></param>
    /// <param name="pictureSources"></param>
    /// <returns>HTML Markup</returns>
    public static IHtmlEncodedString? ConvertImgToResponsive(this IHtmlHelper htmlHelper, IPublishedElement publishedElement, string propertyAlias, bool generateLqip = true, bool removeStyleAttribute = true, bool renderPicture = false, string[]? pictureSources = null)
    {
        var sourceValue = publishedElement.GetProperty(propertyAlias)?.GetSourceValue()?.ToString();
        if (sourceValue is null) {
            return null;
        }

        return htmlHelper.ConvertImgToResponsive(sourceValue, generateLqip, removeStyleAttribute, renderPicture, pictureSources);
    }

    /// <summary>
    /// Convert img to img srcset, extracts width and height from querystrings
    /// </summary>
    /// <param name="htmlHelper"></param>
    /// <param name="publishedElement"></param>
    /// <param name="propertyAlias">Alias of the TinyMce property</param>
    /// <param name="generateLqip">Set to true if you want LQIP markup to be generated</param>
    /// <param name="removeStyleAttribute">If you don't want the inline style attribute added by TinyMce to render</param>
    /// <param name="renderPicture"></param>
    /// <param name="pictureSources"></param>
    /// <returns>HTML Markup</returns>
    public static IHtmlEncodedString? ConvertImgToResponsive(this IHtmlHelper htmlHelper, PublishedElementWrapped publishedElement, string propertyAlias, bool generateLqip = true, bool removeStyleAttribute = true, bool renderPicture = false, string[]? pictureSources = null)
    {
        return htmlHelper.ConvertImgToResponsive(publishedElement.Unwrap(), propertyAlias, generateLqip, removeStyleAttribute, renderPicture, pictureSources);
    }
}

Then in a Block List view we can just use this:

@Html.ConvertImgToResponsive(Model.Content, "text", renderPicture: true, pictureSources: new []{"webp"})

[Jeavon]

This looks great @robertjf

[Jeavon]

Do you want to send a PR?

[robertjf]

@Jeavon will do when I get a spare 5 minutes - maybe even now! :)

[robertjf]

@Jeavon PR #57 ready for your perusal :)

[khraibani]

@Jeavon Can this PR be merged in V3 please? As I couldn't get Rich Text editor images works within Block List. I have tried @SlimsyExtensions.ConvertImgToResponsive(Html, Model.value.ToString(), true) Doesnt seem to work, on Umbraco v8.18.8