Joomla

1Shortcodes vs Fields

There are two integration options that come with the plugin: 1) Shortcodes 2) Joomla Fields.

With shortcodes, you paste a snippet of text called shortcode with the information about a 360 view or a video into any content editor in Joomla (e.g. Article editor). You can have multiple shortcodes on the same page and there are a few presentation options to chose from like popup or full-screen "expand" shortcode.

Field support is currently limited to embedded presentation which can be either an interactive 360 product view or a PixRiot video. Fields are easier to use and can be more manageable. Find more details about shortcodes and fields below.

2Plugin defaults

Expand Extensions -> Plugins -> WebRotate 360 Product Viewer to access the default plugin configuration. If there will be many product views in your Joomla that will use the same dimensions, configure the default viewer width, height, base width and minimum height as desired (to save time when adding shortcodes for each product view). You can always override these values in your shortcodes. Review the rest of the default options on the plugin page.

3Embed shortcode

There are currently four types of shortcodes that you can use in Joomla: 1) wr360embed, 2) wr360popup, 3) wr360expand and 4) wr360video.

IMPORTANT: make sure no extra hidden characters are pasted with the shorcodes if copying them from this page by selecting Toggle Editor button under article editor.

wr360embed creates a 360 product view that is embedded inside a page as per the dimensions you specify in the plugin settings in admin or via the shortcode itself.

To test this shortcode, add the following line in your article content. Change name, width, height and the config parameter as needed.

To load demo 360 product view that was packaged with the plugin, set shortcode's config parameter to /plugins/content/webrotate360/360_assets/sampleshoe/config.xml or use this demo PixRiot config URL instead https://s1.pixriot.com/433181dfa6/Example/Shoe/Shoe.xml?t=1661030931

[wr360embed name="view1" width="100%" height="500px" config="url-of-the-viewer-config.xml"]

4Responsive height and custom background

There are three optional shortcode parameters for wr360embed:

• basewidth - if the width parameter is relative (%), setting basewidth will force viewer to scale its height responsively (viewer width is always responsive as long as the shortcode width is relative). Basewidth usually represents the width of the viewer on a fully expanded page when viewed via a desktop browser, i.e before responsive rules are applied to the page.
• minheight - if basewidth is set, this setting makes sure the viewer height doesn't go below a certain value such that the 360 product images have enough room on small mobile screens.
• aspectRatio - use in conjunction with the width parameter to control the responsive scaling of a 360 view (e.g. aspectRatio="16/9"). When configured, neither basewidth nor height/minheight shortcode parameters can be used. Can be any width to height ratio combination (e.g. "4/3", "3/4", etc.).
• background - hexadecimal color (e.g #000000) of the viewer background for this shortcode. You can use it to match the viewer background color with the background of the Joomla page and/or the background of your 360 degree product images.

Note that you can configure the default values for these parameters under the plugin settings such that you don't have to do this for every shortcode.

[wr360embed name="view2" width="100%" basewidth="620px" height="500px" minheight="300px" background="#000000" config="url-of-the-viewer-config.xml"]

5Popup shortcode

Use wr360popup to load the viewer inside a popup when user clicks on some image, a hyperlink, etc. that is wrapped inside the shortcode. The width parameter can't be relative and have to be configured in pixels - the popup will scale automatically if a browser window is not large enough (e.g when viewed on a small mobile screen).

There are four optional shortcode parameters that can be used with wr360popup:

• gallery - multiple popup shortcodes with the gallery parameter set to true (gallery="true") are combined into a popup gallery with the navigation.
• background - hexadecimal color (background="#000000") of the viewer background for this shortcode.
• viewerskin - configurable skin of the 360 product viewer. Supports empty, retina, basic, thin, round, zoom_light and zoom_dark viewer skins (viewerskin="round").

To load demo 360 product view that was packaged with the plugin, set shortcode's config parameter to /plugins/content/webrotate360/360_assets/sampleshoe/config.xml or use this demo PixRiot config URL instead https://s1.pixriot.com/433181dfa6/Example/Shoe/Shoe.xml?t=1661030931

[wr360popup name="view3" width="650px" height="550px" config="url-of-the-viewer-config.xml"]thumbnail or text[/wr360popup]

6Expand shortcode (PRO)

Similar to the popup shortcode, wr360expand activates via a click or tap on some text or image that is wrapped inside the shorcode. It makes the viewer open up in the full-screen mode or take the entire browser window (browserfs="true"). wr360expand ignores all dimensional shortcode properties such as width or height.

Note that if a 360 or 3d product view has dynamic hotspots, you need to uncheck "Create an extra set of fitted images..." on the Publish form in SpotEditor to use it with this shortcode in Joomla. Otherwise, the hotspot indicators will not be correctly positioned when this shortcode is activated.

To load demo 360 product view that was packaged with the plugin, set shortcode's config parameter to /plugins/content/webrotate360/360_assets/sampleshoe/config.xml or use this demo PixRiot config URL instead https://s1.pixriot.com/433181dfa6/Example/Shoe/Shoe.xml?t=1661030931

[wr360expand name="view4" browserfs="false" config="url-of-the-viewer-config.xml"]thumbnail or text[/wr360expand]

7Video shortcode

wr360video shortcode is designed to embed videos (.mp4, .mov) hosted and shared on PixRiot.

These are shortcode paramters you can use with wr360video:

• video - a URL from the Standalone tab of the Share & Embed form in PixRiot.
• width - pixel or % width of the video.
• aspectRatio - width to height ratio (e.g "16/9") for responsive sizing of the video.
• height - if aspectRatio is not used, use height parameter to set fixed height of the video (e.g. height="500px").

Set video parameter to this demo PixRiot video URL to test the shortcode https://m1.pixriot.com?media=433181dfa6/CMS/Shared/Video.mp4&t=1661031320

[wr360video name="video01" width="100%" aspectRatio="16/9" video="https://video-url-from-pixriot-share-standalone-tab"]

8Joomla Fields

Create a new Text Field and set its Name to either webrotate360-config or webrotate360-video. Turn off Label and set Automatic Display to "Do not automatically display" under Display Options for the new field.

In the article editor under Fields, set the new field value to the URL of your published 360 view config (.xml) or a PixRiot video URL (from the Standalone tab of the Share & Embed form). Use CMS Content dropdown in the article editor to insert the fields where needed. The fields will use global dimensions and other default settings that can be edited under WebRotate 360 plugin settings in Joomla admin.

To load demo 360 product view that was packaged with the plugin, set shortcode's config parameter to /plugins/content/webrotate360/360_assets/sampleshoe/config.xml or use this demo PixRiot config URL instead https://s1.pixriot.com/433181dfa6/Example/Shoe/Shoe.xml?t=1661030931

9Publish and upload your 360 product views

Download our desktop software and publish a 360 product view using your own product images or use our sample images that are linked under additional resources. FTP upload is available in the software or you may upload the published assets to your server manually (via FileZilla, etc). Consider using our optimized PixRiot service to host and manage your spins online for unmatched convenience. You only need to upload a single folder located under published/360_assets of your published SpotEditor project for each product view. You may also publish multiple 360 product views into a single 'published' location and upload all product views at once.

Once uploaded, note the URL of the configuration file (.xml) in the uploaded folder and then enter a relative URL of the configuration file on your server in the config field of your shortcode.

10Load images from CDN or use master config (PRO)

All shortcodes also support the rootpath parameter that can be used to specify an alternative location of your 360 product images. When it's set in the shortcode, the viewer will prepend rootpath to the relative image location stored in the viewer config xml for each image. This is valuable when you need to host image assets on a dedicated file server or CDN.

The rootpath feature can be also used to load multiple shortcodes via a single (master) config xml that you can set under the plugin settings via Master Config URL, assuming the number of images and their file names are the same across multiple shortcodes. If Master Config URL is configured, you don’t need to specify the config parameter in the shortcodes that share the same config, i.e you would only use the rootpath parameter pointing to the image assets.

[wr360embed name="view5" width="100%" height="500px" rootpath="http://mycdn.com/360_assets/product1/" config="/360_assets/product1/config.xml"]

11API integration

WebRotate 360 Product Viewer includes powerful APIs that can help with various viewer customizations. You can see and test all currently available APIs by publishing your SpotEditor project via the JavaScript API template which you can select on the Publish form.

The API can be integrated with wr360embed and wr360expand shortcodes either by configuring a global callback in the plugin settings in admin or by specifying the callback parameter inside a shortcode itself. The callback receives three parameters: API object, isFullScreen flag and a shortcode name, i.e function myCallback(api, isFullScreen, name){}

[wr360embed name="view6" width="100%" height="500px" callback="myCallback" config="url-of-the-viewer-config.xml"]