Panorama Shortcode

Below, you’ll find a detailed guide on how to add the Panorama Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Panorama Plugin shortcode not to show or not to work correctly.

Before starting, here is an overview of the Panorama Plugin and the shortcodes it provides:

Panorama Viewer – 360 Degree Image + Video Viewer

Panorama Viewer is a versatile WordPress plugin that offers an immersive 360-degree viewing experience. It supports both images and videos, transforming your website into a virtual tour platform.

★★★★☆ (4) Active Installs: 2000+ Tested with: 6.3.2 PHP Version: 7.1

Included Shortcodes:

Panorama [panorama] Shortcode

The Panorama Viewer shortcode allows users to embed 360-degree images or videos into their WordPress site. The shortcode: [panorama] uses the post’s ID to fetch the relevant media and display it within a specified width and height. It also allows for different panorama types, including ‘image’, ‘image360’, ‘tour360’, and ‘video’. The shortcode ensures the necessary scripts and styles are enqueued for proper rendering of the panorama viewer.

Shortcode: [panorama]

Parameters

Here is a list of all possible null shortcode parameters and attributes:

• id – Unique identifier of the panorama image or video

Examples and Usage

Basic example – A simple usage of the panorama shortcode to display an image viewer for a specific post by referencing its ID.

[panorama id=1 /]

Advanced examples

Using the shortcode to display an image viewer for a specific post by referencing its ID and customizing the width and height of the viewer. The width and height are defined in the metadata of the post.

function bppiv_image_viewer( $atts ){
    extract( shortcode_atts( array(
            'id'    => null,
            'width' => '100%',
            'height' => '320px'
    ), $atts )); ob_start(); ?>
    // Rest of the code...
}

Here’s how you would use this shortcode:

[panorama id=1 width=80% height=400px /]

Another advanced example would be to use the shortcode to display different types of panoramas like image, image360, tour360, or video. The type of panorama is also defined in the metadata of the post.

function bppiv_image_viewer( $atts ){
    extract( shortcode_atts( array(
            'id'    => null,
            'type' => 'image'
    ), $atts )); ob_start(); ?>
    // Rest of the code...
}

Here’s how you would use this shortcode:

[panorama id=1 type=image360 /]

PHP Function Code

In case you have difficulties debugging what causing issues with [null] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode( 'panorama', 'bppiv_image_viewer' );

Shortcode PHP function:

function bppiv_image_viewer( $atts ){
    extract( shortcode_atts( array(
            'id'    => null,
    ), $atts )); ob_start(); ?>

    <?php 
    // Check Post-Type
    $post_type = get_post_type($id);
    if($post_type != 'bppiv-image-viewer'){
            return false;
    }
    // Meta Data
    $bppiv_meta = get_post_meta($id, '_bppivimages_', true); 

    // // Meta Options
    $bppiv_width    = '100%';
    $bppiv_height   = '320px';

    if( isset($bppiv_meta['bppiv_image_width']['width']) ) {
        $bppiv_width = $bppiv_meta['bppiv_image_width']['width'].$bppiv_meta['bppiv_image_width']['unit'];
    }
    if( isset($bppiv_meta['bppiv_image_height']['height']) ) {
        $bppiv_height = $bppiv_meta['bppiv_image_height']['height'].$bppiv_meta['bppiv_image_height']['unit'];
    }

    $pan_type = isset($bppiv_meta['bppiv_type']) ? $bppiv_meta['bppiv_type'] : '';
      
    // Panorama Scripts and style 
    wp_enqueue_script( 'bppiv-three' );
    wp_enqueue_script( 'bppiv-panolens' );
    wp_enqueue_script( 'bppiv-pannellum-js' );
    wp_enqueue_script( 'bppiv-init' );   
    
    wp_enqueue_style( 'bppiv-font-material' );
    wp_enqueue_style( 'bppiv-pannellum-css' );
    wp_enqueue_style( 'bppiv-main-style' );
    ?>

    <?php if( $pan_type == 'image' || $pan_type ==='image360' || $pan_type ==='tour360' || $pan_type ==='video'): ?>

    <div id="bppiv_panorama<?php echo esc_attr($id); ?>" class="bppiv_panorama" data-settings='<?php echo esc_attr( wp_json_encode( $bppiv_meta)); ?>'>

    </div>

    <?php endif; ?>

    <style>
        <?php echo '#bppiv_panorama'. esc_attr($id); ?>{
            width: <?php echo esc_attr($bppiv_width); ?>;
            height: <?php echo esc_attr($bppiv_height); ?>;
        }
    </style>

    <?php   
    return ob_get_clean();

}

Code file location:

panorama/panorama/public/shortcode/shortcode.php

Conclusion

Now that you’ve learned how to embed the Panorama Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.