0

Is there a way to show separate images for mobile and desktop in Sitecore Rich Text Editor.

I have an image which contains a table with more than 4 columns. It shows perfectly on a desktop. But when I check the page in mobile the image gets shrunk and the contents on the image is not readable. So Is there a way to show separate images for mobile and desktop.

  • 4
    Don't use a RichText editor to display the image. Build a component with a datasource and have fields for the responsive images. Doing it in the RTE would require a content editor with knowledge of html and responsive images. That shouldn't be something left to a content editor. Also - if you have a table of data, create that as actual content, don't put it on an image. It adds zero value to your site as an image. No SEO, is not accessible, is not responsive etc.... – Richard Seal Jan 10 '19 at 16:36
2

The way I see it, you have two options:

1. Handle it with CSS

I would recommend handling it with CSS classes. Simply add both images, but use classes to specify which displays based on the viewport size.

For example, if you use Bootstrap, you could do something like the following:

<img src="/path/to/desktop-image" alt="large image" class="hidden-xs hidden-sm"/>
<img src="/path/to/mobile-image" alt="small image" class="hidden-md hidden-lg"/>

You could simplify this for editors by adding snippets.

2. Implement custom media types (not recommended)

  1. Implement custom image media types with an extra image field (e.g. Mobile Image) so you can attach both desktop and mobile images
  2. Update the media rendering to evaluate whether the request is a desktop or mobile request and serve the image from the proper field

I don't recommend this approach because: 1. You will need to mess with system templates (or create copies of them and update configs to point to your new types, convert existing media items, etc.) 2. During media rendering, you will need to do extra processing on every media request to see if you should be showing the desktop or mobile version * Further, this approach will not support flexible responsive design because the image will be rendered when the page is loaded

1

As @Dan Sinclair said, use css classes. I had the similar tasks in several projects and I solved it by patching renderField pipeline. Possible it will helpful for you.

<pipelines>      
  <renderField>
    <processor type="namespace.RichTextFieldResponsiveImages, dll" patch:after="processor[@type='Sitecore.Pipelines.RenderField.GetFieldValue, Sitecore.Kernel']" />        
  </renderField>
</pipelines>

RichTextFieldResponsiveImages.cs

public class RichTextFieldResponsiveImages
{
    private static string ResponsiveImageClass = "img-responsive";

    public void Process(RenderFieldArgs args)
    {
        Assert.ArgumentNotNull(args, "args");
        Assert.ArgumentNotNull(args.FieldTypeKey, "args.FieldTypeKey");

        if (args.FieldTypeKey != "rich text")
            return;
        args.Result.FirstPart = ProcessHtml(args.Result.FirstPart);
    }

    private static string ProcessImage(string imageTag)
    {
        imageTag = Regex.Replace(imageTag, @"(<img[^>]*?)\s+height\s*=\s*\S+", "$1", RegexOptions.IgnoreCase);
        imageTag = Regex.Replace(imageTag, @"(<img[^>]*?)\s+width\s*=\s*\S+", "$1", RegexOptions.IgnoreCase);
        imageTag = Regex.Replace(imageTag, @"(<img[^>]*?)\s+responsive\s*=\s*\S+", "$1", RegexOptions.IgnoreCase);
        imageTag = Regex.Replace(imageTag, @"(.*style\s*=.*)(height:[0-9A-z\s]*;?)(.*)", "$1$3", RegexOptions.IgnoreCase);

        if (imageTag.IndexOf("class=", System.StringComparison.Ordinal) == -1)
        {
            return imageTag.Replace("<img", "<img class=\"" + ResponsiveImageClass + "\" ");
        }

        var matchsImageClass = Regex.Matches(imageTag, "class=[\"'](.+?)[\"']", RegexOptions.IgnoreCase);
        foreach (Match matchImageClass in matchsImageClass)
        {
            if (matchImageClass.Success && matchImageClass.Value.IndexOf(ResponsiveImageClass, System.StringComparison.Ordinal) == -1)
            {
                return imageTag.Replace(matchImageClass.Groups[1].Value, matchImageClass.Groups[1].Value + " " + ResponsiveImageClass);
            }
        }

        return imageTag;
    }

    private static string ProcessHtml(string html)
    {
        var matchsImageTag = Regex.Matches(html, "<img.+?>", RegexOptions.IgnoreCase);
        foreach (Match matchImageTag in matchsImageTag)
        {
            if (matchImageTag.Success)
            {
                html = html.Replace(matchImageTag.Value, ProcessImage(matchImageTag.Value));
            }
        }

        return html;
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.