How do I add a switcher icon for "home" portfolio navigation

Site URL: http://kiyary.com/portfolio

Hello guys!

I've been googling this for days, and I cannot find the answer, so I decided to post the question.

I would like to add an icon to go back to "all the projects" to my portfolio navigation in line to the previous/next, once I am in any project, just like the: 

<"name of the previous project"     >icon here<    "name of the next project">

I will attach an image of what I want. 🙂 I have seen it on other portfolios in Squarespace. If this is also possible to add in the blog, that would be amazing.

Also, I would love to be able to change the size of the navigation arrows (< / >) which are huge. 

Another question, is, is it possible to use a masonry grid for the portfolio instead of the available? (if I need to post this question somewhere else, just let me know 🙂 )

Thank you so much!

(I cannot upload an image, I get an error (Error code: -200) 😞 )

On 9/30/2021 at 2:06 AM, kiyary said:

Site URL: http://kiyary.com/portfolio

Hello guys!

I've been googling this for days, and I cannot find the answer, so I decided to post the question.

I would like to add an icon to go back to "all the projects" to my portfolio navigation in line to the previous/next, once I am in any project, just like the: 

<"name of the previous project"     >icon here<    "name of the next project">

I will attach an image of what I want. 🙂 I have seen it on other portfolios in Squarespace. If this is also possible to add in the blog, that would be amazing.

Also, I would love to be able to change the size of the navigation arrows (< / >) which are huge. 

Another question, is, is it possible to use a masonry grid for the portfolio instead of the available? (if I need to post this question somewhere else, just let me know 🙂 )

Thank you so much!

(I cannot upload an image, I get an error (Error code: -200) 😞 )

Do you mean adding an icon at center position (like in my below image) that directs your site back to https://www.kiyary.com/portfolio when clicked?

14 hours ago, bangank36 said:

Do you mean adding an icon at center position (like in my below image) that directs your site back to https://www.kiyary.com/portfolio when clicked?

YES! that's exactly what I meant! I will try to attach an image now, I want to make something like this:  It could direct me to "home" or to the "portfolio" page. I would love it if I could choose.

I am also trying , to use the image gallery on the home page as the portfolio , since portfolio doesn't have masonry style; I wanted to try to use this code fromhttps://www.ghostplugins.com/steps/wj7238uh  to add hover text to make it behave as the portfolio page,  but it is not working, any ideas why?

// Grid Gallery Zoom //

@media all and (min-width:770px){
  .sqs-block-gallery .sqs-gallery-design-grid .slide:hover img{
    transform: scale(1.1);
    -webkit-filter: brightness(60%);
    filter: brightness(60%);
  }
  .sqs-block-gallery .sqs-gallery-design-grid .slide:hover .image-slide-title{
    opacity: 1  
  }
  .sqs-block-gallery .sqs-gallery-design-grid .slide img{
    -webkit-transition: all 1s ease-in-out !important;
    -moz-transition: all 1s ease-in-out !important;
    -o-transition: all 1s ease-in-out !important;
    transition: all 1s ease-in-out !important;
  }
  .sqs-block-gallery .sqs-gallery-design-grid .image-slide-title{
    position: absolute;
    opacity: 0;
    top: 40%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    -webkit-transition: all 1s ease-in-out !important;
    -moz-transition: all 1s ease-in-out !important;
    -o-transition: all 1s ease-in-out !important;
    transition: all 1s ease-in-out !important;
    z-index:99999999999;
    font-size: 50px !important;
    font-weight: 400 !important;
    color: #ffffff!important;
    padding: 10px;
  }
}

Thank you so much for helping!! 😄 you people are so awesome!

Oh, extra question, I would love to have that icon for now, as I see it simpler to do, or (I don't know if it's possible) but I would love to have a "portfolio block" ( I don't know if it's called as such) bellow. What I mean is if there's a way to open (expand) the project selected above the portfolio. I will try to find an example of what I mean. 
Thank so much!!! 🙂 🙂 🙂 🙂

Hi kiyary!

I wrote  a blogpost about this, including a short video and copy-pasteable code on how to achieve this + some thought on improving the UX based on some studies regarding icons vs text labels

-Fenix / code + tonic

P.S. I'm one of the top freelance Squarespace specialists and  also available for freelance consulting.

Hi @codeandtonic - I tried using the code published on your blog but it didn't work. I keep getting an syntax error message. Any ideas why? 

Also, is there a way to repeat the portfolio grid after the classic pagination before and after? 

Thank you!!

This is my website btw, if it helps: https://www.laurapulecio.com/ 

20 hours ago, Lpulecio said:

Hi @codeandtonic - I tried using the code published on your blog but it didn't work. I keep getting an syntax error message. Any ideas why? 

Also, is there a way to repeat the portfolio grid after the classic pagination before and after? 

Thank you!!

This is my website btw, if it helps: https://www.laurapulecio.com/ 

Code in that blog is script code. You need to add it to Code Injection, not Custom CSS box