Search code examples
c#asp.net.netumbraco7archetypes

ASP.Net Display image in view using Umbraco CMS (Archetype)


So I'm using Umbraco CMS with Archetype and trying to get an image property to display on the frontend. I have it displaying my other 3 fields as per attached image but I'm struggling to show it for the mediaitem, what am I doing wrong

// HomeController.cs

    public class HomeController : SurfaceController {
       public ActionResult RenderTheGroup()
    {
        List<FeaturedItem> model = new List<FeaturedItem>();
        IPublishedContent homepage = CurrentPage.AncestorOrSelf(1).DescendantsOrSelf().Where(x => x.DocumentTypeAlias == "home").FirstOrDefault();
        ArchetypeModel featuredItems = homepage.GetPropertyValue<ArchetypeModel>("featuredItemList");

        foreach(ArchetypeFieldsetModel fieldset in featuredItems)
        {
            int imageId = fieldset.GetValue<int>("image");
            var mediaItem = Umbraco.Media(imageId);
            string image = mediaItem.Url;               

            model.Add(new FeaturedItem(
                fieldset.GetValue<string>("name"), 
                fieldset.GetValue<string>("paragraph"), 
                fieldset.GetValue<string>("link"),
                image
                ));
        }

        return PartialView(PARTIAL_VIEW_FOLDER + "_TheGroup.cshtml", model);
    }
}

// Model - FeaturedItem.cs

    public class FeaturedItem
{
    public string Name { get; set; }
    public string Paragraph { get; set; }
    public string Image { get; set; }
    public string LinkUrl { get; set; }

    public FeaturedItem(string name, string paragraph, string image, string linkUrl)
    {
        Name = name;
        Paragraph = paragraph;
        Image = image;
        LinkUrl = linkUrl;
    }
}

}

// View

        <div class=" col-md-3">
            <div class="thumbnail">
               @RenderFeaturedItem(@Model[0], null)
            </div>
        </div>
        @helper RenderFeaturedItem(FeaturedItem item, string extraClass)
        {
                <img src="@item.Image" alt="">
                <div class="">
                    <div class="caption">
                        <h4>
                            <a target="_blank" href="@item.LinkUrl">@item.Name</a>
                        </h4>
                        <p>@item.Paragraph</p>
                    </div>
                    <div class="">
                        <p>
                            <a target="_blank" href="@item.LinkUrl">
                                Link here
                                <i class="fa fa-chevron-right" aria-hidden="true"></i>
                            </a>
                        </p>
                    </div>
                </div>
        }

Solution

  • I don't know if it would still be helpful to you but I solved this problem the following way:

    int imageId = fieldset.ToPublishedContent().GetPropertyValue<int>("image");
    var mediaItem = Umbraco.Media(imageId);
    string image = mediaItem.Url;