Try our conversational search powered by Generative AI!

Issue related to Alt tag in TinyMCE

Vote:
 

Hi Team,

We added the image(Below ImageFile) in media and drag and dropped the image in the XHTML string editor. The problem is the image "alt" value is the name image file by default.

public class ImageFile : ImageData
    {
        [Display(
             Name = "Alternate text",
             Description = "Description of the image",
             GroupName = SystemTabNames.Content,
             Order = 10)]
       public virtual string Description { get; set; }
}

.

   

<img src="/EPiServer/CMS/Content/globalassets/sample-img.png,,7719?epieditmode=False" alt="sample img.png" width="308" height="164" />

 

How to use the "Description " property value as the image "alt"  value in the editor when drag and drop an image?

#259133
Edited, Jul 19, 2021 18:09
Vote:
 

You need to scan and replace the HtmlFragment. Checking if it's an image and then loading the alt text and replacing it. I've knocked up a demo no alloy that works, just use this extension instead of ToHtmlString when to get the string of the XHtmlStirng for your ViewModel / In View. Replace the namespace in this extension class with whatever your project is.

using System.Text;
using System.Web.Mvc;
using EPiServer;
using EPiServer.Core;
using EPiServer.Core.Html.StringParsing;
using EPiServer.Web.Routing;
using FrontEnd.Models.Media;

namespace FrontEnd.Business
{
    public static class HtmlStringExtensions
    {
        /// <summary>
        /// Parses the XhtmlString for Image tags and sets them to lazy load
        /// </summary>
        public static string FormatHtmlString(this XhtmlString html)
        {
            var stringBuilder = new StringBuilder();

            var altText = string.Empty;

            foreach (var htmlFragment in html.Fragments)
            {
                var value = htmlFragment.GetViewFormat();

                if (htmlFragment is UrlFragment urlFragment)
                {
                    if (!string.IsNullOrWhiteSpace(urlFragment.InternalFormat))
                    {
                        var content = UrlResolver.Current.Route(new UrlBuilder(htmlFragment.InternalFormat));

                        if (content is ImageFile imageData)
                        {
                            altText = imageData.Description;
                        }
                    }

                }
                else
                {
                    if (value.Contains("alt=") && !string.IsNullOrWhiteSpace(altText))
                    {
                        var indexOfAlt = value.IndexOf("alt=\"") + 5;
                        var startString = value.Substring(0, indexOfAlt);

                        var restOfString = value.Substring(indexOfAlt);
                        var closingIndex = restOfString.IndexOf("\"");

                        var endString = restOfString.Substring(closingIndex);

                        value = startString + altText + endString;
                        altText = string.Empty;
                    }
                }

                stringBuilder.Append(value);
            }

            return stringBuilder.ToString();
        }
    }
}
#259174
Edited, Jul 20, 2021 9:21
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.