Jump to content

Is it possible to use a portfolio layout but change the links from Projects to external URLs?

Recommended Posts

@tuanphan I'm looking for help with a site I'm building

https://jlgroup.squarespace.com/

Password: jlgroup2024

I've used the following code, but it's not working

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('[section[data-section-id="654e393b3cb0792dfdc5ca25"] a.portfolio-hover-item:nth-child(1)').attr('href','https://jlgroup.squarespace.com/technical-services-overview');
    $('[section[data-section-id="654e393b3cb0792dfdc5ca25"] a.portfolio-hover-item:nth-child(2)').attr('href','https://jlgroup.squarespace.com/professional-services-overview');
});
</script>

 

Could you let me know why it's not working? Thank you in advance! 

Link to comment
On 11/18/2023 at 7:14 PM, tiffybennett1 said:

@tuanphan I'm looking for help with a site I'm building

https://jlgroup.squarespace.com/

Password: jlgroup2024

I've used the following code, but it's not working

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('[section[data-section-id="654e393b3cb0792dfdc5ca25"] a.portfolio-hover-item:nth-child(1)').attr('href','https://jlgroup.squarespace.com/technical-services-overview');
    $('[section[data-section-id="654e393b3cb0792dfdc5ca25"] a.portfolio-hover-item:nth-child(2)').attr('href','https://jlgroup.squarespace.com/professional-services-overview');
});
</script>

 

Could you let me know why it's not working? Thank you in advance! 

Your Portfolio Layout is Grid, so will need a different code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('[section[data-section-id="654e393b3cb0792dfdc5ca25"] a.grid-item:nth-child(1)').attr('href','https://jlgroup.squarespace.com/technical-services-overview');
    $('[section[data-section-id="654e393b3cb0792dfdc5ca25"] a.grid-item:nth-child(2)').attr('href','https://jlgroup.squarespace.com/professional-services-overview');
});
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
15 hours ago, tuanphan said:

Your Portfolio Layout is Grid, so will need a different code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('[section[data-section-id="654e393b3cb0792dfdc5ca25"] a.grid-item:nth-child(1)').attr('href','https://jlgroup.squarespace.com/technical-services-overview');
    $('[section[data-section-id="654e393b3cb0792dfdc5ca25"] a.grid-item:nth-child(2)').attr('href','https://jlgroup.squarespace.com/professional-services-overview');
});
</script>

 

I've put this in the footer injection, but it's still not redirecting to the page. Not sure what I've done wrong here 

Link to comment
On 11/21/2023 at 1:12 AM, tiffybennett1 said:

I've put this in the footer injection, but it's still not redirecting to the page. Not sure what I've done wrong here 

ah there has an error with [ symbols, use this new code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('[data-section-id="654e393b3cb0792dfdc5ca25"] a.grid-item:nth-child(1)').attr('href','https://jlgroup.squarespace.com/technical-services-overview');
    $('[data-section-id="654e393b3cb0792dfdc5ca25"] a.grid-item:nth-child(2)').attr('href','https://jlgroup.squarespace.com/professional-services-overview');
});
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...

@tuanphan I am also looking to have my portfolio pages be directed to an external link (youtube videos) when you click on each portfolio item. 
For example: here is the page with the portfolio: https://elliejames.work/film-video and here is the specific page of the portfolio: https://elliejames.work/film-video/sweetdreams
However, I want the link to go to https://youtu.be/vkuy5ULXl_I instead of going to the portfolio page. How would I do this? If you can please help me, I would be so grateful!

Link to comment
On 1/5/2024 at 6:28 AM, ellieqg said:

@tuanphan I am also looking to have my portfolio pages be directed to an external link (youtube videos) when you click on each portfolio item. 
For example: here is the page with the portfolio: https://elliejames.work/film-video and here is the specific page of the portfolio: https://elliejames.work/film-video/sweetdreams
However, I want the link to go to https://youtu.be/vkuy5ULXl_I instead of going to the portfolio page. How would I do this? If you can please help me, I would be so grateful!

You mean this item?

image.png.8ed1e44f04acb8ff935680812c2080e2.png

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>
$(document).ready(function() {
	$('a.grid-item[href="/film-video/sweetdreams"]').attr('href','https://youtu.be/vkuy5ULXl_I');
});
</script>

(you can also consider use lightbox, it means, click video >> show video in lightbox)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...

Can anyone help with this please, I am using the code below, the nth-child items are all going to the first link which is ref','/composite-technologies-landing

I have left test links in for now

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('[data-section-id="65c4fccdab34750b55f83034"] a.portfolio-hover-item:nth-child(1)').attr('href','/composite-technologies-landing');
    $('[data-section-id="65c4fccdab34750b55f83034"] a.portfolio-hover-item:nth-child(2)').attr('href','https://abc.com');
    $('[data-section-id="65c4fccdab34750b55f83034"] a.portfolio-hover-item:nth-child(3)').attr('href','https://bbc.com');
  $('[data-section-id="65c4fccdab34750b55f83034"] a.portfolio-hover-item:nth-child(4)').attr('href','https://instagram.com');
});
</script>

 

The site is at https://premier-technologies-group.squarespace.com/ and the password is: rubberhose

Link to comment
17 hours ago, Adaptive said:

Can anyone help with this please, I am using the code below, the nth-child items are all going to the first link which is ref','/composite-technologies-landing

I have left test links in for now

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('[data-section-id="65c4fccdab34750b55f83034"] a.portfolio-hover-item:nth-child(1)').attr('href','/composite-technologies-landing');
    $('[data-section-id="65c4fccdab34750b55f83034"] a.portfolio-hover-item:nth-child(2)').attr('href','https://abc.com');
    $('[data-section-id="65c4fccdab34750b55f83034"] a.portfolio-hover-item:nth-child(3)').attr('href','https://bbc.com');
  $('[data-section-id="65c4fccdab34750b55f83034"] a.portfolio-hover-item:nth-child(4)').attr('href','https://instagram.com');
});
</script>

 

The site is at https://premier-technologies-group.squarespace.com/ and the password is: rubberhose

You use incorrect tag for nth-child, it should be for <li> tag, not <a> tag 

[data-section-id="65c4fccdab34750b55f83034"] li:nth-child(1) a.portfolio-hover-item

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...
On 5/21/2024 at 2:15 AM, racheldrumm said:

Hi Tuan! I tried following this thread but got a bit lost in the code. Can you help me redirect the third link on this portfolio page (Refuge College) to refugelsu.com ?

https://papaya-red-rphp.squarespace.com/ministries

PW: thechapelbr

Use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('a.portfolio-hover-item[href="/ministries/refuge"]').attr('href','https://www.refugelsu.com/');
});
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.