Developer forum

Forum » Dynamicweb 10 » Using focal points on images

Using focal points on images

E-mail notifications
Adrian Ursu Dynamicweb Employee
Adrian Ursu
Reply
Posted on 02/06/2025 09:50:09

Hi guys,

I am trying to figure out how to use the focal point and aspect ratio set in images.
I am looking at the image generated for this link:

https://diventura.ignite.commergent.ro/admin/public/GetImage.ashx?width=1200&quality=95&x=-98&y=-96&format=WebP&image=/Files/Images/Diventura/General/Hero1.png

The display in the paragraph seems to take into consideration the focal point but the image is not cropped it is still the original image and the display is just a position of the  background:
style="object-position: 40% 2%"

Is this how it is supposed to work? Is there any plan to include the focal point and aspect ratio in the resize logic?

Thank you,
Adrian
 


Replies

 
Nicolai Pedersen Dynamicweb Employee
Nicolai Pedersen
Posted on 02/06/2025 13:12:52
Reply

Hi Adrian

You can do in 2 ways - either provide the ratio in the 'ratio' parameters to GetImage:

https://diventura.ignite.commergent.ro/admin/public/GetImage.ashx?width=1200&quality=95&x=-98&y=-96&format=WebP&image=/Files/Images/Diventura/General/Hero1.png&ratio=32/2

Or if you are using item types, use an ImageFileViewModel and the extension method that will take care of creating the right GetImage link for you.

@if (Model.Item.TryGetImageFile("Image", out ImageFileViewModel image)) {
<figure class="d-flex align-items-center justify-content-center m-0 position-relative">
@if (image.IsSvg()) {
@ReadFile(image.Path)
@if (Model.Item.TryGetLink("ImageLink", out LinkViewModel link)) {
<a href="@link.Url" class="stretched-link" title="@link.Url"></a>
}
}
else 
{
<img src="@image.ToGetImage()" class="img-fluid" alt="@Model.Item?.GetString("AltText")" />
@if (Model.Item.TryGetLink("ImageLink", out LinkViewModel link)) {
<a href="@link.Url" class="stretched-link" title="@link.Url"></a>
}
}
</figure>
}

https://github.com/dynamicweb/Swift/blob/main/Files/Templates/Designs/Swift-v2/Paragraph/Swift-v2_TextAndImage/ImageTopTextCenter.cshtml#L4-L19

And here are the imageviewmodel extension methods:
https://doc.dynamicweb.dev/api/Dynamicweb.Frontend.ImageFileViewModelExtensions.html

 

You must be logged in to post in the forum