Jump to content

Portfolio customization & link redirection

Go to solution Solved by tuanphan,

Recommended Posts

Posted

Hello,

 

I'm building a new template for my site. I want to take advantage of the new portfolio feature; however, I'm hitting a wall on customization.

I'm using the "Hover: Background" layout and I noticed that if I change the link format, either from stacked to inline, the change is applied to all portfolios using the "hover: Background" layout. This feels more like a bug instead of a feature, and is very annoying. 

Can this be fixed with CSS or code injection?

-----

Additionally, I'd like to force redirect a portfolio link to another page. (Essentially, I want to have a portfolio inside portfolio, so I can use the hover background twice)

I used inspector to figure out the ID of the link:

portfolio-hover-item

portfolio-hover-item-content

But I don't have the skill in css or html to write a redirect.

 

Hope any you great people can help me out.

Thank you in advance

Unfortunately, I can't share a link to the site, as it has content that isn't public yet.

  • Solution
Posted
On 1/1/2022 at 6:48 PM, zemaria said:

@tuanphanHere:

https://violet-ladybug-x82t.squarespace.com/

zcolor2022

 

Thank you so much!

#2. Add to Homepage Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  // commercial
	$('li:nth-child(1) a.portfolio-hover-item').attr('href','https://beaverhero.com');
   // Film
	$('li:nth-child(2) a.portfolio-hover-item').attr('href','https://google.com');
   // Music Video
	$('li:nth-child(3) a.portfolio-hover-item').attr('href','https://facebook.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!)

  • 4 weeks later...
Posted

Hello! thanks so much for the code:

 

It works perfectly for the hoover portfolio style page. But I want to have the same redirection with a "grid portfolio" 

.class="portfolio-grid-overlay grid-wrapper collection-content-wrapper"

I tried changing the code. instead of the element 'portfolio-hover-item' I can see i front of href there is a 'grid-item' class. I can't make it redirect.

Can you please help me out?!

 

lemon-decagon-yy2w.squarespace.com

password: help

 

Much appreciaqted!!

 

 

Posted

I solved it with this code yesss

 

"

<script>
(function(){
    window.addEventListener('load', function() {
    var link = document.querySelector('a[href="REPLACEYOURPATH"]');
    link.href = 'https://INSERTYOURLINK';

})

})()
</script>

 

"

Posted
On 2/1/2022 at 12:45 PM, aaaallleeexx said:

I solved it with this code yesss

 

"

<script>
(function(){
    window.addEventListener('load', function() {
    var link = document.querySelector('a[href="REPLACEYOURPATH"]');
    link.href = 'https://INSERTYOURLINK';

})

})()
</script>

 

"

Hi Alex, I am also trying to do the same redirection trick with a grid portfolio. Could you clarify what you are putting in for "REPLACEYOURPATH" or how you are identifying each element of the portfolio grid? Thanks!

Posted

Hello, late reply here but here you go

you add the code by going to the menu page on the left. on that portfolio page right side of it there's that settings button - click on it - go to advance and inject code thereby replacing those stuff. 

that code is for portfolio grid tho other code works with portfolio hover, just FYI

  • 1 month later...
Posted (edited)

Hi! I need help redirecting some items in a portfolio layout to another specific portfolio page.

So in my home page I have four main items of my architecture work: apartments, commercial, multidwelling and house construction.

What I need is for each one of these items to point to the specific portfolio page that displays all of the thumbnails of work created for each individual category (when you click on the thumbnail you can see all the work details).

I've tried so many code options but still can't figure it out. Can you help me?

Edited by DanielaHS
Posted
9 hours ago, DanielaHS said:

Hi! I need help redirecting some items in a portfolio layout to another specific portfolio page.

So in my home page I have four main items of my architecture work: apartments, commercial, multidwelling and house construction.

What I need is for each one of these items to point to the specific portfolio page that displays all of the thumbnails of work created for each individual category (when you click on the thumbnail you can see all the work details).

I've tried so many code options but still can't figure it out. Can you help me?

If you share link to portfolio page, we can help easier

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!)

Posted

of course:

so this is the main portfolio page

https://stingray-kale-f29g.squarespace.com/allcategories

 

when you click on apartments you should be redirected here:

https://stingray-kale-f29g.squarespace.com/apartmentshome

when you click on commercial you should be redirected here:

https://stingray-kale-f29g.squarespace.com/commercial

when you click on house construction:

https://stingray-kale-f29g.squarespace.com/house-construction

when you click on multidwelling:

https://stingray-kale-f29g.squarespace.com/multi-dwelling

 

Also, one additonal question, how do you make the handle: all categories disappear from the dropdown menu? 

While im in this page it should be projects home.

 

Thank so much for the help!

 

 

Screen Shot 2022-04-06 at 1.01.27 PM.png

Screen Shot 2022-04-06 at 1.01.32 PM.png

  • 1 year later...
Posted

Hi I want to link the Portfolio hover page to pages I've already built rather than portfolio subpages.  Is this possible?

  • 9 months later...
Posted

Hello

I also want to use the portfolio page with the hover feature, and have no need for the project pages as I want the hover links when activated to smooth scroll to anchors further down the same page. I have put the code in supplied by @tuanpan, Posted January 4, 2022 (thanks!) but how would I alter that code to jump to the anchor points please?
Screen grab of custom code below.

Thanks in advance.

image.thumb.png.415410258eab9ba6e2f4ec7c9a4e9314.png

Posted
20 hours ago, AmeliaJ said:

Hello

I also want to use the portfolio page with the hover feature, and have no need for the project pages as I want the hover links when activated to smooth scroll to anchors further down the same page. I have put the code in supplied by @tuanpan, Posted January 4, 2022 (thanks!) but how would I alter that code to jump to the anchor points please?
Screen grab of custom code below.

Thanks in advance.

image.thumb.png.415410258eab9ba6e2f4ec7c9a4e9314.png

Do you know how to add anchor id yet?

And anchor point - portfolio will on same page or different page?

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!)

Posted

Hi @tuanphan thank you… I appreciate you getting back to me! I ended up switching out the the href urls for section divs/ blocks (if that's what they're called) and the anchor links are now working for me. Also, I want to say thanks for your contributions. I've grabbed a couple of other bits of code from some of your other contributions. It's a big help – thank you!

Screenshot 2024-04-20 at 16.40.11.png

  • 6 months later...
Posted
On 1/4/2022 at 2:40 AM, tuanphan said:

#2. Add to Homepage Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  // commercial
	$('li:nth-child(1) a.portfolio-hover-item').attr('href','https://beaverhero.com');
   // Film
	$('li:nth-child(2) a.portfolio-hover-item').attr('href','https://google.com');
   // Music Video
	$('li:nth-child(3) a.portfolio-hover-item').attr('href','https://facebook.com');
});
</script>

 

@tuanphan

I have changed the design of my site and choose to use a grid overlay instead of the hover background. Can you please help me? What do I need to change in the code so that it works with the grid overlay setting instead of hover background?

Posted
On 11/1/2024 at 2:42 AM, zemaria said:

@tuanphan

I have changed the design of my site and choose to use a grid overlay instead of the hover background. Can you please help me? What do I need to change in the code so that it works with the grid overlay setting instead of hover background?

Site url doesn't work. Can you check it again?

You can also use code like this (this code for my example site, with your site will need to adjust item url). You can share link to portfolio page on your site + desired url, I will give exact code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('a.grid-item[href="/portfolio/second-nature"]').attr('href','https://google.com');
  $('a.grid-item[href="/portfolio/bike"]').attr('href','https://instagram.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!)

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.