Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

image sightly component

robertot1833361
Level 2
Level 2

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?

1 Accepted Solution
kautuk_sahni
Correct answer by
Community Manager
Community Manager

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

View solution in original post

10 Replies
smacdonald2008
Level 10
Level 10

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

robertot1833361
Level 2
Level 2

clear,

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

But it doesn't work

kautuk_sahni
Community Manager
Community Manager

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
Level 2
Level 2

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
Community Manager
Community Manager

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
Level 2
Level 2

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
Correct answer by
Community Manager
Community Manager

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

View solution in original post

kautuk_sahni
Community Manager
Community Manager

You will get component look like:-

~kautuk