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

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 src=#Model.ContentItem.Product.Images.FirstMediaUrl />
</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>