How to add external link to an image

[amrit1993]

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 !!

[andyshreve]

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. 

[chirran414]

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

[kautuk_sahni]

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]

[amrit1993]

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 ?

[kautuk_sahni]

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

[amrit1993]

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.

[kautuk_sahni]

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

[amrit1993]

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.

[amrit1993]

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 ?

[kautuk_sahni]

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