Index Page Thumbnail Link to External Site

Site URL: https://shannonfinnegan.com/

Hi!

I use an index page on my site to feature my projects. Each project has its own page. Recently a project has grown and now has it's own site. So I want the thumbnail on my home page to link to alt-text-as-poetry.net instead of /alt-text-as-poetry. Is there a way have the thumbnail as an external link with custom code?

On 9/4/2020 at 12:21 AM, tuanphan said:

Add to Home > Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
  // project 01
	$('article.index-item a[href="/alt-text-as-poetry"]').attr('href','https://beaverhero.com');
  // project 02
  $('article.index-item a[href="/selfportrait"]').attr('href','https://google.com');
});
</script>

Do similar for other items. Replace beaverhero, google with new url

This helped me a lot too, thank you!

Is there a way to open a link in a new tab? I played around with 'target="_blank"' and put it in different positions, but none seem to work…

Thanks in advance!

23 hours ago, freestyleshaver said:

This helped me a lot too, thank you!

Is there a way to open a link in a new tab? I played around with 'target="_blank"' and put it in different positions, but none seem to work…

Thanks in advance!

 

Use this new code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
  // open link new tag
  $('article.index-item a').attr('target','_blank');
  // project 01
	$('article.index-item a[href="/alt-text-as-poetry"]').attr('href','https://beaverhero.com');
  // project 02
  $('article.index-item a[href="/selfportrait"]').attr('href','https://google.com');
});
</script>

40 minutes ago, tuanphan said:

Use this new code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
  // open link new tag
  $('article.index-item a').attr('target','_blank');
  // project 01
	$('article.index-item a[href="/alt-text-as-poetry"]').attr('href','https://beaverhero.com');
  // project 02
  $('article.index-item a[href="/selfportrait"]').attr('href','https://google.com');
});
</script>

 

Works like a charm!

Thank you very very much!! You helped me a lot!

Do you need to fix these?

1. (Mobile/Tablet – Work > post) There is a scroll bar at bottom of the page

2. (Tablet – About) Want to increase text width?

https://shannonfinnegan.com/about

On 9/3/2020 at 11:21 PM, tuanphan said:

Add to Home > Settings > Advanced > Code Injection > Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
  // project 01
	$('article.index-item a[href="/alt-text-as-poetry"]').attr('href','https://beaverhero.com');
  // project 02
  $('article.index-item a[href="/selfportrait"]').attr('href','https://google.com');
});
</script>

Do similar for other items. Replace beaverhero, google with new url

Following on from this - I have a similar issue, I'm wanting to link the thumbnail for this gallery page:

https://www.arranandjules.co.uk/#/charllote/

to

https://www.arranandjules.co.uk/#/charlottt-tampubolon-london/

Essentially wanting to override the url slug when clicking the thumbnail if that makes sense.

Any help much appreciated 🙂

@tuanphan

On 8/10/2021 at 8:01 PM, cr1tchley said:

Following on from this - I have a similar issue, I'm wanting to link the thumbnail for this gallery page:

https://www.arranandjules.co.uk/#/charllote/

to

https://www.arranandjules.co.uk/#/charlottt-tampubolon-london/

Essentially wanting to override the url slug when clicking the thumbnail if that makes sense.

Any help much appreciated 🙂

@tuanphan

Hi. You mean thumbnails on this homepage? https://www.arranandjules.co.uk/

Do you use Personal or Business Plan?

Hey,

Yes, that homepage.

I have the business plan.

@tuanphan

On 8/12/2021 at 3:37 PM, cr1tchley said:

Hey,

Yes, that homepage.

I have the business plan.

@tuanphan

Try this code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
  // project 01
	$('#grid .item a[href="/charlotte/"]').attr('href','https://www.arranandjules.co.uk/#/charlottt-tampubolon-london/');
});
</script>

Hey,

Thanks for sending code above - just tried and unfortunately it didn't work. I added the code into the main footer injection section. It stoped the default slug link from loading and changed the url in the top browser search bar when clicking on the thumbnail. However it didn't load the page we're trying to redirect to (basically removing the clickthrough on the thumbnail).

Thanks,
Arran

@tuanphan

On 7/16/2021 at 12:09 AM, tuanphan said:

Use this new code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
  // open link new tag
  $('article.index-item a').attr('target','_blank');
  // project 01
	$('article.index-item a[href="/alt-text-as-poetry"]').attr('href','https://beaverhero.com');
  // project 02
  $('article.index-item a[href="/selfportrait"]').attr('href','https://google.com');
});
</script>

 

Thank you, @tuanphan - this works like a charm for the index page thumbnail (in my case linking to abother index within the website).

I am now trying to also link the Index Navigation list inline view (displaying below each index page) to link to the same external link - tinkering to target with code snippets below, but not working so far:

Link

Quote

  $('article.index-item a').attr('target','_blank');

  // project 01

$('article.index-item a[href="/index-test"]').attr('href','/test');

$('article.index-nav-link a[href="/index-test"]').attr('href','/test');

$('article.index-link-style-list-inline a[href="/index-test"]').attr('href','/test');

On 9/14/2021 at 11:08 PM, BureauSF said:

Thank you, @tuanphan - this works like a charm for the index page thumbnail (in my case linking to abother index within the website).

I am now trying to also link the Index Navigation list inline view (displaying below each index page) to link to the same external link - tinkering to target with code snippets below, but not working so far:

Link

 

Hi,

You mean links in bottom of page?

https://york-demo.squarespace.com/apprentice-branding

@tuanphan Yes, it is the index navigation in Link Style: List (inline) view

On 9/16/2021 at 12:47 PM, BureauSF said:

@tuanphan Yes, it is the index navigation in Link Style: List (inline) view

Use this code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
  // all
	$('a.index-nav-link[href="/"]').attr('href','https://beaverhero.com');
  // apprentice branding
  $('a.index-nav-link[href="/apprentice-branding"]').attr('href','https://google.com');
});
</script>

Do similar for other links

Thank you so much, @tuanphan - your contributions to the Squarespace forum are so highly appreciated!

This was the perfect fix ... now both the index thumbnail and inline index link to the external page!

Hello @tuanphan!

I used this code on my homepage in order to link index thumbnails to other index and gallery pages in my navigation and it worked great, thanks so much for it.

However, I noticed that if I click on my site logo to go back to my homepage and then click on an index thumbnail, the code no longer works. Any suggestions?

website url is https://www.coryemmasiegler.com/

Thanks!

On 7/9/2022 at 11:46 PM, CoryEmmaSiegler said:

Hello @tuanphan!

I used this code on my homepage in order to link index thumbnails to other index and gallery pages in my navigation and it worked great, thanks so much for it.

However, I noticed that if I click on my site logo to go back to my homepage and then click on an index thumbnail, the code no longer works. Any suggestions?

website url is https://www.coryemmasiegler.com/

Thanks!

 

Design > Site Styles > Disable Ajax Loading

On 9/19/2021 at 2:04 AM, tuanphan said:

Use this code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
  // all
	$('a.index-nav-link[href="/"]').attr('href','https://beaverhero.com');
  // apprentice branding
  $('a.index-nav-link[href="/apprentice-branding"]').attr('href','https://google.com');
});
</script>

Do similar for other links

Resolved my own bug. For reference to everyone else, I was missing this line of code for opening links up top:

  $('a.index-nav-link[href="/wayfinding-humane"]').attr('target','_blank');  

@tuanphan is there any way to get this function to work without killing Ajax loading? 

———

Hi Tuan! Hope this thread is still alive. I've just been attempting some similar linking on my site. I've managed to get the Index image link to function as well as turning of Ajax. However, I have not been able to get this line of code to work for in-line links. 

Link to my site: https://zaneliu.com/wayfinding-humane

I'm attempting to get the links at the bottom to correctly open an external URL in a new tab. If you could help with this it'd be very appreciated! Thank you!

 

On 10/19/2023 at 6:16 AM, zaneliu said:

 

 

Resolved my own bug. For reference to everyone else, I was missing this line of code for opening links up top:

  $('a.index-nav-link[href="/wayfinding-humane"]').attr('target','_blank');  

@tuanphan is there any way to get this function to work without killing Ajax loading? 

———

Hi Tuan! Hope this thread is still alive. I've just been attempting some similar linking on my site. I've managed to get the Index image link to function as well as turning of Ajax. However, I have not been able to get this line of code to work for in-line links. 

Link to my site: https://zaneliu.com/wayfinding-humane

I'm attempting to get the links at the bottom to correctly open an external URL in a new tab. If you could help with this it'd be very appreciated! Thank you!

 

Change the line to this

$('a.index-nav-link[href="/wayfinding-humane"], .page-description a, div#collection-footer-6518953523d07e0831e2e9bd a').attr('target','_blank');  

On 10/21/2023 at 4:47 AM, tuanphan said:

Change the line to this

$('a.index-nav-link[href="/wayfinding-humane"], .page-description a, div#collection-footer-6518953523d07e0831e2e9bd a').attr('target','_blank');  

 

Thanks @tuanphan! That does get the page to load the links with Ajax.

One additional question, I noticed that with Ajax on and the link opening in a separate tab, upon clicking either the Index image link or the links towards the bottom, it leaves the original tab in a blank state where it stalls on maintaining the original content. 

Do you know of any ways to maintain the original state? Thanks for all your help. This has been really fruitful learning already!

Best!

On 10/24/2023 at 3:38 AM, zaneliu said:

Thanks @tuanphan! That does get the page to load the links with Ajax.

One additional question, I noticed that with Ajax on and the link opening in a separate tab, upon clicking either the Index image link or the links towards the bottom, it leaves the original tab in a blank state where it stalls on maintaining the original content. 

Do you know of any ways to maintain the original state? Thanks for all your help. This has been really fruitful learning already!

Best!

I'm not familiar with Ajax. You try posting a new thread, maybe someone notice the post and will help.

14 hours ago, tuanphan said:

I'm not familiar with Ajax. You try posting a new thread, maybe someone notice the post and will help.

No problem! Thanks!