Jump to content

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

Recommended Posts

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:
image.png.1d849d84c21e736dcfc322495e0a25d5.png

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

image.png.3824e427c53acdea1d377cf38eee1b40.png

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):
image.png.6669b704665d24e1a4fca58c0e94f67b.png

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!

Edited by ksotv118
Link to comment

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?

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.

Link to comment

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.

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 11 months later...

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

Link to comment

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 ?

Edited by gcerceo
Link to comment
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?

image.thumb.png.1b14aceb9d436b652de13420f6c7797c.png

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...

@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

Link to comment
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>

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
Posted (edited)

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.

Edited by gcerceo
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.