Blog Images Reduce Sizing

[jwoycke]

I am using Shopify Athens theme and I wondering how I can reduce the image size on blog posts so it is smaller.

Blog is here:

https://wipingragworld.com/blogs/news/are-generic-blue-shop-towels-just-as-good

Thanks!

[pawankumar]

Hi @jwoycke 
Please put this css in theme.liquid before body closing tag </body>

<style>
.article-template-image.article-template-image-extracted {
    max-width: 450px;
    aspect-ratio: 1;
}
</style>

You can adjust the width as per your need though
Please don't forget to Like and Mark Solution to the post that helped you.

Thanks!

[Made4uo-Ribe]

Hi @jwoycke 

Check this one. 

1. From you Admin page, go to Online Store > Themes

1. Select the theme you want to edit
2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
3. Then place the code below at the very bottom of the file.

.article-template-image img {
    width: 40%;
    margin: auto;
}
.article-template-image.article-template-image-extracted {
    max-width: 100%;
}
.article-template-image.article-template-image-extracted {
    display: flex;
}

• And Save. 
• Result:
• 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[jwoycke]

Thanks, how do I get it center now as its not?

[AK_Design_Dev]

already image are center because margin: auto are both side put same space so image already center 

[Made4uo-Ribe]

I already set the code into center. But you change it. Try not to change. 

.article-template-image img {
    width: 40%;
    margin: auto;
}
.article-template-image.article-template-image-extracted {
    max-width: 100%;
     display: flex;
}

And replace with this one. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[AK_Design_Dev]

You can put this 

.article-template-image.article-template-image-extracted {

    max-width: 50%;

    margin: auto;

}

[jwoycke]

Thanks...any idea how to reduce these images on the blog post page to fit in the set sizes?

https://wipingragworld.com/blogs/news

[AK_Design_Dev]

You can see this if you want this type then comment again also u can massege me

[jwoycke]

yes, i would like that

[AK_Design_Dev]

You can add this on base.css file
.card-article-image img {

    object-fit: scale-down;

}

[jwoycke]

thanks, but that didnt work

[AK_Design_Dev]

can you share the ss after add this css

[jwoycke]

sorry i do not understand

[AK_Design_Dev]

i mean if you added  last sended css then what the result on Your store images or blogs images i see the screenshot of your store layout

[jwoycke]

see below

 

[AK_Design_Dev · Accepted solution]

try again and remove above css add this 

.template-blog .main-blog .card-article-image img {

    object-fit: scale-down;

}

[AK_Design_Dev]

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Made4uo-Ribe]

Check this one. 

1. From you Admin page, go to Online Store > Themes

1. Select the theme you want to edit
2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
3. Then place the code below at the very bottom of the file.

.card-article-image .card-media img {
    object-fit: contain !important;
    }

• And Save. 
• Result:
• 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[jwoycke]

for some reason, its still not resizing the images

[AK_Design_Dev]

because of image pick cover size thts a problem and show big size image 

[Made4uo-Ribe]

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[AK_Design_Dev]

Hello @jwoycke 
You can add this css on your section-blog-post.css file

.article-template .article-template-image {
    margin-bottom: 3rem;

    max-width: 300px;
    margin: 0 auto 3rem;

}