7.1 Portfolio Page Image linked to another Portfolio Page

Site URL: https://goldfish-parsnip-mhd3.squarespace.com/portfolio

Hi. Learning how Squarespace in 7.1 works, and was wondering if it might be possible to have a "clickthrough url" option for each "Project" on a "Portfolio Page". So one of my main pages can be a "Portfolio Page" of main categories, which then link to another "Portfolio Page" of the projects in that category. Which I would then link to the individual project page. Any chance that might be possible? I guess it would mean having the ability to turn on or off the "clickthrough url" option for each portfolio item so maybe not...? What I really seem to be trying to do is to use a Grid:Overlay on a Portfolio Page as a kind of secondary navigation to get me to the regular Portfolio Pages. Just curious if anyone had thoughts?

You can add Image Blocks, then we will give the code to make hover/overlay feature.

@tuanphan

Can you share the code to do this? 

On 12/31/2021 at 8:17 PM, zemaria said:

@tuanphan

 

Can you share the code to do this? 

 

Hi. Can you share link to page where you added image blocks? We can check easier

Each type of image block, maybe need a different code

Hi, of course: 

The URLs I want to redirect to are: 

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

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

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

You replied to my post with a similar issue about the putting a portfolio inside a portfolio:

Do you need any more information?

On 1/2/2022 at 11:04 PM, zemaria said:

Hi, of course: 

The URLs I want to redirect to are: 

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

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

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

You replied to my post with a similar issue about the putting a portfolio inside a portfolio:

Do you need any more information?

Add to Page 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>

Hi! I'm having a similar issue I believe.

I chose the Zion theme. Basically I want the home page to be a portfolio page with the list of projects in the text format (Design, Illustration). When you click on of the projects, it links to another portfolio page that has projects specific to that section For example, When you click on "Design", it leads to a portfolio page of my 6 design projects. When you click on one of those projects, it leads to a gallery page. I can see how you can make them pages that you get to through the navigation bar, but I'd rather get to them through clickable options of the front of the homepage. 

Any help is appreciated!

On 1/6/2022 at 1:50 AM, sydneyperkins said:

Hi! I'm having a similar issue I believe.

 

I chose the Zion theme. Basically I want the home page to be a portfolio page with the list of projects in the text format (Design, Illustration). When you click on of the projects, it links to another portfolio page that has projects specific to that section For example, When you click on "Design", it leads to a portfolio page of my 6 design projects. When you click on one of those projects, it leads to a gallery page. I can see how you can make them pages that you get to through the navigation bar, but I'd rather get to them through clickable options of the front of the homepage. 

Any help is appreciated!

You can use above code to do this. Replace example url with new urls

On 1/7/2022 at 9:44 AM, tuanphan said:

You can use above code to do this. Replace example url with new urls

Hello, is there any way to modify the above code so that it works with grid style portfolios? 

On 2/9/2022 at 6:38 AM, SpruceGooseTV said:

Hello, is there any way to modify the above code so that it works with grid style portfolios? 

Can you share link to your portfolio? I can check grid class name easier

Hi There Tuanphan

Our client would like each rollover in the portfolio to open a browser window with a url rather than link to the respective internal page. I would love it if you could provide me the code that would allow this to happen. Please take a look below. 

https://mu-ventures.squarespace.com/mu-ventures-portfolio

Hello,

I would like to do the same thing. My url is https://enriqueagudo.com/projects and I would like to have each of the project pages to link to the following URLs:

Pantheon at the V&A - Keep the project link

Ipseity - http://ipseity.art

Ipseity at IE University - https://www.ipseity.art/installation

Ipseity Costume Series - https://www.ipseity.art/costumes

Echoes - https://enriqueagudo.com/echoes

The Pantheon of Queer Mythology - https://www.thepantheonofqueermythology.com/

Devai - https://enriqueagudo.com/devaifilm

Please help, thank you so much in advance!

On 10/6/2022 at 4:59 PM, enagudo said:

Hello,

 

I would like to do the same thing. My url is https://enriqueagudo.com/projects and I would like to have each of the project pages to link to the following URLs:

 

Pantheon at the V&A - Keep the project link

Ipseity - http://ipseity.art

Ipseity at IE University - https://www.ipseity.art/installation

Ipseity Costume Series - https://www.ipseity.art/costumes

Echoes - https://enriqueagudo.com/echoes

The Pantheon of Queer Mythology - https://www.thepantheonofqueermythology.com/

Devai - https://enriqueagudo.com/devaifilm

 

Please help, thank you so much in advance!

Do you use Personal or Business Plan? Each plan will have a different solution for this problem

Hello. Three years later, I'm trying to do the same thing. Is this still the fix: adding image blocks with advanced code? I'm not quite following this thread. If someone can elaborate, that would be awesome.

SAME! Looking for a solution to linking to an external page in a new browser window - but only on select grid thumbnail images. Any help would be greatly appreciated!

https://www.littlebeast.nyc/

password: **&355!z2$

On 7/27/2024 at 6:58 AM, LITTLEBEAST said:

SAME! Looking for a solution to linking to an external page in a new browser window - but only on select grid thumbnail images. Any help would be greatly appreciated!

https://www.littlebeast.nyc/

password: **&355!z2$

Use this code to Code Injection > Footer

This code for item 1, 3 (from left to right), you can repeat similar for other items.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
  // cafe cluny
	$('a.grid-item[href="/projects/cafe-cluny-photography"]').attr('href','https://google.com');
  // website design
	$('a.grid-item[href="/projects/website-design-the-odeon"]').attr('href','https://ebay.com');
});
</script>