Making images on event page link to an external URL.

Hi all,

My organization runs events through a service called Classy. You can see an example page of an event here: https://give.asianhalloffame.org/event/19th-asian-hall-of-fame-induction-ceremony/e520197.

I would like to use the Squarespace event page as a one-stop listing of all our upcoming events as well as a backend that keeps track of our past events. However, as is, it seems that clicking the images on the page link to another Squarespace page. I would like images to link instead to external pages such as the example page above. Is there a way to do that?

Here is a link to our current WIP events page: https://www.asianhalloffame.org/events

I just wrote a quick guide, you can see. Tested on 7.1 Event Page.

#1. Hover on 3 dots > Click Settings

#2. Enter a text in Except

#3. Highlight it > Click Link icon

And add external url > Apply

Then Save

Result

#4. Add this code to Website Tools (under Not Linked) > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$("h1.eventlist-title").click(function() {
  window.open($(this).siblings(".eventlist-excerpt").find('p a').attr('href'), '_blank');
  return false;
});
$('a.eventlist-column-thumbnail').click(function() {
  window.open($(this).siblings(".eventlist-excerpt").find('p a').attr('href'), '_blank');
  return false;
});  
  $('a.eventlist-button').click(function() {
  window.open($(this).siblings(".eventlist-excerpt").find('p a').attr('href'), '_blank');
  return false;
});  
</script>
<style>
.eventlist-excerpt a {
    display: none;
}
</style>

the code will hide Excerpt Text URL + Change Button/Title/Image link to External Text URL

Hi tuanphan.

Thanks so much for your help! While the code works great for making the title and the view event buttons direct to external links, clicking the image seems to only go to an empty page with "about:blank" listed in the URL.

https://www.asianhalloffame.org/events

Here's the page so you can see it.

On 12/16/2023 at 1:08 AM, AsianHOF said:

Hi tuanphan.

Thanks so much for your help! While the code works great for making the title and the view event buttons direct to external links, clicking the image seems to only go to an empty page with "about:blank" listed in the URL.

https://www.asianhalloffame.org/events

Here's the page so you can see it.

Can you remove the code? I can check it again easier

On 12/16/2023 at 11:50 PM, tuanphan said:

Can you remove the code? I can check it again easier

 

Thanks for your continued help! I removed the code as you requested.

Hi! I am having the same issue. By clicking on the image, it takes me to a blank page. 

Any way to solve this issue? 

Thanks!

 

On 12/18/2023 at 3:41 PM, AsianHOF said:

Thanks for your continued help! I removed the code as you requested.

On 1/23/2024 at 1:00 PM, Nico13 said:

Hi! I am having the same issue. By clicking on the image, it takes me to a blank page. 

Any way to solve this issue? 

Thanks!

 

 

Use this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(() => {
    const a = $('.eventlist-event')
    for (let i=0; i<a.length; i++) {
        const newH = $(a[i]).find("a:contains('view external url')").attr('href');
        $(a[i]).find('a').click((e) => {
            e.preventDefault()
            window.open(newH)
        })
    }
})
</script>
<style>
.eventlist-excerpt a {
    display: none;
}
</style>

Too bad that the Source URL on events does not have option to replace link like Blog post 😕