Rounded edges image cards

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

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

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?

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

Thanks Paul, I think I have something similar here: https://oarfish-salmon-gpgd.squarespace.com/news

Hi @paul2009

if you look at the news page for instance https://oarfish-salmon-gpgd.squarespace.com/news I know I can style them altogether when they are in a list, when I open one to read the full story do they all need styling individually? 

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

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. 

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

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.

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. 

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.

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]

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

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
}

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

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. 

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.

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.

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. 

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.