Forums

Image.cshtml => how to set to 100% screenwidth Cancel The title field is required!

1. eva.braun

   

   39 posts
   Registered:
   12 Feb 2015
   04 Apr 2018

   Link to this post

   Hi Team,
   
   I´d like to have certain pictures be resized to 100% screenwidth.
   Can you tell me what a need to add to the "Image.cshtml" template that comes per default with the MVC Image Widget?  I would need a code snipped as I´m not too familiar with cshtml.
   
   My aim is to copy and rename the template, add the 100% screenwidth to the copy, and then asign the new template via the widget interface.
   
   
   Looking forward to your help.
   Thanks!
2. mbayes@bdo.ca

   

   2 posts
   Registered:
   16 Jan 2017
   Answered

   04 Apr 2018 in reply to eva.braun

   Link to this post

   Hi Eva!
   
   I've actually come across something similar to this requirement whilst using TPC.
   
   You will need to modify the img tag inside the figure tag, as shown below:
   
   <figure>
           <img width="100%" height="@Model.ImageDisplayHeight" data-tpc-role="image-view" data-tpc-readonly-value="@("data:image/png;base64," + Model.Value)" src="@("data:image/png;base64," + Model.Value)">
           <figcaption>@Model.ImageCaption</figcaption>
   </figure>
   
   Notice the change in the width property to "100%" instead of the default. This should set the width of the image to be 100% of whatever container it is in.
   
   You can also update this in the template for both the LabelPosition of Left and Top (if required).
   
   Just a word of warning - the images, when uploaded, get compressed to a 144x144 size. If you span the width 100%, it will look blurry/pixelated potentially.
   
   I hope this helps!
   
   Thanks!
   
   Matt
   
   

   Last modified on 04 Apr 2018 16:04 by mbayes@bdo.ca
3. eva.braun

   

   39 posts
   Registered:
   12 Feb 2015
   05 Apr 2018 in reply to mbayes@bdo.ca

   Link to this post

   Hi Matt,
   
   thanks so much for your help with this!
   Could you do me a favor and post the complete code snipped as it is set in the adjusted "100%" image.cshtml?
   I´ve pasted the current snipped into my image-resize.cshtml, but it seams I´ve missed something.
   
   Thanks again,
   Eva