image sightly component

[robertot1833361]

Hello.

I have to create an image component using  sightly and js.

the script js to render the component is

/*******************************************************************************
 * Copyright 2016 Adobe Systems Incorporated
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 ******************************************************************************/

"use strict";

/**
 * Image component JS Use-api script
 */
use(["/libs/wcm/foundation/components/utils/AuthoringUtils.js",
     "/libs/wcm/foundation/components/utils/Image.js",
     "/libs/sightly/js/3rd-party/q.js"], function (AuthoringUtils, Image, Q) {
    log.debug("granite.resource {}",granite.resource.path);
    var image = new Image(granite.resource.resolve(granite.resource.path+"/image1"));
    var imageDefer = Q.defer();

    var CONST = {
        AUTHOR_IMAGE_CLASS: "cq-dd-image",
        PLACEHOLDER_SRC: "/etc/designs/default/0.gif",
        PLACEHOLDER_TOUCH_CLASS: "cq-placeholder file",
        PLACEHOLDER_CLASSIC_CLASS: "cq-image-placeholder"
    };
    // check if there's a local file image under the node
    granite.resource.resolve(granite.resource.path+"/file").then(function (localImageResource) {
        imageDefer.resolve(image);
    }, function() {
        // The drag & drop image CSS class name
        image.cssClass = CONST.AUTHOR_IMAGE_CLASS;
        
        // Modifying the image object to set the placeholder if the content is missing
        if (!image.fileReference()) {
            
            image.src = CONST.PLACEHOLDER_SRC;
            if (AuthoringUtils.isTouch) {
                image.cssClass = image.cssClass + " " + CONST.PLACEHOLDER_TOUCH_CLASS;
            } else if (AuthoringUtils.isClassic) {
                image.cssClass = image.cssClass + " " + CONST.PLACEHOLDER_CLASSIC_CLASS;
            }
        }
        
        imageDefer.resolve(image);
    });
//    
    // Adding the constants to the exposed API
    image.CONST = CONST;
    
    // check for image available sizes
    if (image.width() <= 0) {
        image.width = "";
    }
    
    if (image.height() <= 0) {
        image.height = "";
    }
    
    
    return imageDefer.promise;
    
});

and in attachment there is the content structure.

The problem is that the image is not renderend.

could someone help me?

[smacdonald2008]

AEM comes with a Sightly/Image component. Use the out of the box component.  

[robertot1833361]

clear,

infact the js is a copy of out of box component.

But it doesn't work

[kautuk_sahni]

robertot18333617 wrote...

clear,

infact the js is a copy of out of box component.

But it doesn't work

Hi 

I have overlaid the Out of the box Image component and its is working properly for me.

1. Copied the node :- /libs/wcm/foundation/components/image

2. Pasted it inside the app directory : - /apps/<youe app>/components

3. Tested the new component and added an image on it, it is rendering the image i have drag-dropped on it.

Thnaks and Regards

Kautuk Sahni

[robertot1833361]

Hi,

thanks for your answer.

The problem is that if I rename the image item in th cq dialog in  image1, the component doesn't work.

Regards

[kautuk_sahni]

robertot18333617 wrote...

Hi,

thanks for your answer.

The problem is that if I rename the image item in th cq dialog in  image1, the component doesn't work.

Regards

Hi 

I have tried renaming the name property of "/apps/sightlymf/components/image/dialog/items/image"

Everything is working fine. Can you exactly please let me know, how to reproduce this ?

~kautuk 

[robertot1833361]

Hi,

thanks a lot.

I' have to create a kind of component with render 2 images and under the images a text.

The two images must have drag and drop, So in the cq:dialog i renamed the image property in "image1" and i changed every path (i.e for the jcr:title i have renamed with /image1/jcr:title).

At this moment i'm focusing my attention only in one image but something is wrong.

I hope I was clear

[kautuk_sahni · Accepted solution]

Hi 

Please have a look at this article:-

Link:- http://experience-aem.blogspot.in/2015/08/aem-61-touch-ui-fill-dialog-fields-with-default-values-on-...

// Here in this community article, you can drag drop image into a dialog box, but as you stated that you would want to have 2 images.

For this you can just copy the node "/apps/touchui-dialog-field-fill-default/sample-image-component/cq:dialog/content/items/paintings/items/column/items/fieldset/items/column/items/painting" and paste it parallel to itself. 

This way you can have 2 drag-drop fields in a dialog box.

Thanks and Regards

Kautuk Sahni

[kautuk_sahni]

You will get component look like:-

~kautuk

[kautuk_sahni]

Video Link(2 min) :- https://kautuksahni.tinytake.com/sf/Nzg1NjEzXzM1MjUxMTc

~kautuk

[robertot1833361]

thanks a lot