Press Ctrl / CMD + C to copy this to your clipboard.
This post will be reported to the moderators as potential spam to be looked at
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&cropmode=percentage&width=500&height=312&rnd=131069157070000000" alt="Water sports Activities" rel="test" />
Thanks you very much for kind responses and help,
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+)
is working on a reply...
Write your reply to:
Image will be uploaded when post is submitted