Umbraco 7 Rendering media type images

Question

Am trying to render a list of media images.

In my view I have:

View

@section pageSpecificJsBody {
    <script src="/scripts/casestudieslist.js"></script>

    <script>
        $(function () { pdms.caseStudiesList.init(); });
    </script>
}

Which is used to call a js file

The js file calls the following controller

Controller

[HttpGet]
public JsonResult List()
{
    var CaseStudyContentTypeId = Services.ContentTypeService.GetContentType("CaseStudy").Id;

    var CaseStudies = Services.ContentService.GetContentOfContentType(CaseStudyContentTypeId).Select(x => new CaseStudy { 
        BannerImage = Umbraco.Content(x.Id).GetPropertyValue("bannerimage"),              
        Url = Umbraco.Content(x.Id).Url.ToString(),
        SectorName = Umbraco.Content(x.GetValue("selectSector")).Name,   //x.GetValue("selectSector").ToString(),
        BodyTextHeading = x.GetValue("bodyTextHeading").ToString(),
        BannerHeading = x.GetValue("bannerheading").ToString() 
});

Model

public class CaseStudy
{
    public string SectorName { get; set; }
    //public int Id { get; set; }
    public string Url { get; set; }
    public string BannerHeading { get; set; }
    public string BannerImage { get; set; }
    public string BodyTextHeading { get; set; }
}

Previously the Banner Image was using a media picker so the images could be accessed through Umbraco.Content, but I have now set them all to use a custom cropper which set them to media types

My question is... how can I now set the BannerImage property to get the relevant media image?

normally I could do something similar to this in a view.

var BannerImage = Model.Content.GetPropertyValue("bannerimage");

var MediaImage = Umbraco.TypedMedia((int)BannerImage);

<source srcset="@MediaImage.GetCropUrl("desktopMax")" />

But I don't have access to the model since am in the controller, and am really stuck, am still new to Umbraco and don't yet fully understand everything, so sorry if things are not clear.

Thanks in advance

score 1 · Answer 1 · answered Nov 04 '15 at 20:55

You can get the @Umbraco helper in a lot of places (including the controller) by doing:

UmbracoHelper umbracoHelper = new UmbracoHelper(UmbracoContext.Current);

I would probably rewrite your code to look like this:

var caseStudies = from caseStudy in Services.ContentService.GetContentOfContentType(CaseStudyContentTypeId)
      let content = umbracoHelper.TypedContent(caseStudy.Id)
      let bannerImage = umbracoHelper.TypedMedia(caseStudy.GetPropertyValue("bannerimage"))
      let sector = umbracoHelper.TypedContent("selectSector")
      select new CaseStudy {
        BannerImage = bannerImage.Url,
        Url = content.Url,
        SectorName = sector.Name,
        BannerHeading = caseStudy.GetPropertyValue<string>("bannerheading"),
        BodyTextHeading = caseStudy.GetPropertyValue<string>("bodyTextHeading"
      };

Hi Sam thanks for the reply, I've done something similar which I will post up but haven't had a chance to test / work out the difference between your code and what I've used yet — Erick Bongo, Nov 05 '15 at 20:27

score 0 · Answer 2 · edited May 23 '17 at 12:01

I found this post Here, which has a good suggestion on obtaining the crop url for an image.

Here's what I've wrote to solve the issue:

Controller

   var CaseStudyContentTypeId = Services.ContentTypeService.GetContentType("CaseStudy").Id;

            var CaseStudies = Services.ContentService.GetContentOfContentType(CaseStudyContentTypeId).Select(x => new CaseStudy
            {
                BannerImage = Umbraco.TypedMedia(x.GetValue<int>("bannerimage")).GetCropUrl("umbracoFile", "mobile"),
                Url = Umbraco.Content(x.Id).Url.ToString(),
                SectorName = Umbraco.Content(x.GetValue("selectSector")).Name,   //x.GetValue("selectSector").ToString(),
                BodyTextHeading = x.GetValue("bodyTextHeading").ToString(),
                BannerHeading = x.GetValue("bannerheading").ToString()
            });

Am going to debug and test out Sams method so I can work out the difference between both examples. If anyone (or Sam) could offer suggestions as to why they believe one way could potentially be more beneficial than the other please could you give an explanation.

Thanks in advance.

You don't want to be using the Content Service to return published content as that hits the database not the cache. Use the UmbracoHelper instead. — James South, Dec 15 '15 at 06:14

Umbraco 7 Rendering media type images

2 Answers2