How to get the summery-image URL in Orchard view override

Question

I use Orchard CMS 1.10.1. I'm overriding View of a summary display type of a content type, for this, I need url of image field in display type summary.

I can get the image url itseft this way :

@Model.ContentItem.Product.Images.FirstMediaUrl

This is part of the view altenate:

<div class="col-sm-4">
      <img [email protected] />
</div>

My question is how can I get url of summary of this image? So I can replace the above url with the summary one.

Answer 1

You can do it like this:

@{
    var image = Model.ContentItem.Product.Images.MediaParts.First();
}
<div class="col-sm-4">
    @Display(BuildDisplay(image, "Summary"))
</div>

You need to display it like this because Image in Orchard is a content item, but if you want to display image url inline with resizing you can do the following:

@{
    var imageUrl = Model.ContentItem.Product.Images.FirstMediaUrl;
}
<div class="col-sm-4">
    <img src="@Display.ResizeMediaUrl(Width: 200, Height: 200, Mode: "crop", Alignment: "middlecenter", Path: imageUrl)" />
</div>

Answer 2

Instead of hardcoding using the URL, use the Placement.info to obtain the summary shape of the media item.

In your view override:

<div class="col-sm-4">
    @Display(Model.ImageSummary)
</div>

And in your Placement.info

<Match ContentType="MyContentType">
    <!-- ImageSummary is the local zone name which you then can display with
         @Display(Model.ImageSummary) in Content-MyContentType.cshtml -->
    <Place Fields_MediaLibraryPicker_Summary="ImageSummary:1" />
</Match>