2

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
}
7

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

  • The .Rendered is outputting text onto the page. – ADH Oct 6 '16 at 17:07
  • 1
    @Html.Raw(item.ImageLarge.Rendered) – ADH Oct 6 '16 at 17:08
  • Yep that's right, I'll edit the answer. – Chris Sulham Oct 6 '16 at 17:09
3

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
}
  • 1
    I upvoted this because they are outputting a list of objects and likely don't need Editor support on the image field for this particular rendering. Caveat Emptor, If you render the <img /> tag yourself, you'll have to have an alternate path to render the field when Experience Editor is active. – Sergeant Sitecore Oct 6 '16 at 19:17
  • That's an excellent point. – Corey Smith Oct 6 '16 at 19:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.