Portfolio customization & link redirection

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.

Hi,

If your site is private/trial, you can setup password (access password, not login password) & share url again, we can give the Script code to solve these.

@tuanphanHere:

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

zcolor2022

Thank you so much!

Thanks so much, man! You're the best!

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

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>

"

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!

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

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?

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

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!

Hi,

so this is the main portfolio page

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

The url doesn't exist

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

21 hours ago, ZAM said:

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

Yes. What is your portfolio page url? We can use code to achieve this

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.

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.

Do you know how to add anchor id yet?

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

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!

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?

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>