How do I add a link to my banner image?

I'd like to make my banner image in Adirondack a link to a different page on my site, but only on my homepage. Has anyone been able to do this?

asked May 31 '13 at 12:45 by jonfreed 6115


jQuery will do the trick:

$(".homepage .main-image-wrapper img").wrap("<a href='/page'></a>'");
(May 31 '13 at 13:27) krystynheide ♦ krystynheide's gravatar image

jQuery will do the trick (add this to the Page Header Code Injection):

<script src="//"></script>
<script>$(".homepage .main-image-wrapper img").wrap("<a href='/page'></a>'");</script>

I think that's it. It's been a while. Let me know if it works/doesn't work for you.

answered May 31 '13 at 13:50 by krystynheide ♦ 1.3k610


Worked like a charm!

(May 31 '13 at 14:00) jonfreed jonfreed's gravatar image

Is there a way to modify this script to enable click-through links from the front page slideshow on several templates?

Several templates have front page slideshow clickthroughs disabled, which is really annoying!

Ideally, I'd like somehow to link all the slides in the slideshow to the same URL (to make it easier).

Is there a way of doing this with JQuery - Tried modifying the script above so that it references the CSS related to the slideshow, but with no iuck.

(Sep 26 '13 at 11:03) szracer szracer's gravatar image

If I’m trying to do this from a subpage is there a different id than “.homepage” I should be using?

Trying to link the thumbnail image on this page:

Thank you!

(Mar 05 at 20:10) jenmarek jenmarek's gravatar image

@jenmarek – Quick note: .homepage is a class (classes are named with the dot notation, IDs with the hash – #).

That particular page can be targeted with its collection id: collection-54f8f825e4b05e6b5c3b13b6, so:

#collection-54f8f825e4b05e6b5c3b13b6 .main-image-wrapper img

(I haven’t tested this, but you can find the collection id for yourself by looking at the source of the page, then searching for <body).

(Mar 06 at 05:27) neeklamy neeklamy's gravatar image

Thanks so much for your response! Unfortunately it didn’t work.

This is the code I used:

<script src="//"></script>
<script>$(" #collection-54de9cd5e4b0409b0655fbc2 .main-image-wrapper img").wrap("<a href='/thework-yahoobusstopderby'></a>'");</script>

I put this in the settings for both the image page and the subpage, no worky.

So I think one of the issues is that I have 4 subpages within my index and I’m trying to link those four parallax images to four different pages:

The Description/titles are clicking through correctly right now, but I’d love the whole image to be clickable.

Many thanks for your help!

(Mar 06 at 18:57) jenmarek jenmarek's gravatar image

Hope someone is still following this post.

Hi all,

I'm trying to figure out how to add a set of links to the bottom of my banner image in Montauk. I've tried the jQuery posted above,but it's not working. I change the classes to match the Montauk template

<script src="//"></script>
<script>$(".page-image .image-wrapper img[data-src]").wrap("<a href=''>Text Here</a>'");</script>

Can anyone tell me what I'm doing wrong?

answered Mar 07 at 15:29 by far2canadian 1


I managed to make this work by editing the CSS properties of the page description, moving the text to the bottom of the banner, and linking the text.

answered Mar 07 at 16:57 by far2canadian 1

Your Answer
toggle preview

Follow This Question

Once you sign in you will be able to subscribe for any updates here

Markdown Basics

  • *italic* or __italic__
  • **bold** or __bold__
  • link:[text]( "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported



Asked: May 31 '13 at 12:45

Seen: 6,205 times

Last updated: Mar 07 at 16:57

Established 2004 Handmade in NYC