SaaS CMS has officially launched! Learn more now.

Image alt text when dragging and dropping an image into TinyMCE.

Vote:
 

We've recently run into an issue with a few of our CMS sites where the Alt text isn't populating when the image is dragged into the TinyMCE editor. If you click Insert -> Image and select an image, you can insert alt text. However, we like to keep our alt text with the image itself. TinyMCE does not give us an way to insert this.

We had initially tried getting alt text on as an on page publish event, but then the alt text could be changed on the image, and each page needed to be republished. Our current solution is to create an Xhtmlstring display template with MVC, and add an extension method, parse for image tags, get the content from UrlResolver, load the image, get the alt text, rewrite the Xhtmlstring, and return the result. This doesn't feel like a good practice. 

Does anyone have a good way to keep an Xhtmlstring property updated with alt text from an image file?

#224428
Jun 19, 2020 15:52
Vote:
 

Just create your own view for ImageFile, add an Alt-text-property to your Image class, and display the alt text in your view. You can have a look at my blog post that touches on this topic: https://blog.novacare.no/culture-specific-image-properties-in-episerver/

Or simply refer to a default Alloy site, there you will find the view /Views/ImageFile/Index.cshtml :

@model ImageViewModel

<img src="@Model.Url" alt="@Model.Name" title="@Model.Copyright" class="image-file" />

Just add the alt-text-property and replace @Model.Copyright with @Model.AltText and your good to go!

#224455
Edited, Jun 20, 2020 8:17
Vote:
 

Hey Tomas, thanks for the quick answer. We are able to use this successfully for images rendered via `@Html.PropertyFor()` but this doesn't work for us when it's inside of an XhtmlString.

I've created a project to demostrate the problem better. In this example project when I use the rich text editor, I can add images two different ways. Using the 'Image' button lets me enter the alt text that will be specifically for the image, which isn't ideal since the alt text should come from the image itself. Or if I drag the image directly from the Media side bar, I don't get an option and the alt text becomes the file name. Below is a copy of rendered markup with this.

    <p>Image added via "Insert &gt; Image" menu, Alt text comes from this dialog.</p>
    <p>
        <img src="/globalassets/logotype.png" border="0" alt="Alt Text from insert dialogue" />
    </p>
    <hr />
    <p>Image added by dragging from media tab. Alt text is auto populated from the name property.</p>
    <p>
        <img src="/globalassets/logotype.png" border="0" alt="logotype.png" />
    </p>

This has caused trouble in two different ways. We have decorative images that shouldn't have alt text getting "Filename.png" and graphics on multiple pages that have to be individually added or maintained for each page. 

Thanks for your time!

#227599
Sep 08, 2020 14:46
Vote:
 

I understand, have a look at this blog post, and the section about EditorDropBehavior.

https://world.episerver.com/Blogs/Linus-Ekstrom/Dates/2013/12/Customizing-the-look-and-behavior-in-the-UI-for-your-content-types/

#227600
Sep 08, 2020 14:50
Vote:
 

You could create an UIDescriptor like this, converting all images to content blocks when dropped in TinyMCE.

[UIDescriptorRegistration]
public class ImageFileUIDescriptor : UIDescriptor<ImageFile>, IEditorDropBehavior
{
    public ImageFileUIDescriptor()
    {
        EditorDropBehaviour = EditorDropBehavior.CreateContentBlock;
    }

    public EditorDropBehavior EditorDropBehaviour { get; set; }
}

...then you should be able to control markup the same way as images rendered with @Html.PropertyFor().

Some problems:
- You will loose image preview in TinyMCE
- You should probably remove image plugin in TinyMCE to stop editors from using it

#228233
Sep 21, 2020 19:59
Vote:
 

Here's my solution: https://blogs.perficient.com/2020/10/12/episerver-and-alternate-text-for-images-in-the-tinymce-rich-text-editor/ 

Basically, piggy backing off of Tomas's solution- you can create a view for XhtmlString.cshtml, and adjust the rendered results before they are sent out to the user.  You do this by looping through the XhtmlString fragments to find all that are Image based, and adjusting their resulting markup as needed.

#229328
Oct 12, 2020 19:16
Tomas Hensrud Gulla - Oct 12, 2020 19:26
Nice work!
I'm happy to provide the secret sauce ;-)
* 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.