Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Peter Cort Larsen 3 posts 44 karma points
    Jun 17, 2021 @ 08:52
    Peter Cort Larsen
    0

    Localized alt texts

    Hi anyone have implemented localized alt texts in Umbraco 8. Both in the media section and when adding an image using RTE?

    Any guidelines/ideas?

  • Peter Cort Larsen 3 posts 44 karma points
    Jun 18, 2021 @ 09:49
    Peter Cort Larsen
    100

    For a start, alt texts could be added like this, to the image.

    Note: remember to register the component in a composer

    using System;
    using Umbraco.Core.Composing;
    using Umbraco.Core.Models;
    using Umbraco.Core.Services;
    using System.Collections.Generic;
    
    namespace Website.Services
    {
        public class MediaType: IComponent
        {
            private readonly IMediaTypeService _umbracoMediaTypeService;
    
            private readonly IDataTypeService _dataTypeService;
    
            private readonly ILocalizationService _locationService;
    
            public MediaType(IMediaTypeService mediaTypeService, IDataTypeService dataTypeService, ILocalizationService locationService)
            {
                _umbracoMediaTypeService = mediaTypeService;
    
                _dataTypeService = dataTypeService;
    
                _locationService = locationService;
            }
    
            public void Initialize()
            {
                InitialiseImageMediaType(); 
            }
    
            public void Terminate()
            {
                throw new NotImplementedException();
            }
    
            private void InitialiseImageMediaType()
            {
                IMediaType imageType = _umbracoMediaTypeService.Get("Image");
    
                if (imageType != null)
                {
                    IEnumerable<ILanguage> languages = _locationService.GetAllLanguages();
    
                    foreach (var lang in languages)
                    {
                        //Add alt text for each language
                        var TextstringDataType = _dataTypeService.GetDataType("Textstring");
                        PropertyType myProperty = new PropertyType(TextstringDataType, "alt_" + lang.IsoCode);
                        myProperty.Name = "Alternate text for " + lang.CultureName;
                        imageType.AddPropertyType(myProperty, "Image");
                        _umbracoMediaTypeService.Save(imageType);
    
                    }
                }
            }  
        }
    }
    

    This gives me these alt texts, depenind on my langs enter image description here

  • Marc Love (uSkinned.net) 447 posts 1789 karma points
    Jun 18, 2021 @ 14:36
    Marc Love (uSkinned.net)
    0

    Another solution is to have a single field for your alternative text and use Umbraco dictionary to hold all translations.

    You could then have a helper function which gets the value from dictionary if the value is identified in a certain way:

    public string GetAlternativeText(string altText)
    {
        string output = altText;
    
        if (altText.Length >= 3)
        {
            if (altText[0].ToString() == "[" && altText[altText.Length - 1].ToString() == "]")
            {
                string dictionaryLabel = altText.Substring(1, altText.Length - 2);
                output = Umbraco.GetDictionaryValue(dictionaryLabel);
            }
        }
    
        return output;
    }
    

    In this example if the value of alt text is surrounded by square brackets it will look for the corresponding dictionary value.

    [MYALTTEXT]

    would result in MYALTEXT being searched in dictionary and returning the corresponding value for the language that the current site is running under.

  • Mikael Axel Kleinwort 142 posts 487 karma points c-trib
    Apr 30, 2023 @ 10:12
    Mikael Axel Kleinwort
    0

    All the suggested workarounds are just - work arounds. I would love to see this as a regular Umbraco feature. Any multi lingual website will need this one way or another.

  • Roslyn Wilson 3 posts 72 karma points
    May 22, 2023 @ 16:30
    Roslyn Wilson
    0

    Does anyone have a working example of this for Umbraco 10?

  • Marc Goodson 2155 posts 14408 karma points MVP 9x c-trib
    May 22, 2023 @ 17:04
    Marc Goodson
    0

    Hi Mikael

    There is a package here:

    https://marketplace.umbraco.com/package/our.umbraco.multilanguagetextbox

    Which is super useful for language specific alt text on media items...

    And a broader conversation on loving to see this in the core here:

    https://github.com/umbraco/Umbraco-CMS/issues/8432

    regards

    Marc

Please Sign in or register to post replies

Write your reply to:

Draft