Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

How to add external link to an image

Avatar

Level 3

In AEM, how to add image hyperlink to an external website. The linkto property only points to the internal pages. I read something about map, but that option is not available to me. How to enable image map or any other options please !!

11 Replies

Avatar

Level 4

The AEM Image component supports linking to other sites. Open the dialog for the Image component and then paste in the URL of the external website into the "Link to" field. 

Avatar

Level 5

It is working for me. Just use below code snippet to the image tab and make sure you remove the "editor.html" from the URL.

Eg: external URL: https://www.facebook.com/

                    <linkURL

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/foundation/form/pathbrowser"

                                fieldLabel="Link to"

                                name="./image/linkURL"

                                rootPath="/content"/>

Thanks ,

Narayana

Avatar

Administrator

Hi

As mentioned by Andy, the OOTB Image component can be hyperlinked to any external site.

Please face a look ta the image here:

 

 

The "link to" section accept the link for external site.

Thanks and Regards

Kautuk Sahni



Kautuk Sahni

Avatar

Level 3

The link to will work for the first time, but when I am trying to modify the link to another website, it is opening the previous one or the whole page is going down. I Icleared cache, restarted the server, still the same problem.

Also how to display the website to open in a new window ?

Avatar

Administrator

amrit1993 wrote...

The link to will work for the first time, but when I am trying to modify the link to another website, it is opening the previous one or the whole page is going down. I Icleared cache, restarted the server, still the same problem.

Also how to display the website to open in a new window ?

 

 


Seems like some caching issue.

Please publish the page, and see is there any error coming up ?

Clear the browser cache and also look at https://docs.adobe.com/docs/en/dispatcher/page-invalidate.html

I hope this will help you.

 

Thanks and Regards

Kautuk Sahni



Kautuk Sahni

Avatar

Level 3

Hi, 

Still the same issue, actually if I open a random page say https://helpx.adobe.com/creative-cloud/tutorials-photography-jumpstart.html?promoid=TPQVLD59&mv=othe... it will work but if I try to give a link for simple websites like www.google.com, it doesnt work.

I disabled the linkchecker in configmgr also, so that should not be an issue.

Avatar

Administrator

amrit1993 wrote...

Hi, 

Still the same issue, actually if I open a random page say https://helpx.adobe.com/creative-cloud/tutorials-photography-jumpstart.html?promoid=TPQVLD59&mv=othe... it will work but if I try to give a link for simple websites like www.google.com, it doesnt work.

I disabled the linkchecker in configmgr also, so that should not be an issue.

 


Hi,

Make sure you are adding http:// or https:// before the link.

example:-  https://www.google.com will work, but www.google.com would not.

Try this.

 

Thanks and Regards

Kautuk Sahni



Kautuk Sahni

Avatar

Level 3

Yes tried that, if I append http:// or https://, then it will not open anything and when I open the dialog again for editing, all my fields will become blank.

Avatar

Level 3

Found this:

public String getHyperlink() {
        String hyperlink = getDto().getLink();
        if(StringUtils.isNotBlank(hyperlink)
                && (StringUtils.startsWith(hyperlink, "http://") || StringUtils.startsWith(hyperlink, "https://"))) {
            return hyperlink;
        } else {
            if(resourceResolver != null) {
                Resource resource = resourceResolver.getResource(hyperlink);
                if(resource != null) {
                    if(resource.adaptTo(Page.class) != null) {
                        hyperlink = hyperlink.concat(".html");
                    }
                } else {
                    hyperlink = hyperlink.concat(".html");
                }
            }
            return hyperlink;

 

 

 

....................any idea how to fix this ?

Avatar

Administrator

amrit1993 wrote...

Yes tried that, if I append http:// or https://, then it will not open anything and when I open the dialog again for editing, all my fields will become blank.

 

I am not able to reproduce your case's behavior. Please check the browser console log and error.log to further debug this issue.

If error is "Load denied by X-Frame-Options: <site> does not permit cross-origin framing."

Then look at Link:- https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options

 

I hope this would help you.

Thanks and Regards

Kautuk Sahni



Kautuk Sahni