Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Multiple Blogs, different formatting?


XianNewman

Question

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

8a. Side by side - Horizontal With Google Cloud (Squarespace Circle Profile).png

Rise Digital | Google Workspace Partners
We make companies more productive, with Google Workspace.
Let's connect on LinkedIn

Link to post
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Posts

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.

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

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

Posted Images

7 answers to this question

Recommended Posts

  • 0
Posted (edited)
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

 

image.png.bd63449cd6c3e3ca22a9dfef2ef590bb.png

image.thumb.png.fb7fcc1ce97182af480bfffe8b24f081.png

Edited by bangank36

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0

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

8a. Side by side - Horizontal With Google Cloud (Squarespace Circle Profile).png

Rise Digital | Google Workspace Partners
We make companies more productive, with Google Workspace.
Let's connect on LinkedIn

Link to post
  • 0
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
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?

8a. Side by side - Horizontal With Google Cloud (Squarespace Circle Profile).png

Rise Digital | Google Workspace Partners
We make companies more productive, with Google Workspace.
Let's connect on LinkedIn

Link to post
  • 0
Posted (edited)
14 minutes ago, XianNewman said:

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

image.thumb.png.7413149511fc56cfe22553b92d21513b.png

#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

Edited by bangank36

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0
4 minutes ago, bangank36 said:

image.thumb.png.7413149511fc56cfe22553b92d21513b.png


#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.' 😂 

8a. Side by side - Horizontal With Google Cloud (Squarespace Circle Profile).png

Rise Digital | Google Workspace Partners
We make companies more productive, with Google Workspace.
Let's connect on LinkedIn

Link to post
  • 0
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...