This article will demonstrate how to enable Panoramic View for the ShortPoint Image Design Element, allowing you to create an interactive page for users.
Here is an example of how Panoramic View can be applied on your page:
Prerequisites
- You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
- You must have an existing Image Design Element on your page.
- The image you upload must be an equirectangular panoramic image.
Step-by-step tutorial
Follow the steps below to learn how to turn on Panoramic View:
Step 1: Edit the Image Design Element
Go to the SharePoint page with the Image Design Element and click Edit:
Then, click the pencil icon:
Click the Image tag and select the cogwheel icon to open the Settings window:
Step 2: Upload a panoramic image
Then, in the Design tab, click the folder icon and select an equirectangular panoramic image to replace the image you currently have:
NOTE: The image you choose must be an equirectangular panoramic image. Otherwise, the Panoramic View option will not look as effective. Here's an examples: image.
Step 3: Enable Panoramic View
Scroll down and turn on Panoramic View:
(Optional) Toggle on Show Panoramic Controls to add a zoom-in, zoom-out, and full-screen buttons at the upper left side of the image:
(Optional) Toggle on Show Partial Panoramic Settings if you need to adjust the maximum horizontal view, vertical view, and the focal point of the image (vertical offset). It has the following options:
- Horizontal Area of View - allows you to limit the extent to which the user can rotate the image horizontally. Values can be from 90 to full 360 degrees.
- Vertical Area of View - allows you to limit the extent to which a user can rotate the image vertically. Values can be from 45 to 180 degrees.
- Vertical Offset - allows you to fix the image display If your image does not show a balanced horizon. Values can be +-90 degrees.
NOTE: For more information about other Image features, check out How to Customize the Image Design Element.
Step 4: Insert and Save
Once you are satisfied with how your image looks, click the green checkmark:
Then, click Save to keep your progress:
That’s it! You now have an interactive panoramic image on your SharePoint page. Enjoy adding these images to your page.
Related Articles: