University of St Andrews

Photosphere

A photosphere is used to showcase a 360° image using Google VR view. This is done via a JavaScript API to manipulate the contents of an <iframe>.

Rules for photospheres

• Must always be contained within a responsive embed pattern.
• Must only be used on the content whole, content thirds, content halves and featured media patterns.

Options available

• Photosphere

Image specifications

• Images can be stored as png, jpeg, or gif. We recommend you use jpeg for improved compression.
• For maximum compatibility and performance, image dimensions should be powers of two (e.g. 2048 or 4096).
• Images should be 2:1 aspect ratio (e.g. 4096 x 2048).

Include VR view script

A link to the following file is required for a photosphere to work. Put the code at the bottom of the body section.

HTML code

Use the following code to ensure that the photosphere is responsive and work on all sizes of devices:

JavaScript function

Add the following code to the page and amend the following parameters:

• Photosphere-ID: this is the <div> where the photosphere will be displayed, change this to match the Photosphere-ID you specified in the HTML.
• Image: this is the full URL of the image you wish to use, replace path/to/IMAGE/ with the desired URL.

window.addEventListener('load', onVrViewLoad)
function onVrViewLoad() {
	var vrView = new VRView.Player('#Photosphere-ID', {
		image: 'path/to/IMAGE/'
	});
}

Photosphere