Try our conversational search powered by Generative AI!

How to get ALT text from episerver - ImageData


I have a Property on a Page type that looks like this:

[AllowedTypes(new[] { typeof(ImageFile) })]
public virtual ContentReference OverviewImage { get; set; }

And this is what my ImageFile class looks like:

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

     Public override Blob Thumbnail
     get { return BinaryData; }

In my razor view this is how I render this image:

This works - but how do I get the Description property from the ImageFile class? I want to use this property for the alt tag of the image.



Jun 29, 2018 16:03

Either you cheat a bit and put a bit of logic in the view. A better way is to handle that in the controller and store it in a viewmodel. For the alloy demo site that would look like this in the controller for the contact block:

//View model class
public class ContactBlockModel
        //Either use a new viewmodel class for image (instead of reference) or cheat a little and use the imagefile class directly. 
        public ImageFile Image { get; set; }
        public string Heading { get; set; }
        public string LinkText { get; set; }
        public IHtmlString LinkUrl { get; set; }
        public bool ShowLink { get; set; }
        public ContactPage ContactPage { get; set; }

//Controller needs to set the viewmodel and the image file property

public override ActionResult Index(ContactBlock currentBlock)
            ImageFile image = null;
                image = _contentLoader.Get<ImageFile>(currentBlock.Image);
            var model = new ContactBlockModel
                    Heading = currentBlock.Heading,
                    Image = image

            //As we're using a separate view model with different property names than the content object
            //we connect the view models properties with the content objects so that they can be edited.
            ViewData.GetEditHints<ContactBlockModel, ContactBlock>()
                .AddConnection(x => x.Heading, x => x.Heading)
                .AddConnection(x => (object)x.Image, x => (object)x.Image);

            return PartialView(model);

Then you need a new view in Views/Shared/DisplayTemplates/ImageFile.cshtml to display the result like:

@model EpiserverSite4.Models.Media.ImageFile
@if (Model != null)
<img src="@Url.ContentUrl(Model.ContentLink)" alt="@Model.Description" />

Something like that? You can make it a little prettier by using your own viewmodel for the image class or cheat a little like I do above and use the ImageFile class directly. It's a matter of taste.

Jun 29, 2018 16:51

If you have a multi-language website, you would probably want to have image alt. text in several languages. ImageData and its properties don't have support for several languages. There are some hacks here and there...

So we usually create an image block, upload an image only once, and do localization in blocks.

Something like this:

[ContentType(GUID = "...", AvailableInEditMode = false)]
public class ImageBlock : BlockData
        GroupName = SystemTabNames.Content,
        Order = 100)]
    public virtual ContentReference ImageUrl { get; set; }

        GroupName = SystemTabNames.Content,
        Order = 200)]
    public virtual string AltText { get; set; }


ImageBlock is then used as a local block/property instead of ContentReference.

Edited, Jun 29, 2018 17:13
* 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.