Step-by-step guide to use Advance Image Focal Point Module for Sitecore 9.x

Step-by-step guide to use Advance Image Focal Point Module for Sitecore 9.x

Problem Statement:
The content author able to utilize one image with different focal point, so that no need to upload different images, if content author want to focus on left/right hand side of the image.

Solution:
The Advance Image Focal Point module is very useful module it will facilitate content author to utilize the one image with different focal point. With this module no need to upload different images.
An custom image field with focus cropping option. Allows content authors to set focal point on images and cropping is done based on defined axes.

I would like to thank SAAD AHMED KHAN (@saad_ahmed_khan), for creating Advance Image Focal Point module which helps in solving the problem.

Module:

The Advance Image Focal Point using:

1. Custom field called “Advance Image” created by extending the built-in Image field.

2. Media Request Handler – checks for the additional custom parameters (querystring) for focus cropping. The details present at https://github.com/AmitKumar-AK/sitecore-fields/blob/master/src/Sitecore.Fields/Requests/CropMediaRequest.cs

3. Image Processor – processes the image based on the passed parameters (querystring). The details present at https://github.com/AmitKumar-AK/sitecore-fields/blob/master/src/Sitecore.Fields/Processors/CropProcessor.cs

4. The following items would be deployed into WebRoot and Sitecore using the Market place module at https://marketplace.sitecore.net/en/Modules/A/Advance_Image_Field.aspx:

Website

|-- App_Config

|   |-- Include

|   |   |-- Sitecore.Framework.Fields.AdvanceImage.config

|-- Fields

|   |-- AdvanceImage

|   |   |-- css

|   |   |   |-- focuspoint.css

|   |   |   |-- helper-tool.css

|   |   |-- img

|   |   |   |-- target-selector.png

|   |   |-- js

|   |   |   |-- jquery.focuspoint.js

|   |   |   |-- jquery.focuspoint.min.js

|   |   |-- detail.html

|   |   |-- template.html

|-- bin

|   |-- Sitecore.Framework.Fields.dll

Sitecore

|-Core

|-- Sitecore

|   |-- System

|   |   |-- Field types

|   |   |   |-- Advanced Field Types

|-Master

|-- Sitecore

|   |-- System

|   |   |-- Modules

|   |   |   |-- Advance Image Module

|   |-- Templates

|   |   |-- Advance Image Module

5. Now download the updated code from https://github.com/AmitKumar-AK/sitecore-fields which is Sitecore 9.1 compatible.

6. Build the solution and deploy the latest assembly in to WebRoot\bin folder.

7. Download the ImageProcessor.dll from https://www.nuget.org/packages/ImageProcessor and deploy to WebRoot\bin folder.

8. Go to Sitecore\Core\ System\Field types\Advanced Field Types and select the Configure tab, press the Change button in the Template section, and select /sitecore/Common/Folder. 

With the help of above changes you will be able to see correct field options related to Image field in Content Editor when you will use custom “AdvanceImage” field in your custom Template:

How to use Advance Image Focal Point:

1. To use the The Advance Image Focal Point module in your Project/Solution, first you have to install the module by following the steps mentioned in step “Module”.

2. Create the custom template and use custom “Advance Image” field as a Field type. Please check the image template details at https://github.com/AmitKumar-AK/CT.SC/blob/master/src/Feature/PageContent/code/README.md

3. Create the component which will access the filed and display on screen by passing the required dimensions.

Please check the component details at 

• https://github.com/AmitKumar-AK/CT.SC/blob/master/src/Feature/PageContent/code/Controllers/PageContentController.cs

• https://github.com/AmitKumar-AK/CT.SC/blob/master/src/Feature/PageContent/code/Models/Promo/PromoContentFactory.cs

You can pass different dimension which defined at /sitecore/system/Modules/Advance Image  Module/Thumbnails/ to access particular Focal Point image like 

Utilities.GetAdvancedImageUrl(Templates._PromoItem.Fields.AdvanceImage, item, 300,150);

Where Width is 150px and Height is 300px.

4. The output of the image will be:

The cshtml file code for the promo content present at https://github.com/AmitKumar-AK/CT.SC/blob/master/src/Feature/PageContent/code/Views/PageContent/PromoContent.cshtml

How to add other dimensions:
1. By default, following Thumbnail dimensions present at /sitecore/system/Modules/Advance Image Module/Thumbnails/:
• 150x300
• 200x180
• 350x80
• 80x80

2. If you need to use another dimension for your requirement then you can add new dimension also like
80x80 and it will start reflection on the content item where AdvanceImage field being used:

New Thumbnail dimension:

Content Item:

3. To access newly created dimension in your code, you have to change the dimension, which you are passing in the code :
Utilities.GetAdvancedImageUrl(Templates._PromoItem.Fields.AdvanceImage, item, 80,80);

Where Width is 150px and Height is 80px.

Github updated for Sitecore 9.x:
Updated the original code present at https://github.com/saadahmedkhan/sitecore-fields for
• .NET Framework 4.7.1
• Sitecore Version: Sitecore.NET 9.1.0 (rev. 001564)
Updated code present at https://github.com/AmitKumar-AK/sitecore-fields

Pingback:

• Image focal point

• Siteocre image focal point

• image formed at focal point

• focal point image cropping

• focal point upside down image

• focal point for an image

• image on focal point

• image focal point js/css

• data-image-focal-point

• Sitecore image field

• Sitecore MediaManager 

Reference:

• Image Field With Focus Cropper In Sitecore

• Advance Image Module to implement Focal Point Functionality in Sitecore