Jump to content

Rounded edges image cards

Recommended Posts

Hi everyone, 

I have managed to add CSS to pages that include lots of images, for instance a list of team member images. When you click on each image it takes you to their individual profile page where I have an image card with text at the side.

I can add CSS to change each individual image card, but as there are approx. 20 pages of individual profiles, is there a way of me adding CSS to ensure all image cards have the same rounded edges? 

Page with team members: https://oarfish-salmon-gpgd.squarespace.com/who-we-are

password: criminaljustice

If you click on an individual profile, you'll see I just have a square image. 

Many thanks

Edited by Icclebug
Link to comment

I see that each team member has an individual 'Page' on this site. This means that they are separate entities and you'll need to address each image individually to change the image style. There's nothing wrong with this - it's perfectly valid - but it's not very efficient. There's actually an easier way to set up pages with related content like this 🙂. You may not want to change for this site now that you've built it, but I'll explain in case it helps you (or someone else) later.

If you create a 'Blog Page' called team profiles in the unlinked section, you can add each team member as a post within the Blog page. This allows you to:

  • structure the content. Each team member will have a title, a thumbnail image and description
  • control the styling of all the member pages with one line of code. The blog will have a unique ID that allows you to target it easily for style changes. 
  • pull the team content onto a page automatically with Summary Blocks (rather than manually creating each image, title and so on)
  • improve the user experience because visitors can take advantage of the built-in pagination to move between each member, rather than going back to the 'who are we' page each time.

I hope this helps.

-Paul

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)

Buy me a coffee

Link to comment
4 minutes ago, paul2009 said:

I see that each team member has an individual 'Page' on this site. This means that they are separate entities and you'll need to address each image individually to change the image style. There's nothing wrong with this - it's perfectly valid - but it's not very efficient. There's actually an easier way to set up pages with related content like this 🙂. You may not want to change for this site now that you've built it, but I'll explain in case it helps you (or someone else) later.

If you create a 'Blog Page' called team profiles in the unlinked section, you can add each team member as a post within the Blog page. This allows you to:

  • structure the content. Each team member will have a title, a thumbnail image and description
  • control the styling of all the member pages with one line of code. The blog will have a unique ID that allows you to target it easily for style changes. 
  • pull the team content onto a page automatically with Summary Blocks (rather than manually creating each image, title and so on)
  • improve the user experience because visitors can take advantage of the built-in pagination to move between each member, rather than going back to the 'who are we' page each time.

I hope this helps.

-Paul

Thanks Paul, very helpful, I'll look into that now. 

If you look here: https://oarfish-salmon-gpgd.squarespace.com/fellows

I've done this as a gallery, then a Summary block to pull them in. So would this be better as a blog page?

Link to comment

A Gallery collection is great if you only want images and a title, but I guess you'll end up creating individual pages if you want visitors to click into them. For example:

https://oarfish-salmon-gpgd.squarespace.com/angus-cameron

https://oarfish-salmon-gpgd.squarespace.com/lol-burke

When a Blog collection is used, a Summary Block can be used to pull in the titles and thumbnails, but the posts will also be the bio pages. You won't need to create them manually 🙂.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)

Buy me a coffee

Link to comment
On 6/20/2020 at 4:06 PM, Icclebug said:

when I open one to read the full story do they all need styling individually?

You can do the same with them individually. Individual items that belong to a collection have the class view-item

When an item is part of a Blog collection, it will also have the class collection-type-blog.

This particular blog (/news) has the class collection-5ec3d82b1d9caf120a11c232. This is unique to this blog collection on this site.

You can therefore change the style of all the /news blog posts when viewed individually by targeting:

.Main .view-item.collection-type-blog.collection-5ec3d82b1d9caf120a11c232

As an example, if you wanted all news blog titles to be red instead of blue, you could use:

.Main .view-item.collection-type-blog.collection-5ec3d82b1d9caf120a11c232 .BlogItem-title {
  color: red;
}

 

Edited by paul2009

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)

Buy me a coffee

Link to comment
On 6/20/2020 at 5:55 PM, paul2009 said:

You can do the same with them individually. Individual items that belong to a collection have the class view-item

When an item is part of a Blog collection, it will also have the class collection-type-blog.

This particular blog (/news) has the class collection-5ec3d82b1d9caf120a11c232. This is unique to this blog collection on this site.

You can therefore change the style of all the /news blog posts when viewed individually by targeting:


.view-item.collection-type-blog.collection-5ec3d82b1d9caf120a11c232

As an example, if you wanted all news blog titles to be red instead of blue, you could use:


.view-item.collection-type-blog.collection-5ec3d82b1d9caf120a11c232 .BlogItem-title {
  color: red;
}

 

Excellent example thank you, this is VERY helpful. 

 

 

Edited by Icclebug
Link to comment

I’ve added a new test blog page to use as the team page: https://oarfish-salmon-gpgd.squarespace.com/test-who-we-are-1

I've tried using CSS to centre the summary block on it, but it doesn't seem quite central: 

.sqs-block-summary-v2 .summary-item-list {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

}

Also, I want to add some CSS to the images to make the edges rounded, instead of .BlogItem-title mentioned in the last post what would I use? 

Also, with this in mind, if I wanted to reduce the image width on the mobile for all images, when you click on them individually, from say this page  https://oarfish-salmon-gpgd.squarespace.com/test-who-we-are-1 what would I do please? 

Many thanks

Edited by Icclebug
Link to comment

The principles that I posted above will apply.

Your new blog has the ID collection-5eef756051dd591e6c7efa5b. You (or others reading this) can find a collection ID by using the dev tools built into your browser. I wrote a guide for this if you'd like further pointers. 

Regarding the specific question, you can add rounded corners to all the images within all the posts in this blog, by adding this to Custom CSS:

.Main .view-item.collection-type-blog.collection-5eef756051dd591e6c7efa5b img {
  border-radius:10px;
}

Regarding the Summary Block spacing, there's 40px of right margin after each column in the block, hence the off-centre look.

Edited by paul2009

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)

Buy me a coffee

Link to comment
On 6/21/2020 at 9:38 PM, paul2009 said:

The principles that I posted above will apply.

Your new blog has the ID collection-5eef756051dd591e6c7efa5b. You (or others reading this) can find a collection ID by using the dev tools built into your browser. I wrote a guide for this if you'd like further pointers. 

Regarding the specific question, you can add rounded corners to all the images within all the posts in this blog, by adding this to Custom CSS:


.view-item.collection-type-blog.collection-5eef756051dd591e6c7efa5b img {
  border-radius:10px;
}

Regarding the Summary Block spacing, there's 40px of right margin after each column in the block, hence the off-centre look.

Thank you, very much appreciated. 

Edited by Icclebug
Link to comment
On 6/21/2020 at 9:38 PM, paul2009 said:

The principles that I posted above will apply.

Your new blog has the ID collection-5eef756051dd591e6c7efa5b. You (or others reading this) can find a collection ID by using the dev tools built into your browser. I wrote a guide for this if you'd like further pointers. 

Regarding the specific question, you can add rounded corners to all the images within all the posts in this blog, by adding this to Custom CSS:


.view-item.collection-type-blog.collection-5eef756051dd591e6c7efa5b img {
  border-radius:10px;
}

Regarding the Summary Block spacing, there's 40px of right margin after each column in the block, hence the off-centre look.

Hi @paul2009

quick question if I may, the above code works perfectly but just noticed it actually puts a rounded edge on the site logo too - which isn't ideal. Any clue how to avoid this please? 

Thank you.

Link to comment

Apologies, it wasn't tested before being posted. You may need to prefix it with

.Main

or if that doesn't work, add another class specific to the image blocks that are in the blog. 

[updated answer provided below]

Edited by paul2009

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)

Buy me a coffee

Link to comment
11 minutes ago, paul2009 said:

You just need to prefix it with


.Main

See updated post above. 

thank you @paul2009 it seems to just remove the border radius from the image and the logo - see here https://oarfish-salmon-gpgd.squarespace.com/team/helen-schofield-as3ta

I added this code: 

.Main .view-item.collection-type-blog.collection-5eef756051dd591e6c7efa5b img {
  border-radius:10px;
}

Edited by Icclebug
Link to comment

There are many ways to do this depending on how specific it needs to be. However, try this:

.view-item.collection-type-blog.collection-5eef756051dd591e6c7efa5b .sqs-block-image img {
    border-radius: 10px
}

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)

Buy me a coffee

Link to comment
7 minutes ago, paul2009 said:

There are many ways to do this depending on how specific it needs to be. However, try this:


.view-item.collection-type-blog.collection-5eef756051dd591e6c7efa5b .sqs-block-image img {
    border-radius: 10px
}

 

thank you so much @paul2009 this worked perfectly. I hope other forum members find this useful. 🙂 

Link to comment

Hi @paul2009

I'm trying to implement the same coding for product images, but I suspect I'm getting the first part incorrect. 

The images on the product page are rounded, but can't seem to get them to do the same on click through. Any thoughts please? 

https://oarfish-salmon-gpgd.squarespace.com/how-to-join

https://oarfish-salmon-gpgd.squarespace.com/membership-options/practitioner

Many thanks. 

Link to comment

Product pages have a slightly different structure and instead of having Image Blocks, they have product gallery options. As currently styled, you can change it with:

.collection-type-products.collection-5ee0fea47d22e671c1280940 .ProductItem-gallery-slides-item img {
  border-radius: 5px
}

For the benefit of anyone reading this:

  • It uses the collection-type-products class because this is a 'product' not a blog or gallery. 
  • It references the unique 'collection ID' for the products on this Product Page to limit the styling to this particular collection of products. On another site, the collection ID will be different, because they are always unique.
  • It references the ProductItem-gallery-slides-item class because this is the current product gallery setting in Site Styles.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)

Buy me a coffee

Link to comment
7 minutes ago, paul2009 said:

Product pages have a slightly different structure and instead of having Image Blocks, they have product gallery options. As currently styled, you can change it with:


.collection-type-products.collection-5ee0fea47d22e671c1280940 .ProductItem-gallery-slides-item img {
  border-radius: 5px
}

For the benefit of anyone reading this:

  • It uses the collection-type-products class because this is a 'product' not a blog or gallery. 
  • It references the unique 'collection ID' for the products on this Product Page to limit the styling to this particular collection of products. On another site, the collection ID will be different, because they are always unique.
  • It references the ProductItem-gallery-slides-item class because this is the current product gallery setting in Site Styles.

Thank you @paul2009 works perfectly and a great explanation for future use. 

I think I fixed the 40px offset margin you mentioned earlier in the thread, hope this is correct, it seems to have worked: https://oarfish-salmon-gpgd.squarespace.com/who-we-are

.sqs-block-summary-v2 .summary-item

{  margin: 5px !important; }

Where I have the summary blocks for the images on here https://oarfish-salmon-gpgd.squarespace.com/who-we-are and here https://oarfish-salmon-gpgd.squarespace.com/fellows - when you click through on the mobile version to an individual profile the images are quite big, is there a way of reducing the size on the mobile only to make them a little narrower?

Many thanks.

 

Link to comment
13 minutes ago, Icclebug said:

when you click through on the mobile version to an individual profile the images are quite big, is there a way of reducing the size on the mobile only to make them a little narrower?

You should be able to do this with a little more CSS 🙂. For example:

@media only screen and (max-width: 767px) {
  .view-item.collection-type-blog.collection-5eefe73c2814402a19db9172 .sqs-block-image img {
    max-width: 70%;
    margin-left: 5%;
  }
}

Explanation:

  • The first line is a media query that prevents it from applying unless the "viewport" (the screen width) is less than 768 pixels. 
  • I set the maximum width of the image to 70%, but you can change this to suit your needs.
  • I added a left margin of 5% to align the image with the text on the mobile page, because images are normally shown full width on mobile devices. 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)

Buy me a coffee

Link to comment
12 minutes ago, paul2009 said:

You should be able to do this with a little more CSS 🙂. For example:


@media only screen and (max-width: 767px) {
  .view-item.collection-type-blog.collection-5eefe73c2814402a19db9172 .sqs-block-image img {
    max-width: 70%;
    margin-left: 5%;
  }
}

Explanation:

  • The first line is a media query that prevents it from applying unless the "viewport" (the screen width) is less than 768 pixels. 
  • I set the maximum width of the image to 70%, but you can change this to suit your needs.
  • I added a left margin of 5% to align the image with the text on the mobile page, because images are normally shown full width on mobile devices. 

Just perfect @paul2009 and great for me to learn too. Thank you so much.

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.