Make blog post images square

Store Design
, ,
1

Could anyone help me with making blog posts have a square image that is not cropped?
I’m able to change settings to do this with products, but not blog posts.
I’m using the ‘Dawn’ theme, but I’d also like to know how to do this with the ‘Publisher’ theme.
My website is LoversAudio if that helps.

2

Hi @LoversAudio
would you like to share your blog page URL.
so i can check and provide you possible solution for your question.

3

loversaudio.com

4

loversaudio.com

5

Hi @LoversAudio

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.article-card-wrapper .card__inner.color-scheme-5.gradient.ratio { width: 100%; max-width: 100%; aspect-ratio: 1; overflow: hidden; }

Tech_Coding_0-1733905506864.png
Tech_Coding_0-1733905506864.png1303×517 429 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

6

Perfect! Thank you!

9

Thank you @Tech_Coding for sharing this CSS solution! The approach using aspect-ratio: 1is indeed clean and effective for Dawn theme’s existing class structure.

I’d like to add some practical considerations from our experience with image processing tools:

Image Adaptation: For non-square images, consider adding object-fit: coverto img tags to prevent distortion:

css
.article-card-wrapper .card__inner img {
object-fit: cover;
width: 100%;
height: 100%;
}

Cross-browser Compatibility: While aspect-ratiohas good modern browser support, for older browsers, a fallback using padding-top technique might be helpful.

Publisher Theme Adaptation: The class names will likely differ in Publisher theme, but the core concept remains the same - creating a square container and properly fitting the image within it.

Our team at [SquareImage] has dealt extensively with aspect ratio challenges in our free square image tool. We’ve found that providing multiple background options (blur, color fills) alongside cropping gives users more flexibility when adapting rectangular images to square formats. If anyone needs to test different image ratios quickly, our tool offers real-time previews which might complement the CSS approach for blog image preparation.

Thanks again for the valuable contribution - looking forward to more technical discussions!