Sign in Register
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Preetee Gangoosirdar 56 posts 257 karma points
    Jun 03, 2016 @ 10:00
    Preetee Gangoosirdar
    0

    Get the width and height of an image cropper as per https://gtmetrix.com/specify-image-dimensions.html

    Using Umbraco And Getting Started
    Umbraco 7

    Happy Friday everyone,

    I am looking a way to display the height and width inside the img tag for a cropped image , following this article https://gtmetrix.com/specify-image-dimensions.html 

    <img  src="@img.GetCropUrl("umbracoFile", "Usp Landscape Thumbnail")" alt="@heading" />

    I have tried to place the dimension attributes i.e width and height with the static values of the image cropper , but on inspect the img tag element neither of them appears.

      <img  src="@img.GetCropUrl("umbracoFile", "Usp Landscape Thumbnail")" alt="@heading" width="500" height="312" />

    However if i place a rel attribute, on inspecting the img tag, the rel attributes does appear

        <img  src="/media/17038/underwater_121.jpg?crop=0,0.06399999999999996,0,0&amp;cropmode=percentage&amp;width=500&amp;height=312&amp;rnd=131069157070000000" alt="Water sports Activities"  rel="test" />

    Thanks you very much for kind responses and help,

    Copy Link
  • Jordan 24 posts 182 karma points
    Jun 03, 2016 @ 10:30
    Jordan
    0

    Hey Preetee,

    If you would like to specify the dimensions you could try the following code:

    <img src="@Url.GetCropUrl(Model.Content, propertyAlias: "umbracoFile", height: 300, width: 400)" />

    If the image cropper data type is placed directly on the node being rendered. However if the image cropper is being used from the media section you will first have to access the media content, ie:

    @{
     var imageNode = Umbraco.TypedMedia(Model.Content.GetPropertyValue("umbracoFile"));
}
<img src="@Url.GetCropUrl(imageNode, propertyAlias: "image", height: 300, width: 400)" />

    If you have a crop size specified in the backend then you can change the hard coded crop to something like this:

    <img src="@Url.GetCropUrl(imageNode, "image", "CropAlias")" />

    be sure to change the "image" out with the alias stored against the image cropper.

    Hope this helps :) (this method also only works in umbraco version 7.3.5+)

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft