independent blog styling on same site

https://glockenspiel-iguana-m2r3.squarespace.com/horses
PW: wally

I'm creating a site (7.1) for an artist using blog collections as a way to present 50 pieces of art. One collection has primarily horizontal images whereas the three other collections have a mix of horizontal and vertical images. When I adjust the blog format in the editor, the changes are global for all blog collections. Is there a way to style a single collection so it presents Horizontal images and the other collections are vertical images?

Hi,
You can target your individual page by using page code injection or Body collection ID/Class.

Please use the like button if it helps you!

Best,
Leopold

42 minutes ago, IXStudio said:

Hi,
You can target your individual page by using page code injection or Body collection ID/Class.

Please use the like button if it helps you!

Best,
Leopold

Thank you Leopold.

I wasn't seeing how exactly to identify the element I wanted to modify. There are so many attributes called out in the body section. This is the element for the vertical formatted collection. "tweak-blog-basic-grid-image-aspect-ratio-34-three-four-vertical"

And this is for the Horizontal I see this.

weak-blog-side-by-side-image-aspect-ratio-43-four-three

I'm not sure how to specify in the Collection ID CSS.

craig

Please take a screenshot of your needs with full details.

Best,
Leopold 

10 minutes ago, IXStudio said:

Please take a screenshot of your needs with full details.

Best,
Leopold 

Attached is a screen shot showing the two pages. I have them all set to 3:4 vertical.

I think this code helps you! Use this code in Design -> Custom CSS

#collection-5f444c520dcf2a12d9a900bd.tweak-blog-side-by-side-image-aspect-ratio-34-three-four-vertical .blog-side-by-side .image-wrapper {
    padding-bottom: 60% !important;
}

Please use the like button if it helps you!

Best,
Leopold

7 minutes ago, IXStudio said:

I think this code helps you! Use this code in Design -> Custom CSS

#collection-5f444c520dcf2a12d9a900bd.tweak-blog-side-by-side-image-aspect-ratio-34-three-four-vertical .blog-side-by-side .image-wrapper {
    padding-bottom: 60% !important;
}

Please use the like button if it helps you!

Best,
Leopold

BINGO! thanks so much Leopold. You are very helpful.

I have the same challenge but on a 7.0 site. (Brine family (Heights template)
I would like different aspect ration images on different blog articles.

One blog 3:4 
Another 16:9

I tried the css code but no luck. Any suggestions?

On 12/4/2020 at 7:23 PM, Einar said:

I have the same challenge but on a 7.0 site. (Brine family (Heights template)
I would like different aspect ration images on different blog articles.

One blog 3:4 
Another 16:9

I tried the css code but no luck. Any suggestions?

If you share link to 2 blogs, we can help easier

Here are the links to the two blogs.

Keep 3:4 ratio - https://www.kraftlauget.no/artiklar

Change this blog from 3:4 to 16:9 ratio - https://www.kraftlauget.no/169

Today the default ratio is 3:4. But if it is easier we could do it the other way around, and change the default to be 16:9 and override  /artiklar to be 3:4 ratio.

16 hours ago, Einar said:

Here are the links to the two blogs.

Keep 3:4 ratio - https://www.kraftlauget.no/artiklar

Change this blog from 3:4 to 16:9 ratio - https://www.kraftlauget.no/169

Today the default ratio is 3:4. But if it is easier we could do it the other way around, and change the default to be 16:9 and override  /artiklar to be 3:4 ratio.

Add to 169 page settings > Advanced > Header

<style>
  .BlogList-item-image:before {
    padding-bottom: 56.25% !important;
}
</style>

Sweet! This sorted the thumbnail size!👍

One bug I found though.🐛

If first visiting the 16:9 blogg, https://www.kraftlauget.no/169
and then clicking on the 3:4 blogg in the menu (Blogg),
the size of the thumbnails on the 3:4 blogg are also reduced to 16:9?
Like the new header code is cashed or not refreshed/loaded? 

If I manually refresh the 3:4 blog the images return to the correct 3:4 ratio.

20 hours ago, Einar said:

Sweet! This sorted the thumbnail size!👍

One bug I found though.🐛

If first visiting the 16:9 blogg, https://www.kraftlauget.no/169
and then clicking on the 3:4 blogg in the menu (Blogg),
the size of the thumbnails on the 3:4 blogg are also reduced to 16:9?
Like the new header code is cashed or not refreshed/loaded? 

If I manually refresh the 3:4 blog the images return to the correct 3:4 ratio.

Home > Design > Site Styles > Disable Ajax Loading