Developer forum

HI Hans,

It is in the release notes, but further down. Check here https://www.screencast.com/t/giRXdwQtU

Best Regards,

Nuno Aguiar

Hi Hans,

It should be something like this:

/Admin/Public/Getimage.ashx?image=/Files/Images/Tidindi/Hiking%20Boots%20(2018).jpg&width=900&height=100&Crop=7&x=-86&y=90

x, y is the coordinate of the Image focal point, where x=100, y=100 is the center of the image.

Best regards,

Steffen

Correction:

x=100, y=100 is not the center of the image. x=0, y=0 should be the center of the image, and x=100, y=100 should be the upper right corner

Hi Hans

Requirements

• First enable focal point selector for paragraphs or item fields. See dump 1 and dump 2.
• Then implement in the template (see below and attached templates in zip for examples)
• Focal points will only work if you have both a width and a height and a cropping mode that requires cropping, i.e. crop=0-4 and 7 (new). Crop=5 will not use focal points as that mode will ensure that the entire image is inside the desired image box.

Find a test page here: https://doc.dynamicweb.com/admin/examples/GetImageFocalTest.html

The focal points are relative in percent to the center of the image. The center is focal 0,0. Then you can move it left/right on the x-axis compared to center. x=-100 is left edge, x=100 is right edge. Y-axis is up (y=100) and down (y=-100). So a focal point is i.e. x=-40,y=-20, meaning in the lower left square of the image.

Template tag examples

Example 1, using template tags:

@inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>

@{
    var image = GetString("ParagraphImageClean");
    var parameters = GetString("ParagraphImage.FocalPointParameters");
    var imageFocalX = GetString("ParagraphImage.FocalX");
    var imageFocalY = GetString("ParagraphImage.FocalY");
    var imageHasFocalPoint = GetBoolean("ParagraphImage.ImageHasFocalPoint");
}
<img src="/Admin/Public/GetImage.ashx?Image=@image&Format=jpg&Width=50&height=200&crop=7&@parameters" />

Example 2, using viewmodel templates:

@inherits Dynamicweb.Rendering.ViewModelTemplate<Dynamicweb.Frontend.ParagraphViewModel>
@{
    var image = Model.Image;
    var parameters = Model.GetImageFocalPointParameters();
    var imageFocalX = Model.ImageFocalX;
    var imageFocalY = Model.ImageFocalY;
    var imageHasFocalPoint = Model.ImageHasFocalPoint();
}

<img src="/Admin/Public/GetImage.ashx?Image=@image&Format=jpg&Width=50&height=200&crop=7&@parameters" />

BR Nicolai