Multiple Blogs, different formatting?

Site URL: https://risedigital.tech

Hi there.

I have two blog sections on my site.

1. Blog, where I want the images (mostly landscape screen shots) on the blog page to be 3:2 aspect ratio.

2. Podcast, where I want the images (entirely podcast-style album art) on the blog page to be 1:1 square aspect ratio.

After changing formatting the respective blog pages 100 times (rough estimate) and my changes not 'sticking' I was able to determine that if I change the format of one blog (even though I do it on its own page, not globally in the styles interface), it oddly changes the format of the other, completely unrelated, blog.

Assuming this is (bizarrely) intended behaviour and not a bug, does anyone know how to apply a specific aspect ratio to one blog page's images and not the other?

Christian

1 hour ago, XianNewman said:

Site URL: https://risedigital.tech

Hi there.

I have two blog sections on my site.

1. Blog, where I want the images (mostly landscape screen shots) on the blog page to be 3:2 aspect ratio.

2. Podcast, where I want the images (entirely podcast-style album art) on the blog page to be 1:1 square aspect ratio.

After changing formatting the respective blog pages 100 times (rough estimate) and my changes not 'sticking' I was able to determine that if I change the format of one blog (even though I do it on its own page, not globally in the styles interface), it oddly changes the format of the other, completely unrelated, blog.

Assuming this is (bizarrely) intended behaviour and not a bug, does anyone know how to apply a specific aspect ratio to one blog page's images and not the other?

Christian

Each blog post has the unique collection id, you can identify it using the blog page and this tool

Squarespace ID Finder - Chrome Web Store (google.com)

target your blog page by it's id: #<collection-id> and it's blog post .<collection-id>.view-item

In you case the 2 blog page selector are

/podcast --> #collection-604d0cb8b40cb82b3bfd4c97

/podcast blog page --> .collection-604d0cb8b40cb82b3bfd4c97.view-item

/blog--> #collection-600e0499c9ce5d2dab7d1b46

/blog page --> .collection-600e0499c9ce5d2dab7d1b46.view-item

Btw, your site is beautiful, I like the vibe

First, thanks for the recommendation - that extension is GOLD! I've always opened Inspect (Chrome) or Source (Safari) to find the IDs the hard way 😂 

Second, thanks for the feedback... I'm tying up loose ends on a redesign (I neglected my own site for a long time while I took better care of client sites).

Third, do you happen to know which CSS property to target for aspect ratio? If it's convenient, could you paste a sample snippet I can customize for my situation? Never worked with aspect ratios before.

Christian

18 minutes ago, XianNewman said:

First, thanks for the recommendation - that extension is GOLD! I've always opened Inspect (Chrome) or Source (Safari) to find the IDs the hard way 😂 

Second, thanks for the feedback... I'm tying up loose ends on a redesign (I neglected my own site for a long time while I took better care of client sites).

Third, do you happen to know which CSS property to target for aspect ratio? If it's convenient, could you paste a sample snippet I can customize for my situation? Never worked with aspect ratios before.

Christian

Squarespace ratio usually by using width/height percentage of assign as padding-bottom of the container.

What kind of image you are referering

3 minutes ago, bangank36 said:

Squarespace ratio usually by using width/height percentage of assign as padding-bottom of the container.

What kind of image you are referering

For example if I wanted to force the images on the podcast page to aspect ratio 3:2?

14 minutes ago, XianNewman said:

For example if I wanted to force the images on the podcast page to aspect ratio 3:2?

#collection-604d0cb8b40cb82b3bfd4c97 .blog-basic-grid .image-wrapper {
    padding-bottom: 66.66%;
}

ratio is 2/3 ~ 66.66%, so far global settings is 100%, mean 1:1

4 minutes ago, bangank36 said:

#collection-604d0cb8b40cb82b3bfd4c97 .blog-basic-grid .image-wrapper {
    padding-bottom: 66.66%;
}

ratio is 3/2 ~ 66.66%, so far global settings is 100%, mean 1:1

ahhh... now I understand... looking through all the CSS properties, I skipped right over padding thinking 'nah that can't be it.' 😂 

2 minutes ago, XianNewman said:

ahhh... now I understand... looking through all the CSS properties, I skipped right over padding thinking 'nah that can't be it.' 😂 

Checking the core concept here

Aspect Ratio Boxes | CSS-Tricks

On 5/17/2021 at 8:34 PM, bangank36 said:

#collection-604d0cb8b40cb82b3bfd4c97 .blog-basic-grid .image-wrapper {
    padding-bottom: 66.66%;
}

ratio is 2/3 ~ 66.66%, so far global settings is 100%, mean 1:1

Hi @bangank36 I applied this fix to risedigitalinc.squarespace.com/blog and it worked perfectly... however I've just uploaded my first portrait-style and I'm wondering if there's a way to set a maximum height of the blog item images so they don't appear so big on the blog page. Do you know?

@XianNewman use some code like this

@media screen and (min-width:992px) {
.blog-masonry .blog-image-wrapper {
    max-height: 250px;
    overflow: hidden;
}
}

6 hours ago, tuanphan said:

@XianNewman use some code like this

@media screen and (min-width:992px) {
.blog-masonry .blog-image-wrapper {
    max-height: 250px;
    overflow: hidden;
}
}

 

This would crop the image... I'd like to display the full image, but smaller, if it's over a certain height.

Hi @XianNewman, @bangank36 and @tuanphan!

Did you resolve this in the end? I am trying to do the same for my website but am struggling to get it to work. The closest I've got is this: but as you can see, it isn't working as desired. 

I have a main blog (www.makersdepartment.com/blog and I would like to create an additional but have landscape images for this instead of square (second blog is currently www.makersdepartment.com/whiteboard2test).

Any help would be greatly appreciated! 

On 2/10/2022 at 10:01 PM, hanncoom said:

Did you resolve this in the end? I am trying to do the same for my website but am struggling to get it to work. The closest I've got is this: but as you can see, it isn't working as desired. 

I have a main blog (www.makersdepartment.com/blog and I would like to create an additional but have landscape images for this instead of square (second blog is currently www.makersdepartment.com/whiteboard2test).

 

Any help would be greatly appreciated! 

 

Do you still need help?