DOLBAEB
06/14/2024, 6:52 AMcsharp
media.Content.GetCropUrl(width, height, quality: quality, imageCropMode: Umbraco.Web.Models.ImageCropMode.Stretch, preferFocalPoint: preferFocalPoint) + "&format=webp"
with preferLocalPoint set to true
and the second is to use the Url.GetCropUrl() method:
csharp
<div class="hero hero--small">
@if (heroImage != null)
{
<picture class="hero__img">
<source srcset="@Url.GetCropUrl(heroImage, 2000, preferFocalPoint: true)" media="(min-width: 1900px)">
<source srcset="@Url.GetCropUrl(heroImage, 1900, preferFocalPoint: true)" media="(min-width: 1800px)">
<source srcset="@Url.GetCropUrl(heroImage, 1800, preferFocalPoint: true)" media="(min-width: 1700px)">
<source srcset="@Url.GetCropUrl(heroImage, 1700, preferFocalPoint: true)" media="(min-width: 1600px)">
<source srcset="@Url.GetCropUrl(heroImage, 1600, preferFocalPoint: true)" media="(min-width: 1500px)">
<source srcset="@Url.GetCropUrl(heroImage, 1500, preferFocalPoint: true)" media="(min-width: 1400px)">
<source srcset="@Url.GetCropUrl(heroImage, 1400, preferFocalPoint: true)" media="(min-width: 1300px)">
<source srcset="@Url.GetCropUrl(heroImage, 1300, preferFocalPoint: true)" media="(min-width: 1200px)">
<source srcset="@Url.GetCropUrl(heroImage, 1200, preferFocalPoint: true)" media="(min-width: 1100px)">
<source srcset="@Url.GetCropUrl(heroImage, 1100, preferFocalPoint: true)" media="(min-width: 1000px)">
<source srcset="@Url.GetCropUrl(heroImage, 1000, preferFocalPoint: true)" media="(min-width: 900px)">
<source srcset="@Url.GetCropUrl(heroImage, 900, preferFocalPoint: true)" media="(min-width: 769px)">
<source srcset="@Url.GetCropUrl(heroImage, 768, preferFocalPoint: true)" media="(min-width: 600px)">
<source srcset="@Url.GetCropUrl(heroImage, 600, preferFocalPoint: true)" media="(min-width: 500px)">
<source srcset="@Url.GetCropUrl(heroImage, 500, preferFocalPoint: true)" media="(min-width: 400px)">
<source srcset="@Url.GetCropUrl(heroImage, 400, preferFocalPoint: true)" media="(min-width: 300px)">
<img class="hero__img" alt="" src="@Url.GetCropUrl(heroImage, 800, preferFocalPoint: true)" />
</picture>
}
The return of the method:
src="/media/yg0lyqpt/albert_mathier_chais_web.jpg?center=0.024024024024024024,0.066&mode=crop&width=800&rnd=133628250885630000"A hub and casual space for you to interact with fellow community members and learn more about Umbraco!
Powered by