Center images on blog post

Godiva
Tourist
3 0 2

Hi!

I have been trying to add Images to my blog post, and the main image I inserted with a code I found on the forum:

{% if article.image %}
{% capture img_id %}ArticleImage-{{ article.image.id }}{% endcapture %}
{% capture img_wrapper_id %}ArticleImageWrapper-{{ article.image.id }}{% endcapture %}
{%- assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<div id="{{ img_wrapper_id }}" class="article__grid-image-wrapper js">
<div class="article__grid-image-container" {{ 1 | divided_by: article.image.aspect_ratio | times: 100 }}%;">
<img id="{{ img_id }}"
class="article__grid-image lazyload"
src="{{ article.image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ article.image.aspect_ratio }}"
data-sizes="auto"
alt="">
</div>
</div>
<noscript>
<div class="article__grid-image-wrapper">
{{ article | img_url: '345x345', scale: 2 | img_tag: article.title, 'article__grid-image' }}
</div>
</noscript>
{% endif %}
{{ article.content }}
</div>

 

Now I am looking for a way to center the image, but I cannot find a way to do it!

 

Ideally I would like to have the whole article, images and text more centered, but the text still aligned to the left.. Can anyone help me out with this? 

This is my blog post: https://consciousgoods.nl/blogs/news/about-conscious-goods 

 

Thanks in advance! 

Godiva

Spinturnix
Shopify Expert
64 17 14

Hey @Godiva,

Add the following to your theme.scss.liquid file:

.article__grid-image-container,
figure.image {
  text-align: center;
}

This will center all images in your blog posts. 

KetanKumar
Shopify Partner
17323 1871 6473

Hello, @Godiva 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.article__grid-image-container {
    text-align: center;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Godiva
Tourist
3 0 2

Hi Thanks for your quick reply!

 

I added the code to the theme.liquid but it hasn't changed anything.. 

Does it have anything to do with the code I entered for the main image? It's so long, I have no idea what all of it is supposed to do.. 

 

Godiva

0 Likes
KetanKumar
Shopify Partner
17323 1871 6473

@Godiva 

Thanks for update

but sorry your wrong file adds code can you please read again step.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Godiva
Tourist
3 0 2

haha thanks! 

It worked after all

 

Have a good day !

KetanKumar
Shopify Partner
17323 1871 6473

@Godiva 

Thanks for your support and compliment. 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Angbro02
Tourist
4 0 4

Hi - I found this old thread as I am looking to solve a similar issue - centering images on the blog. I followed your path, but under assets my store does not have theme.scss.liquid 

It has custom.scss.liquid I tried adding it to the bottom of that file and it did not work. Any insight? Thank you!

KetanKumar
Shopify Partner
17323 1871 6473

@Angbro02 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Angbro02
Tourist
4 0 4

Thanks for your help! This is the website blog I'm trying to center: https://vexclothing.com/pages/media-celebrity

When you scroll to the celebrity, press and TV blog sections you will see all of the various blog posts. Some images center and others don't for some reason. Looking to keep them consistent. Much appreciated.