Alt text in an image (MVC Views)

Tim Brown

Vote:

Hi all

I'm trying to do something that I thought would be sinmple bu tisn't. I have a contentreference property with an image ui hint. I want to display this in a view with another page property that represents its alt text. I have

 @Html.PropertyFor(x => Model.CurrentBlock.MainImage, new { alt = "jellycat" })

The image comes out bu the alt text doesn't. I undetsand why - the second param is for specific functionality - custom tags.

So hiow to do it. I could write it out manually then pwerhaps put into a display template with a suitable model but then what is the best way to get the contentreference to the image url. Is there a helper availabel in the View to do this?

Please help - i'm being frustrated by a simple task

Thanks

#84691

Apr 04, 2014 13:43

Per Magne Skuseth

Vote:

You could do something like this:

  @Html.PropertyFor(x => x.Image, new { AltText = "something" })

and then in your image display template (typically image.cshtml):

  <img src="@Url.ContentUrl(Model)" alt="@ViewBag.AltText" />

#84693

Edited, Apr 04, 2014 13:57

Gabriel - Sep 23, 2022 19:29

Super helpful - thanks!

valdis

Vote:

Do you have any DisplayTemplate for `Url` model?

One of the possibility to implement this is to have a specific display template for `EPiServer.Url` property.

Page type definition:

[UIHint(UIHint.Image)]
[Display(Name = "Image url", Order = 10)]
public virtual Url ImageUrl { get; set; }

Display template (usually located at /Views/Shared/DisplayTemplates/Image.cshtml):

@model EPiServer.Url

@if (Model != null && !Model.IsEmpty())
{
	<img src="@Model" alt="@(ViewData.ContainsKey("alt") ? ViewData["alt"] : string.Empty)"/>
}

Usage in view:

@Html.PropertyFor(x => Model.CurrentBlock.MainImage, new { alt = "jellycat" })

#84694

Apr 04, 2014 14:00

Tim Brown

Vote:

Thanks everyone for your responses. I've implements Per's solution which is working nicely.

Thanks for all the help - much appreciated

#84698

Apr 04, 2014 15:31

Per Magne Skuseth

Vote:

Yay, I win!

Just kidding, Valdis ;-)

#84699

Apr 04, 2014 15:43

valdis

Vote:

Hahaha!

#84709

Apr 04, 2014 17:43

Tim Brown

Vote:

I think I'm the winner in this really. Thanks to everyone for help

#84805

Edited, Apr 07, 2014 19:05

Try our conversational search powered by Generative AI!

Alt text in an image (MVC Views)