Allow users to interact with images in your SharePoint page by using panoramic images. You can now enable panoramic view settings in the ShortPoint Image Design Element and add panoramic controls for your users to experience virtual reality mode.


Here is an example:


Let us jump in and learn how to do it.



Prerequisites:

  • You have ShortPoint SPFx version 6.9.35.x or higher installed. Click here to check and download the latest available version of ShortPoint.
  • You have an equirectangular panoramic image. Here are examples: image 1, image 2, image 3

Step 1: Insert Image Design Element from ShortPoint Page Builder


Edit your SharePoint page and add a web part using the ShortPoint App. 


In Modern Page

While in edit mode, add a web part and choose the ShortPoint App. Remove the information window and click the plus sign to go to the ShortPoint Page Builder.



In Classic Page

In the edit page, go to the Insert tab and click the Insert plus sign button in the ShortPoint section to display Page Builder options.



Then select Image Design Element from Page Builder.



Step 2: Select, Upload Panoramic Image or Add URL


Load the panoramic image you will be using in the Settings tab.


Note: Using images over 8192px in width is not recommended. This can cause page performance issues and the panoramic viewer may crash.

Browse or Upload Image

If your image is already stored within the site or site collection, you can browse by clicking the folder icon and navigate to the image file in the File Picker.



You can also upload the image in a designated location in your site. It is recommended to have a folder for your site images for easy access.



Select your panoramic image and hit Open.



Add Image URL

If your image is stored in an external location, simply copy the URL and paste the link on the Image field.



Step 3: Enable Panoramic View


There are several Panoramic View settings you can use to ensure your panoramic image is displayed for optimal virtual reality experience.


Panoramic View

Slide the Panoramic View toggle on to enable it. This will allow movement of the image to view different sections of a panoramic image.



Show Panoramic Controls

Switch the Show Panoramic Controls toggle to add a zoom in, zoom out, full screen button at the upper left side of the image for additional user controls.




Show Partial Panoramic Settings 

Enable Show Partial Panoramic Settings if you need to adjust the maximum horizontal view, vertical view, and the focal point of the image (vertical offset). You can use the sliders to indicate the value or enter the value in the field.


Adjust the Horizontal Area of View to limit the extent to which the user can rotate the image horizontally. Values can be from 90 to full 360 degrees.  Do the same for Vertical Area of View to limit the extent to which a user can rotate the image vertically. Values can be from 45 to 180 degrees.


If your image does not show a balanced horizon, either the focal point is tilted up or down, use the Vertical Offset to fix the image display. Values can be +-90 degrees.



Here is a sample panoramic view with Partial Panoramic Settings:



Note: For information about other available features of the ShortPoint Image Design Element, view the article Introducing ShortPoint Image Design Element.



Step 4: Insert and Publish


You can preview your image and its settings by hitting the Preview button. Once you are satisfied by how the image will be displayed, click Insert and Publish the page.



Go ahead and explore panoramic images for your SharePoint site!


Related Articles: