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

Link to comment
  • Replies 20
  • Created
  • Last Reply

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

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

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

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

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;
}

 

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

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. 

 

 

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

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.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

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. 

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]

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

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
}

 

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

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.

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

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. 

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.