Make the images on blog posts section square

[Montique]

I would like to make the images on the blog posts section to be square not rectangle. i am using dawn theme.

see below ref:

[PMike]

To make the images on the blog posts section square instead of rectangular in the Dawn theme, you can follow these steps:

1. Log in to your Shopify admin.
2. Go to "Online Store" and select "Themes."
3. Find the Dawn theme and click on "Actions" > "Edit code."

Now, you'll need to make changes to the code to adjust the image display. Here's a general guide, but please note that the exact code and file location may vary based on your theme version and customization:

4. In the code editor, navigate to the "Templates" folder and find the file related to the blog posts. It might be named something like "blogs.liquid" or "article-template.liquid."

5. Look for the code that generates the blog post images. It might look something like this:

```liquid
{% for image in article.images %}
<img src="{{ image | img_url }}" alt="{{ image.alt }}" />
{% endfor %}
```

6. To make the images square, you can add CSS styling to the `img` element. Modify the code to look like this:

```liquid
{% for image in article.images %}
<img src="{{ image | img_url }}" alt="{{ image.alt }}" style="width: 100%; height: auto; object-fit: cover;" />
{% endfor %}
```

7. Save the changes to the file.

After making these changes, the blog post images should be displayed as squares. The `object-fit: cover;` CSS property ensures that the image fills the available space while maintaining its aspect ratio.

Remember to preview and test your changes to ensure they work as expected. If you encounter any issues or have further customization needs, you may consider reaching out to a Shopify expert or the theme's support for more specific guidance.

[Montique]

thanks @PMike but i cannot find "blogs.liquid" or "article-template.liquid." in my codes

or the blogs codes do not have the coding

{% for image in article.images %}
<img src="{{ image | img_url }}" alt="{{ image.alt }}" />
{% endfor %}

[Dan-From-Ryviu]

Hi @Montique, 

Make sure you add featured image of blog is square image and then go to your Online store > Themes > Customize > click dropdown menu at the top > Blogs > Default blog > Blog posts > Featured image height > Adapt to image

[Montique]

thanks @Dan-From-Ryviu but this is for the "more blogs" section not the feature blog page.

my only options on the section are heading size and what blog to link to... i think it would require css change

[celstone]

I have a different problem. I did two blog posts last week in the Dawn theme and used the Insert Image button on the post page to put a small photo at the top of the pist - NOT the featured image which is WAY too big! I tried to do the same today and for some reason the Insert Image button does NOTHING! WTH???