Solved

Why are my Shopify blog images distorting?

brittn
Tourist
6 0 1

I really hope someone can help me here. I have been creating blogs through Shopify for over 5 years using the same method. 

But now when I add a horizontal image it becomes distorted - vertically stretched. My older blog images are all fine. I tried using the exact same picture from an older blog and it is still distorted. 
I never had to fiddle with image size before. Does anyone know what is going on or what can be done to solve this. 

Thanks in advance. 

Britt 

Accepted Solution (1)
David_Weru
Shopify Partner
177 16 43

This is an accepted solution.

I'll try to explain.

A page is made of elements. 

Example: images, links, text ect.

Each element has a list of attributes.

Example:  <image. src=bla.jpg. height=1080px>

Image is the element.  Src and height are attributes.

Basically, instead of writing out the attributes inside every element,  you just give the element a name,  and everything under that name inherits those attributes.

 

So if now you want to make all 4000000000 images smaller, you just change one line and everything under that name magically changes size.  That's the magic of css 🙂

 

To fix your problem, we'll just have to give all those images a name and write one rule for size and your distortion problems will be over.  As a learning experience, I could walk you through it, or if you'd like me to just fix it and walk you through it at a more convenient time, that's also possible.

 

However if time isn't an object, just follow the link and find the image section.  Applying it to shopify is pretty straight forward after.  I could walk you through that too.

If you need anything, please let me know.

View solution in original post

Replies 11 (11)

Ninthony
Shopify Partner
2329 350 1023

Are you using the same theme you always have? The only reason I can see this happening is because of CSS code telling the image to match a certain height. Can you provide a URL to a problem blog preview?

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
brittn
Tourist
6 0 1

Hi Ninthony! 

Thank you very much for your reply! I have not changed themes but it was updated. Here are the two blogs that I am working on. 
It was always possible to enlarge my images in the rich text editor without distortion. 

 

https://ytjl0nnqcearyf20-9753828.shopifypreview.com/blogs/a-nordic-mood/articles?preview_key=e50ccd3...

https://ytjl0nnqcearyf20-9753828.shopifypreview.com/blogs/a-nordic-mood/articles?preview_key=7b43bd5...

 

David_Weru
Shopify Partner
177 16 43

Your image size attributes are set in the image tags.

 

All of the sizes are 1024 X 1024  (use inspect element of your browser and you'll see this.)

 

If you used the rich text editor, you might want to go over it's output files and make adjustments because in this case, their scales are baked in the html tag instead of using css.

 

https://www.w3schools.com/css/  <- breeze over this.  It will save you a lot of time and effort in figuring out what goes wrong with a page's presentation (scale, placement, ect)

brittn
Tourist
6 0 1

Thank you for your help. 

I'm going to be very honest and just say I have no idea what you just said hahaha. 
But thanks for the link I will check it out and try to understand.

I'm just not sure why I could adjust the size for 5 years and now I can't. 

 

DevsIT
Shopify Expert
72 2 9

Hi,

We can help you to edit code.

Thanks,

Shahab

CEO, DevsiT

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on ce.shahabuddin@gmail.com regarding any help
Certified Shopify Expert | Skype : engr-shahabuddin | Whatsapp: +8801722574364
brittn
Tourist
6 0 1

Thank you Shahab, 

I'm going to try to figure it out. 

Kind regards, 

Britt 

 

David_Weru
Shopify Partner
177 16 43

This is an accepted solution.

I'll try to explain.

A page is made of elements. 

Example: images, links, text ect.

Each element has a list of attributes.

Example:  <image. src=bla.jpg. height=1080px>

Image is the element.  Src and height are attributes.

Basically, instead of writing out the attributes inside every element,  you just give the element a name,  and everything under that name inherits those attributes.

 

So if now you want to make all 4000000000 images smaller, you just change one line and everything under that name magically changes size.  That's the magic of css 🙂

 

To fix your problem, we'll just have to give all those images a name and write one rule for size and your distortion problems will be over.  As a learning experience, I could walk you through it, or if you'd like me to just fix it and walk you through it at a more convenient time, that's also possible.

 

However if time isn't an object, just follow the link and find the image section.  Applying it to shopify is pretty straight forward after.  I could walk you through that too.

If you need anything, please let me know.

brittn
Tourist
6 0 1

Wow! Thank you very much for taking the time. 
That is so kind of you. I think I get it now. 
I will try to figure it out with your link. 

Have a great day! 

 

 

 

David_Weru
Shopify Partner
177 16 43

You're welcome, Brittn.

If you'd like further assistance or advice on coding, just let me know.

DevsIT
Shopify Expert
72 2 9

You're welcome, @brittn

If you need help, Ask me

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on ce.shahabuddin@gmail.com regarding any help
Certified Shopify Expert | Skype : engr-shahabuddin | Whatsapp: +8801722574364
brittn
Tourist
6 0 1

Thanks!