AEM 61 - TouchUI Slide Show Component with Image Multifield

Goal

Create a TouchUI slideshow component rendered using Sightly, images added using Image Multifield

This post focuses on creating a slideshow using sightly templating language with the images added in multifield. For more information on image multifield widget check this post

For ClassicUI slide show component check this post

To learn more about sightly controls check adobe documentation

Hotfix 6670 must be installed for this widget extension to work

Demo | Package Install

For 61 SP1 (no hotfixes necessary) - Package Install

Solultion

1) Assuming user added the images for slideshow component using image multifield widget; the following structure gets created in CRX

2) To render images using html, create the component /apps/touchui-sightly-image-multifield/sample-image-multifield with following structure

3)  The file /apps/touchui-sightly-image-multifield/sample-image-multifield/sample-image-multifield.html uses sightly to create html. Add the following code to prepare html for slideshow..

<div    data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}"
        style="display: block; padding: 10px">

    <sly data-sly-call="${clientLib.all @ categories='eaem.slideshow'}" />

    <b>Image Multi Field Sample</b>

    <div data-sly-use.images="imgHelper.js" data-sly-unwrap>
        <div data-sly-test="${images.gallery}" style="margin-bottom: 15px">
            Gallery - ${images.gallery}
        </div>

        <div data-sly-test="${!images.artists && wcmmode.edit}">
            Add images using component dialog
        </div>

        <div data-sly-test="${images.artists}" class="eaem-slideshow">
            <div data-sly-list.artist="${images.artists}">
                <div class="show-pic ${artistList.first ? 'active' : ''}">
                    <img src="${artist.painting}" height="530px" width="700px"/>
                    <div class="overlayText">
                        <span class="overlayTitle">${artist.name}</span>
                        <div class="overlayDesc">${artist.desc}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

4) #4 adds the clientlib eaem.slideshow with necessary css and js logic (available in package install) to run a simple slideshow with images. #8 initializes helper object (defined in java script) and exposes it through the variable images using sightly use-api

5) Create file /apps/touchui-sightly-image-multifield/sample-image-multifield/imgHelper.js with necessary logic to read the CRX node structure and create a js object for sightly script added in step3

"use strict";

use( ["/libs/wcm/foundation/components/utils/ResourceUtils.js" ], function(ResourceUtils){
    var images = {}, properties = granite.resource.properties,
        artistsPath = granite.resource.path + "/artists", counter = 1, artist;

    images.gallery = properties["gallery"];
    images.artists = undefined;

    function recursiveImageRead(path){
        ResourceUtils.getResource(path)
                        .then(addImage);
    }

    function addImage(artistRes){
        if(!images.artists){
            images.artists = [];
        }

        properties = artistRes.properties;

        artist = {
            painting: properties["paintingRef"],
            desc: properties["desc"],
            name: properties["artist"]
        };

        images.artists.push(artist);

        recursiveImageRead(artistsPath + "/" + counter++);
    }

    recursiveImageRead(artistsPath + "/" + counter++);

    return images;
} );