Using AEM we can easily create a carousel with images or a simple banner image, but it’s hard if we want to give extra information for a point on the image. For authors to add hotspots on a particular position and to edit what information to show will be very complex and to determine the behavior of placed hotspots on responsive devices is hard. We understand this could be a pain-point for business users. Therefore, for such requirements, we developed an accelerator tool, which will help in placing hotspots on images with a lot of ease. By using the accelerator tool, we can add as many hotspots as needed, drag them to a particular position on image and save.
Goals and Objectives:
· Hotspots Accelerator tool is to add hotspots on images with a lot of ease.
· To reduce authors' work in placing hotspots on images and providing required information for each hotspot.
· Adding as many hotspots as needed, drag them wherever needed and save. After saving, the author can edit hotspots and enter needed information to show upon clicking hotspots.
· Able to show hotspot with different icons like play icon to say hotspot contains a video.
· Able to author and show content like title, description, links, videos that will show upon clicking hotspot.
· Able to delete hotspots whenever a business wants to remove it.
· Providing options for each hotspot whether to show on responsive devices (Tablets and Mobiles) or not. To maintain the same position for hotspots even when opened in responsive devices.
How the tool works
Now let us go to the AEM authoring instance and open a page, which has our Banner Carousel with Hotspots component. After adding a world map banner image, it will look like below.
By clicking on “Add Hotspot” which was displayed on the top left corner of the image, a “?” icon will be placed on an image like below.
Now we can drag and place this “?” icon hotspot wherever needed. After dragging and placing, right-click on the icon and click “Save”. By clicking “Save” the user will get alert to confirm on changing hotspot position.
Now right click and click on “Edit” to enter the information that was required to show upon clicking this hotspot. There a feature to also customize the temporary icon. Here, we are using a ‘?’ for the temporary icon, but it can be customized specifically to the requirement. The next screen shows the AEM dialog that will be populated when clicked on “Edit”.
As shown above we provided plus icon to display for hotspot and provided other details like image, title, description, links that will be displayed upon clicking hotspot. Now the edited hotspot looks like below with plus icon
Now by clicking the plus icon hotspot users can see the extra information provided by authors by editing hotspot as shown above
Similarly, we can add as many hotspots as needed
If needed we can also delete the hotspots which are not relevant anymore. To delete we can right-click on hotspot icon and click delete.
One important thing to note here the position of hotspots will not change even in responsive devices.
Source: https://labs.tadigital.com/index.php/2018/05/08/hotspots-accelerator/
No comments:
Post a Comment
If you have any doubts or questions, please let us know.