Slideshows for Topics and Programmes

Owned by Andrew Bredenkamp
Last updated: Apr 29, 2016
2 min read

Firstly, ensure you have all the images required for the slideshow.
Open each of the images in photoshop. Export using 'Save for web' - (In the menu under 'File>Export>Save for web' or keyboard shortcut command+alt+shift+s)
In the export, make sure that the image is a jpg and a maximum width 3200, and maximum height 1800. See here for any more information regarding formatting etc: https://victoriauniversity.atlassian.net/wiki/display/WIP/Images.
Make sure the images are saved with appropriate filenames. See here for specifics, but basically no caps, spaces replaced with _. Try and use 'ImageTitle_ImageOwner.jpg'

After you have saved the images, use tinypng to convert them all to a smaller filesize. Either do this one by one using the website https://tinypng.com/
Or, get a developer api key, and use the node package node-tinypng (install with "npm install -g node-tinypng" and make sure to add your api key into a file in "~/.tinypng").

Then, upload the files to squiz. Make sure to do this in the 'images' folder under the topic or degree asset to keep things organised.

To upload files, either:
Do them one at a time with 'New Child>Files>Image'. Make sure to include the Alt Text and Caption for each file done this way, and ensure that 'Allow Unrestricted Access' is set to 'Yes'.
Or, upload the files to the master server in a new folder under the location '/home/websites/vuw/data/public/'. Then using the 'System Tools: File Bridge Import Tool' within squiz, set the 'New Parent Node' to the images folder you will import to. The File Bridge us asset 265211, under 'Core sites>Site assets>File bridge to WWWROOT/data/public/'. Under that asset should be the folder where you copied the assets to on the master server. After this is complete, make sure each image is set to 'live', and add captions and alt text to each of them.

Once the images are loaded into squiz you can start making the json object. It looks like this:

{
    "heading"     : "Slideshow Heading",
    "contentType" : "slide-show",
    "caption"     : "Slideshow Caption",
    "images"      : [
        {
            "heading"       : "Heading",
            "caption"       : "%globals_asset_attribute_caption:ASSETID^json_encode%",
            "altText"       : "%globals_asset_attribute_alt:ASSETID^json_encode%",
            "buttonText"    : "",
            "buttonLink"    : "",
            "buttonTitle"   : "",
            "imageUrl"      : "%globals_asset_url:ASSETID^json_encode%",
            "imageAssetId"  : "ASSETID"
        }
    ]
}