You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Online

Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)

#107519 Photo is distorted in mobile view

Posted in ‘Editor’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by Ryan on Tuesday, 14 December 2021 12:36 GMT

woodyf4u
Photos are distorted when I view the website in mobile view.
For example on this website: https://injekracht.com
You can see it in the photo under the text "Life Coaching The Hague".
The photo was put in the article with JCE.
Alignment to the right and space to the left and below the photo.
Nothing else set.
How come that photo isn't scaled neatly in the correct proportions in mobile view?

Ryan
Remove the width and height values, or just the height value, from the tag.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

woodyf4u
Thanks a lot.
That is een easy fix 😃

woodyf4u
The solution to remove the width and height is indeed the solution.
But now I have to manually adjust that for all images in all articles.
Q1: Can I change this at once for all images in all articles on the website?

Question 2:
Why is this happening on this website, because on other websites it works fine?
Could it be that I need to adjust a configuration in JCE?

Ryan
Q1: Can I change this at once for all images in all articles on the website?
Not with JCE. You would need to edit each article individually and remove the width and height values or attributes. You could try RegularLabs DB Replacer - https://regularlabs.com/dbreplacer - to perfom a search/replace of the article content to remove the width and height attributes, but you need the "Pro" version to do this properly, using a regular expression.
Why is this happening on this website, because on other websites it works fine? Could it be that I need to adjust a configuration in JCE?
Usually, the template has some css to make images responsive, even if they have width and height attributes set, eg:

img {
    max-width: 100%;
    height: auto;
}
but this website does not appear to have this. You could add this to your template css file, and it might solve the problem, without the need to remove the attributes from all images. You can also configure JCE to not add the width and height when inserting an image, by setting the Always Include Dimensions option to No in Editor Profiles -> Plugin Parameters -> Image Manager Extended.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

woodyf4u
Thanks for the quick response and explanation.
In the current template, adding that CSS code was the solution.
For the migration to Joomla 4 I have to switch to another template.
Then I'll check there right away to see if it goes well with the new template.

Is the setting: Always Include Dimensions recommended as the default setting?

Ryan
Is the setting: Always Include Dimensions recommended as the default setting?


The default used to be off, but including dimensions on images is now recomended for better page rendering, especially on mobile devices where the image night take time to load, the layout is preserved during loading.

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.