This project is read-only.

Responsive Images Redux

Topics: Customizing Orchard
Feb 3, 2015 at 12:24 AM
Edited Feb 3, 2015 at 12:34 AM
I see that MediaLIbrary.Views.Parts\Image.cshtml writes out the image width and height. How do I over ride this? I want to remove the
to make the image responsive. This layout is only for full size images, right?
Where in my Theme do I copy my new template\layout?
@using Orchard.ContentManagement
@using Orchard.MediaLibrary.Models
    ImagePart imagePart = Model.ContentPart;
    var mediaPart = ((ContentItem)Model.ContentItem).As<MediaPart>();

<img width="@imagePart.Width" height="@imagePart.Height" alt="@mediaPart.AlternateText" src="@Url.Content(mediaPart.MediaUrl)" />
Feb 3, 2015 at 3:20 PM
Got this to work by adding the Image_Summary alternate. Now this projection is fully responsive!

I add a new "Carousel" and then a new Projection/Query. Like so. But is this the way I should be doing this? If I publish the new Carousel, I get the normal detail layout: /Views/Content-Carousel.cshtml

Is it better to handle the rendering via projection or by adding an alternate?

Many thanks to @jtkech, who helped me along.
Marked as answer by mattdunn on 2/3/2015 at 8:27 AM