Jump to content

Double block on portfolio page

Recommended Posts

13 hours ago, CindyHo said:

Site URL: https://www.cindyho.design/

Hi there, I'd like to implement two blocks side-by-side for each of my work/case study in the Portfolio page. I've attached an example image here. Can you please help?image.thumb.png.1280a0ae3876ddfd73fa0da3c2884808.png

I think we can use 2 image blocks and use some Css code to remove the padding with the page

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Hi bangank36! Unfortunately the portfolio page currently does not allow for me to add image or text or any blocks of that kind for that matter. The only customisation I can do is the layout (I currently have input some CSS to make it a one-case study vertical line).

Link to comment
On 8/8/2022 at 9:24 AM, CindyHo said:

Site URL: https://www.cindyho.design/

Hi there, I'd like to implement two blocks side-by-side for each of my work/case study in the Portfolio page. I've attached an example image here. Can you please help?image.thumb.png.1280a0ae3876ddfd73fa0da3c2884808.png

You mean do this on Portfolio List Page or Sub Pages?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 8/10/2022 at 8:59 PM, tuanphan said:

You mean do this on Portfolio List Page or Sub Pages?

Add to Design > Custom CSS

div#gridThumbs {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    padding: 0 !important;
    grid-gap: 0px !important;
}
div#gridThumbs h3 {
    padding-left: 20px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@tuanphan Thank you, but I didn't describe the issue clearly. I wanted a wide frame for each item of work in the portfolio page, not have two work items side by side. 🙂

That said, I worked around it by doing the following:

1. Making a new feature image that is wide
2. Changing the left-and-right paddings in the CSS code.

div#gridThumbs {
    grid-template-columns: repeat(1,minmax(0,1fr)) !important;
    padding-left: 18vw;
    padding-right: 18vw;
}

3. I also "hacked" the height by adjusting the height % where the code is for the image hover.

It looks like how I intend it to now, but there are two remaining issues:

1. I'd like to clean up the code because I don't want to do an image hover anymore now that I'm applying this style. Currently it's a hack because I've uploaded the same image in the image hover code. How do I remove the image hover code while still maintaining the shorter height?
2. The portfolio title is now very far away from the image, I think because I've specified height by a lower % (70%). Is there a way I can remove the need for a title outside the image box? (Squarespace won't let me save without a title input)

Edited by CindyHo
Link to comment

#1. I don't see hover effect. Which page are you referring to?

https://www.cindyho.design/work

#2. No title show here

https://www.cindyho.design/work

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Hi @tuanphan, I got a friend to help me look at the code and he helped me remove the hover code and the project title. This is what I have in CSS:
 

div#gridThumbs {
    grid-template-columns: repeat(1,minmax(0,1fr));
    padding-left: 18vw;
    padding-right: 18vw;
}

div#gridThumbs .portfolio-text {
  display: none;
  margin: 0;
}

a.grid-item .grid-image .grid-image-inner-wrapper img {
  object-fit: contain !important;
}

There is still the issue of sizing. Currently the image is at 70% of the parent element. You should be able to see a clickable area below each image. How do I resize the element so that it is exactly the size of the image i have on my portfolio page? https://www.cindyho.design/work

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.