Sitecore MVC - Controller Rendering - Output Image

Question

I am trying to output an image in the following code. But, I am not sure of the syntax in the View. I can type @item.ImageLarge and some intellisense pops up, but it is not clear how to get the image to display.

View:

@foreach (var item in Model.RotatorContentItems)
{
    <h2>@item.SubTitle.Text</h2>
    @item.Title.Text
}

Controller:

public ActionResult Index()
{
    var dataSourceId = RenderingContext.CurrentOrNull.Rendering.DataSource;
    var dataSource = Sitecore.Context.Database.GetItem(dataSourceId);
    var myViewModel = new MyViewModel();
    myViewModel.RotatorContentItems = dataSource.Children.Select(c => new RotatorContentItem(c)).ToList();
    return View(myViewModel);
}

Model:

public class MyViewModel
{
    public List<RotatorContentItem> RotatorContentItems { get; set; }
}

Custom Item:

public partial class RotatorContentItem : CustomItem
{

public static readonly string TemplateId = "{E493DF4A-E97E-49B5-BF9F-F70397EA8D21}";


#region Boilerplate CustomItem Code

public RotatorContentItem(Item innerItem) : base(innerItem)
{

}

public static implicit operator RotatorContentItem(Item innerItem)
{
    return innerItem != null ? new RotatorContentItem(innerItem) : null;
}

public static implicit operator Item(RotatorContentItem customItem)
{
    return customItem != null ? customItem.InnerItem : null;
}

#endregion //Boilerplate CustomItem Code


#region Field Instance Methods


public CustomTextField Title
{
    get
    {
        return new CustomTextField(InnerItem, InnerItem.Fields["Title"]);
    }
}


public CustomTextField SubTitle
{
    get
    {
        return new CustomTextField(InnerItem, InnerItem.Fields["Sub Title"]);
    }
}


public CustomImageField ImageLarge
{
    get
    {
        return new CustomImageField(InnerItem, InnerItem.Fields["Image Large"]);
    }
}


public CustomImageField ImageSmall
{
    get
    {
        return new CustomImageField(InnerItem, InnerItem.Fields["Image Small"]);
    }
}


public CustomGeneralLinkField Link
{
    get
    {
        return new CustomGeneralLinkField(InnerItem, InnerItem.Fields["Link"]);
    }
}


public CustomCheckboxField IsOverlayBlack
{
    get
    {
        return new CustomCheckboxField(InnerItem, InnerItem.Fields["Is Overlay Black"]);
    }
}


#endregion //Field Instance Methods
}

Answer 1

There are a couple ways you can do this. In the Custom Item Generator, each field has a .Rendered property you can reference which just runs the field renderer on that field. Use this if you want to run the Sitecore rendering pipeline for that field. https://github.com/Velir/Custom-Item-Generator/blob/master/Fields/BaseCustomField.cs

So for your example,

@foreach (var item in Model.RotatorContentItems)
{
    <h2>@item.SubTitle.Text</h2>
    @item.Title.Text
    @Html.Raw(item.ImageLarge.Rendered)
}

Using this approach will make the image editable in Experience Editor.

Alternately, you could just reference the url of the image and do this.

@foreach (var item in Model.RotatorContentItems)
{
    <h2>@item.SubTitle.Text</h2>
    @item.Title.Text
    <img src="@item.ImageLarge.MediaUrl" />
}

https://github.com/Velir/Custom-Item-Generator/blob/master/Fields/SimpleTypes/CustomImageField.cs

Answer 2

The CustomImageField properties (ImageLarge and ImageSmall) have a MediaUrl property that you can drop into the src attribute of an <img /> tag.

View:

@foreach (var item in Model.RotatorContentItems)
{
    <img src="@item.ImageLarge.MediaUrl" />
    <h2>@item.SubTitle.Text</h2>
    @item.Title.Text
}