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