Center images on blog post

Solved
Highlighted
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

1 Like
Highlighted
Shopify Expert
57 15 12

This is an accepted solution.

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. 

1 Like
Highlighted
Shopify Partner
7528 1039 2611

This is an accepted solution.

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
1 Like
Highlighted
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
Highlighted
Shopify Partner
7528 1039 2611

@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
1 Like
Highlighted
Tourist
3 0 2

haha thanks! 

It worked after all

 

Have a good day !

1 Like
Highlighted
Shopify Partner
7528 1039 2611

@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