Jump to content

Change Portfolio URL Slug to reroute to another Portfolio

Recommended Posts

I think you're right that at the moment you can't do this within the editor for 7.1 sites. As far as I know, you've got two options here.

  1. Use javascript to change the target link (requires Premium/Business plan)
  2. an alternative would be to inject a meta refresh tag (inside a code block or in advanced page settings)

OPTION 1: Use some Javascript to change the link in the front page (requires Premium/Business Plan)

this is probably the kind of solution most would employ and it won't muck your editor up quite so much. you need to find the link that has the "wrong" link and replace it with the "right" link. put a code block in your page and put the following code in.

<script>
let link = document.querySelector(".grid-item[href='/portfolio/digital']");
if (link) { link.setAttribute("href","/digital"); }  
</script>

this will change the link. What this won't do is redirect people if they directly visit a /portfolio/digital link. this might not matter, but I guess if the script fails, or they type it in then maybe they'd end up at the wrong page. 

OPTION 2: Use a meta tag to redirect the /portfolio/digital page

HTML has a meta tag that you can put in a page to redirect it. You can use this in a code block, but it does have the nasty habit of redirecting the editor so make sure you're in safe mode.

First things first, be Safe!

 

Before we start though, putting in redirect code like this is probably going to cause some strange behaviour with the editing experience, so you need to first put your editor into "safe" mode. To do this, look at your URL while editing your site and after /config add /site and then press enter. so the address will look like this

http://star-caterpillar-ej7s.squarespace.com/config/safe

You will now see a bar at the bottom that tells you that code blocks have been turned off. like this

image.png.630ce9b135ae19afbddf4d2e66429dde.png

Once you've done that we can begin. Add a code block (you might need to add a blank section beneath your portfolio first to do this). Now put the following code in your code block

<meta http-equiv="refresh" content="0;url=/digital">

if you click the "Enable Scripts In Preview" the page should redirect immediately. (the 0 in that code tells it to redirect immediately"

personally I like this option as it doesn't muck around with the main homepage but it does require you to have the /safe option on. I'm pretty certain that this would work in non-premium plans too. You could probably do both to be honest.

 

 

One of those should do what you want, depending on your plan.

Great content on your site btw!

D

 

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment
  • 1 month later...

@iamdavehart Where would I input the javascript? I want to change a /work/uiux-mockups to link to my other portfolio with a /uiux-mockups. So I'm guessing the code would be this below but don't know where to insert my javascript code block. Thanks!
 

<script>
let link = document.querySelector(".grid-item[href='/work/uiux-mockups']");
if (link) { link.setAttribute("href","/uiux-mockups"); }  
</script>
Link to comment

if you're doing this in a 7.1 site, then find the portfolio list page that has the grid view on the front. in your case it will be the one with the url /work.

  • add a section after the portfolio grid. you can just use a blank one, set its height to small if you dont' want it to take up too much space.
  • insert a code block and copy the code in there. when the page loads it will find the item pointing ot work/uiux-mockups and repoint it to uiux-mockups (which will be another page you've created somewhere).

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

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.