Overview


Embed 360-degree photos and videos into your blog content with a shortcode. See example here: Using 360-degree Photos and Videos in WordPress

FEATURES:

  • place multiple 360-degree photos and/or videos on the same page
  • host the photos anywhere (your own server, github, cloud drive, someone else’s website, i.e. literally anywhere)
  • no 3rd party accounts are required. Uploading your images to a 3rd party server is not required either (though cloud hosting of your images is also supported)
  • wrap text around the photo
  • fullscreen mode
  • support for mobile devices and VR headsets
  • mobile device and headset position tracking
  • ability to add a 3-d label to the image
    • customize the label position and rotation
    • customize font family
    • customize the label size
  • ability to rotate the 360-degree photo (level horizon, change the starting point etc)
  • ability to define the viewport width and height
  • ability to save a screenshot from the 360-degree photo
  • ability to play/pause the videos (and no annoying autoplay, respect the visitors of your blog!)

SHORTCODE EXAMPLE

basic example:
[360 src=”my_favorite-360-degree-image.jpg” text=”My Favorite Place”]

more advanced example:
[360 src=”my_favorite-360-degree-image.jpg” text=”My Favorite Place” text-position=”-2 4 -3.5″ text-rotation=”0 0 0″ width=”400px” height=”400px” align=”left” rotate=”2 90 20″ text-color=”#aa0000″ text-width=”5″ text-scale=”2 2″]

embedding videos:
[360 src=”https://andrey.mikhalchuk.com/wp-content/andrey.mikhalchuk.com/eiffel-tower.mp4″ rotation=”0 50 0″ height=”400px”]

SHORTCODE PARAMETERS

The complete list of supported parameters is provided below. The values in the parenthesis are the defaults.

  • width (“100%”) – the width of the viewport, could be specified in pixels, percents etc
  • height (“300px”) – the height of the viewport
  • rotation (“0 0 0”) – the initial rotation of the image (pitch, yaw and roll) in degrees
  • scale (“-1 1 1”) – the scale (i.e. how do you want to resize your image) of the image in 3 dimensions. Note that the first parameter -s negative. If you make it positive then the image will be mirrored horizontally.
  • fov (80) – use this parameter to correct the “fisheye” effect when you are displaying the image in a viewport that’s stretched too much (see the FAQ)
  • text (“”) – the text label to display on the image. The default is the empty string (i.e. no text label will be displayed)
  • text-position (“0.0 0.0 -2.5”) – position of the text label in 3d space. It’s best to keep the 3rd coordinate negative, around 2-5
  • text-rotation (“0 0 0”) – text label rotation (pitch, yaw and roll) in degrees
  • text-font (“kelsonsans”) – the font to use for the text label. Supported options are
    • aileronsemibold
    • dejavu
    • exo2bold
    • exo2semibold
    • kelsonsans
    • monoid
    • mozillavr
    • sourcecodepro
    • standard web font families (Arial, Helvetica, etc) are NOT supported
  • text-color (“lightgrey”) – the font color. Both HTML color names and hex codes are supported
  • text-scale (“1 1”) – font scale (x and y). I.e. if you want to make the font taller, then specify something like “2 1”.
  • src – the URL of the image to display. This URL can be anywhere. For instance if you’re self-hosting WordPress, you can upload the image to your media library and list its URL (either relative or absolute) here.
  • align (“left”) – how to align the viewport relative to the rest of the page contents
  • kind (“photo”) – override the autodetect for the media type. If you specify an .mp4 file as the source then the media type will be automatically detected as “video”. If you use other kind of a video file, please specify kind=”video”, otherwise the plugin will try to interpret it as a photo.

Discuss


Summary
Version:
0.3.0
Last updated:
Active installations:
WordPress Version:
4.0 or higher
Tested up to:
5.5.4
PHP Version:
7.0 or higher
Ratings