Hi Ben

It's actually not easy. You can add an alt tag in the rendering to all images, but the question is where to get the content for the alt tag?

Do you want to add an editable dynamic alt tag to the CMS for each image? It's easy to add in code but quite complicated for content managers to add the text for each image.

Thanks,

Alex

Are the images named well? We usually grab the name from media as the alt tag.

Hi again guys,

Sorry it's been a while.

I have successfully added the new property to the image media type under settings, however how would I adjust how the images render on the page to include this new property?

Thank you in advance Ben

Hi Ben,

Your image will be of type IPublishedContent so you can get at the alternative text property the same way you would access a document type property:

Model.Value<string>("alternativeText")

Where Model is your image property and alternativeText is your alternative text property name alias.

Cheers,

Marc

Hey Marc, how have you been?

Thanks for the reply, the problem I have is I don't know where to add that code, would it be in a file or via the Umbraco interface?

Thanks Ben

The code that outputs your image to a web page is likely within a partial view.

If you can send me the code that is currently outputting your image I can send you the change you need to make to output the alt text.

Thanks Marc, I am trying to dig out the partial view now.

Also just in case you didn't notice it's Ben from Seven Seas Worldwide :-)

I have found the line of code which outputs the image for the pod component which is below:

<img class="@circleClass lazyload" src="@(pod.GetVortoValue<IPublishedContent>("podImage").GetUSNFixCropUrl(cropAlias: cropAlias, width: imageWidthSmall, height: imageHeightSmall))" data-src="@(pod.GetVortoValue<IPublishedContent>("podImage").GetUSNFixCropUrl(cropAlias: cropAlias))" alt="@pod.GetVortoValue("podImageAltText")">

I have tried to change:

@pod.GetVortoValue("podImageAltText")

To

Model.Value<string>("altText")

But it didn't render as expected.

Hi Ben,

Have you added a field with alias 'altText' to your image media type?

If you have, to get the alternative text value you would use:

@(pod.GetVortoValue<IPublishedContent>("podImage").GetValue("altText"))

Hi Mark

I have indeed added that field to the image media type, I will add your syntax and fingers crossed that should do it.

Thanks Ben

Hi Marc

Unfortunately I added that syntax and the page threw an error which I have listed below.

Server Error in '/' Application.
Compilation Error
Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: CS1928: 'Umbraco.Core.Models.IPublishedContent' does not contain a definition for 'GetValue' and the best extension method overload 'USNStarterKit.USNHelpers.USNStringExtensions.GetValue(Examine.SearchResult, string)' has some invalid arguments

Any ideas what's causing that error?

Thanks Ben

Thanks Marc, will try that now.

That has worked Marc, thank you!

Great, can you mark the last reply as the answer please.

No problem.

Sorry Marc, one more question, what would be the syntax to access the new "altText" property in the altText variable here:

@if (Model.value != null)
{   
    var url = Model.value.image;
    if(Model.editor.config != null && Model.editor.config.size != null){
        url += "?width=" + Model.editor.config.size.width;
        url += "&height=" + Model.editor.config.size.height;

        if(Model.value.focalPoint != null){
            url += "&center=" + Model.value.focalPoint.top +"," + Model.value.focalPoint.left;
            url += "&mode=crop";
        }
    }

    var altText = Model.value.altText ?? Model.value.caption ?? string.Empty;

    <img src="@url" alt="@altText">

    if (Model.value.caption != null)
    {
        <p class="caption">@Model.value.caption</p>
    }
}

is working on a reply...