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

video






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;
} );


5 comments:

  1. The hotfix url is not resolving

    ReplyDelete
  2. After uploading the image, it is repeating multiple times in the same dialog

    ReplyDelete
  3. Hello Sreekanth,

    It is throwing maximum call stack size exceeded :( could you please check whats the issue here

    Thanks

    ReplyDelete
    Replies
    1. hi, if you are on 61 sp1 - https://drive.google.com/file/d/0B4d6KmbLkAumbTRzZTQxS2h1MHc/view?usp=sharing

      Delete
  4. In the classic UI version of this component you write the images properties, for example, under ...myComponent/images/1/image where I can find for example the fileReference property. In this Touch UI version you write that same properties under ...myComponent/images/1 so the 2 version cannot live together. I modify the dialog in order to write the fileRefernce prop under the "image" node as in the classic ui version, but then I have no thumbnail in the touch ui dialog. What should I modify to have thumbnail in my configuration of the component?

    Thanks in advance

    ReplyDelete