Understanding smart images
Smart images have a number of advantages compared to regular images. While both support focal points, smart images can also be expandable, have captions with title and description, and geo-tagged to a specific location.
1. Select the blue plus sign for the section you're in and select the smartphoto widget.
2. Select the image from your computer or If you already used the image before, you can select it from your project library.
3. Select whether you want the full-screen zoom functionality by switching on/off the expandable setting.
Setting a focal point will make sure that part of the image is always in view on various screen sizes.
Title and description will be shown at the bottom of the expanded view.
If you start typing in a location, an extra map button will appear, allowing the user to view a map of the location and adjust the zoom state.
Once you're satisfied, add the smart photo.
4. Resizing the image is possible through the handlers on the corners of the image.
More settings and adjustments are possible through the image settings pallete.
Notes:
- Smart images will always take up the entire rectangle that you define and you're free to do so without the x/y scaling that regular images are limited to. Depending on how you size the image, some of it will be cropped, while keeping the focal point in view, but end users opening the image in fullscreen mode will always see the entire image.
- Smart images allow you to add high resolution images but still have a fast page load, since the inline image will be a smaller preview image and the fullscreen image that is higher resolution is dynamically loaded when the images are opened.
- If you'd like to swipe through a group of images once expanded try adding an image-group attribute to the images you'd like to include in the group. Open up the Attributes for Angular Directives palette and paste in image-group='group1'. Note that you need to change the group name for each group.