Jump to content

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

Recommended Posts

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

Link to comment
  • Replies 6
  • Views 753
  • Created
  • Last Reply

Top Posters In This Topic

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?

image.thumb.png.9993023fe7d0fc93098de4919427c8ed.png

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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?

image.thumb.png.9993023fe7d0fc93098de4919427c8ed.png

YES! that's exactly what I meant! I will try to attach an image now, I want to make something like this: 721263755_ScreenShot2021-09-29at20_31_58.png.cffbfdd4e3874c1b1650253d78c34614.png 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!

Link to comment

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

Link to comment
  • 4 weeks later...

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.

Edited by codeandtonic

Freelance Squarespace developer making plugins like Full-Width Blocks, Hover effects for grid gallery and the Darkmode plugin. I know Squarespace inside out and I'm able to solve pretty much any Squarespace code problem.

Get in touch here!

Link to comment
  • 1 year later...
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

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

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.