Liquid, JavaScript, themes, sales channels
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
Solved! Go to the solution
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.
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?
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.
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)
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.
Hi,
We can help you to edit code.
Thanks,
Shahab
CEO, DevsiT
Thank you Shahab,
I'm going to try to figure it out.
Kind regards,
Britt
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.
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!
You're welcome, Brittn.
If you'd like further assistance or advice on coding, just let me know.
You're welcome, @brittn
If you need help, Ask me
Thanks!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024