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

I am very new to this, so sorry if I'm not very clear about my problem.

So. I made a gallery page (a portfolio) to showcase projects:

and inside, there are what's called 'Projects':

these projects are individual pages.

When I'm browsing the gallery and pressing any of these links, it is taking me to the project page, but instead, I wish to relink them to an external URL site. but it's not possible. It is only letting me relink to internal sites via slug. I tried doing URL Mappings (I made sure I wrote it right):

but it doesn't work.
I read that it might work if I could disable these pages, but there isn't any option to.

TL;DR:
I'm looking for a way to relink project pages to external sites (like youtube). how do?

THX alot!

URL Mapping for 404 pages only

You mean

When users on Portfolio LIST page >> Click on each sub page >> It will redirect to external site?

Hi tuan!
Yes, that's exactly what I mean. My programmer friend managed to help me out with an injected java script to actually redirect the links to external ones! So I'm good. I'd share his code but I think I need his permission.

Also, wanted to say thanks alot tuan, I've been using your solutions for however long i'm making my website.

I also use JavaScript to achieve this.

Or recreate portfolio with Blog Page then use Summary BLock to pull out posts & use Source URL to redirect to external link.

I was just running into the same issue (trying to figure out how to link portfolio pages to an external weblink when you click on them). Wondering if anyone knows the code that I would need to achieve this.

Thanks

Same here. I enjoy the portfolio list interactions but would like them to click through to other normal blank pages I've already built out with content. 

www.grahamcerceo.com/portfolio-test

Is there a way to achieve this @tuanphan ?

On 3/7/2023 at 5:17 AM, Jordan22 said:

I was just running into the same issue (trying to figure out how to link portfolio pages to an external weblink when you click on them). Wondering if anyone knows the code that I would need to achieve this.

Thanks

If you share link to your site, we can help easier

On 3/9/2023 at 9:16 AM, gcerceo said:

Same here. I enjoy the portfolio list interactions but would like them to click through to other normal blank pages I've already built out with content. 

www.grahamcerceo.com/portfolio-test

Is there a way to achieve this @tuanphan ?

You mean change to 4 custom urls?

Yes, I'd like to use 4 different custom URLs of pages already built for those 4 links. And, have the ability to add more in the future.

On 3/15/2023 at 10:08 AM, gcerceo said:

Yes, I'd like to use 4 different custom URLs of pages already built for those 4 links. And, have the ability to add more in the future.

Add this to Settings > Advanced > Code Injection > Footer

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

Replace example urls with your desired url

@tuanphan thank you for providing these workarounds. I'm finishing this work now and having some trouble with SS only linking the first page as all the other pages, despite having the appropriate URL for each page placed exactly where you instructed. Here's my code, and the page. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('[data-section-id="640244300a0dcf4d23913a59"] a.portfolio-hover-item:nth-child(1)').attr('href','https://www.grahamcerceo.com/brand-refinement');
    $('[data-section-id="640244300a0dcf4d23913a59"] a.portfolio-hover-item:nth-child(2)').attr('href','https://www.grahamcerceo.com/brokermint-baddies');
    $('[data-section-id="640244300a0dcf4d23913a59"] a.portfolio-hover-item:nth-child(3)').attr('href','https://www.grahamcerceo.com/in-house-video');
  $('[data-section-id="640244300a0dcf4d23913a59"] a.portfolio-hover-item:nth-child(4)').attr('href','https://www.grahamcerceo.com/customer-stories');
  $('[data-section-id="640244300a0dcf4d23913a59"] a.portfolio-hover-item:nth-child(5)').attr('href','https://www.grahamcerceo.com/how-it-works-refresh');
});
</script>

https://www.grahamcerceo.com/portfolio-test

17 hours ago, gcerceo said:

@tuanphan thank you for providing these workarounds. I'm finishing this work now and having some trouble with SS only linking the first page as all the other pages, despite having the appropriate URL for each page placed exactly where you instructed. Here's my code, and the page. 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('[data-section-id="640244300a0dcf4d23913a59"] a.portfolio-hover-item:nth-child(1)').attr('href','https://www.grahamcerceo.com/brand-refinement');
    $('[data-section-id="640244300a0dcf4d23913a59"] a.portfolio-hover-item:nth-child(2)').attr('href','https://www.grahamcerceo.com/brokermint-baddies');
    $('[data-section-id="640244300a0dcf4d23913a59"] a.portfolio-hover-item:nth-child(3)').attr('href','https://www.grahamcerceo.com/in-house-video');
  $('[data-section-id="640244300a0dcf4d23913a59"] a.portfolio-hover-item:nth-child(4)').attr('href','https://www.grahamcerceo.com/customer-stories');
  $('[data-section-id="640244300a0dcf4d23913a59"] a.portfolio-hover-item:nth-child(5)').attr('href','https://www.grahamcerceo.com/how-it-works-refresh');
});
</script>

 

https://www.grahamcerceo.com/portfolio-test

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="640244300a0dcf4d23913a59"] li:nth-child(1) a').attr('href','https://www.grahamcerceo.com/brand-refinement');
    $('[data-section-id="640244300a0dcf4d23913a59"] li:nth-child(2) a').attr('href','https://www.grahamcerceo.com/brokermint-baddies');
    $('[data-section-id="640244300a0dcf4d23913a59"] li:nth-child(3) a').attr('href','https://www.grahamcerceo.com/in-house-video');
  $('[data-section-id="640244300a0dcf4d23913a59"] li:nth-child(4) a').attr('href','https://www.grahamcerceo.com/customer-stories');
  $('[data-section-id="640244300a0dcf4d23913a59"] li:nth-child(5) a').attr('href','https://www.grahamcerceo.com/how-it-works-refresh');
});
</script>

YES! Works like a charm. I noticed the li: adjustment.

Now I'm experiencing each link going to the dummy portfolio pages on mobile, instead of proper URLs, and while in Chrome incognito.

Not sure what happened, but now none of the appropriate URLs are linking through to their pages. Everything goes to the dummy portfolio pages. 

Correction, your first code string worked.

Did you solve all or still need help?

Your original code worked great. Not sure why it was giving me errors at first. Thank you @tuanphan you're amazing!

I'm really keen to implement this in to one of my portfolios and tried with the below code with no success... (I do have 5 other portfolios on the website so wonder if this may be why...)  any tips?

@SophieW For the code to work, you've to change the value of the '[data-section-id="640244300a0dcf4d23913a59"]' according to your website.

Thank you Lesum how do I locate my data section id? I've viewed page source for each section and copied/pasted but still not working 🤔 

9 hours ago, SophieW said:

Thank you Lesum how do I locate my data section id? I've viewed page source for each section and copied/pasted but still not working 🤔 

Use this tool to find data section id: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

or share link to your portfolio page, we can give exact code 

@tuanphan I'm trying to implement this on my website, but when i add the jquery, all my website is gone. Any help?

As soon as i add this: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

I tried adding both in footer injection, and header injection. All pages from my website are gone. Any idea why?

Page is: glimpsevfx.squarespace.com

On 8/23/2023 at 10:47 PM, Glimpse_web said:

@tuanphan I'm trying to implement this on my website, but when i add the jquery, all my website is gone. Any help?

As soon as i add this: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

I tried adding both in footer injection, and header injection. All pages from my website are gone. Any idea why?

Page is: glimpsevfx.squarespace.com

Can you take a quick video after adding code to Footer Code Injection?

Hi! Squarespace n00b here. 

I'm trying to do the same thing. Here's a portfolio. I'm going to add company logos to each. When someone clicks on the logo, I'd like it to redirect to that company's website. 

How do I do that?! 

I tried to follow the instructions above and went to Settings --> Developer Tools --> Code Injection, but that only gives options to edit Header, Footer, and a few other things. 

Then I figured I'd try URL mappings. I did "/portfolio/https/beaconsai -> https://beacons.ai/ 301" to try and make the first logo redirect to beacons.ai...to no avail. 

I'd be fine if there's a way to do this as a blog, too! I just don't want it to redirect to any blog pages. It WOULD be nice however, to have tags (see Notion as example). 

Please help 🙏

If anyone else sees this thread -- rerouting to this other really helpful one!! 

On 9/16/2023 at 4:29 AM, EllieE said:

If anyone else sees this thread -- rerouting to this other really helpful one!! 

 

Did you solve or still need help?