Re: Make the images on blog posts section square

Make the images on blog posts section square

Montique
Excursionist
33 1 6

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:

Montique_0-1684383078982.png

 

Replies 5 (5)

PMike
Shopify Partner
134 12 21

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.

Fordeer Invoice Order Printer - The great tool for the best business!
https://link.fordeer.io/YZL4Ge
Montique
Excursionist
33 1 6

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
Shopify Partner
8548 1686 1693

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

Screenshot 2023-05-18 at 14.53.10.png

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Montique
Excursionist
33 1 6

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
Excursionist
22 0 5

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???