Lightweight 360 Panorama Image Viewer

01

Requirements

• WordPress 5.8 or newer.
• PHP 7.4 or newer.
• Gutenberg, Elementor, the Classic Editor or WPBakery.
• A current browser with WebGL for interactive rendering.

02

Install the plugin

1. Open Plugins → Add New Plugin → Upload Plugin.
2. Select the SiteFuse versioned ZIP.
3. Choose Install Now, then Activate Plugin.

WordPress will offer to replace an older release because every version keeps the same internal plugin folder and main file.

03

Add a viewer in your editor

The viewer works across the main WordPress editing workflows. In Gutenberg, Elementor and the Classic Editor, add the shortcode shown below. WPBakery users can choose the dedicated element.

Gutenberg

1. Add a Shortcode block to the page or post.
2. Paste the viewer shortcode and replace the image ID.

Elementor

1. Drag Elementor’s Shortcode widget into the layout.
2. Paste the viewer shortcode and replace the image ID.

Classic Editor

1. Paste the viewer shortcode into the page or post content.
2. Preview the page to check its starting view and height.

WPBakery

1. Choose Add Element, then open the Content category.
2. Select 360° Panorama Image Viewer.
3. Choose a Media Library image, adjust the settings and save.

04

Prepare the image

Use an equirectangular panorama with a 2:1 width-to-height ratio, such as 6000 × 3000 pixels. JPEG or WebP usually provides the best balance of quality and transfer size.

A separately hosted image or CDN must provide a suitable CORS response header for WebGL. Very large images are reduced in the browser when they exceed the device’s supported texture size.

05

Viewer settings

06

Visitor controls

• Drag with a mouse or one finger to look around.
• Use wheel, pinch, zoom buttons or + / − keys to zoom.
• Focus the viewer and use arrow keys to change direction.
• Press F or use the fullscreen button to enter fullscreen.

Automatic movement pauses during interaction, while off-screen, while the browser tab is hidden and when the visitor prefers reduced motion.

07

Shortcode

Use the shortcode directly in Gutenberg, Elementor or the Classic Editor. WPBakery creates the same shortcode automatically.

[sitefuse_360_panorama image="123" max_width="100%" height="500px" mobile_height="320px" enable_fullscreen="yes" enable_zoom="yes" initial_fov="75" auto_rotate="yes" auto_rotate_speed="2"]

The image value must be a WordPress Media Library attachment ID.

08

Performance and privacy

The plugin has no third-party JavaScript libraries, icon fonts, settings pages, telemetry, cookies, stored options or external service calls. Its CSS and JavaScript load only on pages containing the viewer shortcode, whichever editor created the page.

Images are lazy-loaded shortly before entering the viewport. Automatic animation stops when it cannot be seen, and rendering resolution is capped to avoid excessive GPU use.

09

Troubleshooting