Add ‘Webrotate 360’ Image Rotation to Sellerdeck

Call 01323 872296


Add ‘Webrotate 360’ Image Rotation to Sellerdeck

  1. Go to https://www.webrotate360.com/products/webrotate-360-product-viewer.aspx – we will download the free version for now, click ‘Free Download’ agree the conditions and watch your browser to see the file download.
  2. Go to the download location, extract the zip file and go to webrotate360_free/webrotate360_free/Windows and run webrotate360_free.exe
  3. This will nstall ‘Webrotate360 Product Viewer’ on your PC. Do not install in the Sellerdeck folder – just in the default location suggested during install.
  4. Prepare your images so you have a set like this: the more images taken during rotation the smoother the rotation effect. The images should of course be saved as separate images.
    360 images grid
  5. The images should be large (say 1600px the long dimension) and resolution 72dpi.
  6. Save the images in a folder on your PC
  7. From your Start Menu go to ‘Webrotate 360’ and click to run ‘WebRotate 360 SpotEditor’
  8. Delete any promotional banner by clicking the ‘x’
  9. Top left click the three coloured squares to create a new project.
  10. Give the project a name
  11. In the next two dialogue boxes choose the folder where the images are saved, this can be anywhere on your PC, not in the Sellerdeck folder, and the folder where your prepared images can be found..
  12. Click ‘Create’
  13. The software will open with your first image displayed.
  14. Top right for ‘skin’ choose ‘retina’
  15. The dimensions should be set to the same dimension proportions as the image – not the same size as the images as they will be much bigger! Height should be 450px.
  16. Leave everything else default
  17. The Control, Hotspots and Images tabs, leave everything default.
  18. On the left hand side, click the icon like a little grey box with a blue ball on it to publish the project.
  19. Leave the default project output directory as is.
  20. Leave the first two options as is, for template choose Responsive.
  21. Untick create extra set of small images…
  22. Then click publish – OK the alert box that opens. You don’t have to tick don’t show again.
  23. Now just wait a few moments – it does take a little while to fully publish.
  24. The preview will open in your chosen browser. Please note the preview will not be visible on local preview. This happens due to local security restrictions in modern web browsers and it only applies when a 360 product view is loaded directly from your hard-drive. We have compiled this simple guide on how to resolve this issue in different web browsers. This is not an issue when a 360 or 3D product view is loaded from the Internet or your local web server and you can ignore for now.
  25. In the software you can now click the cancel button in the publish dialogue and on the left cick the save icon to save the project and the ‘X’ to close.
  26. If you are done close the software with the ‘X’ top right.
    Once you have published the animation navigate to your project folder and to published\360_assets
  27. In the 360 Assets folder there is a folder with your project name, open that and there is an images folder and an xml file with a name based on your project name.
  28. Copy the Images file and the xml file project-name.xml and paste into your site folder in ‘documents/Sellerdeck v18/Sites’ and also paste it into ‘C:/Program Data/Sellerdeck/Sellerdeck v18/Sites/your site name/PreviewHTML_Administrator’ and also paste it into ‘C:/Program Data/Sellerdeck/Sellerdeck v18/Sites/your site name/ DesignPreviewHTML_Administrator’.
  29. The images folder must also be ftp’d to the acatalog folder on the server.
  30. In each of these cases if a folder called images exists just add the content of your project images folder to the existing images folder. If a folder called images and contains other files it is OK to add the 360 images, but when you ftp to the server the images folder there must only contain the 360 images. Note: If the images folder contains a folder called ‘highres’ you have forgotten to untick the box saying ‘Create an extra set of small fitted images to show on page load (Recommended)’. Although it says ‘Recommended’ this does not apply to use in Sellerdeck. If you do have the folder you must delete it along with the images you have prepared on that run of the software and do the rotation again unticking the ‘Create an extra set’ box as above. Remember changes to the image folder have to be done in the three locations foer the images folder as well as on the folder ftp’d to acatalog.
  31. I have prepared a zip file of the JS, CSS and neccessary image files which you can download here – see later. The JS file is current as per the date of this post but you can replace the JS once unzipped with a later version.
    In Design Library Variables Product create a new variable ‘360RotationXMLFilename’ selectable at product level in properties 360 xml file variable
  32. In Design Library Layouts Product right click and copy Customisable Product Layout twice. Rename the copes thus: ‘Customisable Product Layout 360 Portrait’ and ‘Customisable Product Layout 360 Landscape’
  33. In ‘Customisable Product Layout 360 Portrait’ add this code in place of, and incorporating
    <actinic:variable name="ProductImageLayout" value="Standard Product Image" />
    in Swift or
    <actinic:variable name="ProductImageLayout" />
    in Smart.
  34. <actinic:block if="%3cactinic%3avariable%20name%3d%22360RotationXMLFilename%22%20%2f%3e%20%3d%3d%20%22%22">
    <actinic:variable name="ProductImageLayout" value="Standard Product Image" />
    </actinic:block>
    <actinic:block if="%3cactinic%3avariable%20name%3d%22360RotationXMLFilename%22%20%2f%3e%20%21%3d%20%22%22">
    <div id="content">
    <div id="wr360PlayerId-<actinic:variable name="EncodedProductAnchor" />" class="wr360_player" style="background-color:#FFFFFF;">
    </div>
    </div>
    </actinic:block>
  35. At the bottom of the product layout add this:
  36. <script language="javascript" type="text/javascript">
    jQuery(document).ready(function(){
    jQuery('#wr360PlayerId-<actinic:variable name="EncodedProductAnchor" />').rotator({
    licenseFileURL: './license.lic',
    configFileURL: './<actinic:variable name="360RotationXMLFilename" />',
    graphicsPath: '',
    responsiveBaseWidth: 300,
    responsiveMinHeight: 0,
    googleEventTracking: false,
    });
    });
    </script>
  37. Do the same for ‘Customisable Product Layout 360 Landscape’ but at the top of the layout around line 28 change
    <div class="col-md-5 col-12 text-center d-flex align-items-center product-image-wrapper">
    to
    <div class="col-12 text-center d-flex align-items-center product-image-wrapper">
    and around line 42 change
    <div class="col-12 col-md-7 mt-4 mt-md-0 px-xs-0">
    to
    <div class="col-12 mt-4 mt-md-0 px-xs-0">
  38. In the product you wish the 360 to appear chose one of the following Product Page Product Layouts, ‘Customisable Product Layout 360 Portrait’ or ‘Customisable Product Layout 360 Landscape’ depending on whether your 360 rotation for that product is portrait or landscape.
  39. In product properties enter the name of the respective xml file project-name.xml in the variable ‘360 Rotation XML Filename’. Entering this filename in properties enables the 360.
  40. In product image specify the first of the rotation images (or your chosen one) from the images folder in the site folder.
  41. Unzip the zip file into the site folder.
  42. Paste the following into javascript header functions
    <link type="text/css" rel="stylesheet" href="retina.css"/>
    <script type="text/javascript" src="imagerotator.js"></script>
    <style type= "text/css">
    #content {
    width: 100%;
    height: 450px;
    }
    </style>
  43. In design additional files add all the files with an svg suffix along with pixel.png. You should also add your project xml files here too.
  44. Licensing
  45. When you license the product you will receive a licence.lic file and you may receive another instance of imagerotator.js. Save both into the site folder (replacing the existing .js file). You should also add licence.lic to design additional files.
Peggy Portrait

Peggy Portrait

Peggy Landscape

Peggy Landscape

Images are from https://www.artmodels360.com/

Keep in touch and share

Graphicz on Social Media



01323 872296. 07836 551000.
Email:

Website by Graphicz