Issues with images

perryworld

We are using your Hubs template quickstart for our Joomla4 website at https://richards456.sg-host.com/
We are trying to replace some of the images with our own images but are having some issues

If you login to the admin area and then select articles we have an article with the title
"Your Premier Source for Market Research Innovations" - ID 24

If we open this and then go to Images and Links there is an image "Do Something Great" and
when you look at the associated URL it has the height and width on the end
images/CommCulture/Ideas2.jpg#joomlaImage://local-images/CommCulture/Ideas2.jpg?width=2607&height=1738

We cannot remove the dimensions - it just adds them back if we do remove them

It looks OK on the laptop but on an iphone the image is distorted being very narrow and very long in height

Is this something you can help with

Cheers
Rich

perryworld

Have you got an update on this ticket?
We can do this with CSS but it means doing it for the whole site when fixing this issue will save having to do this

Any help really appreciated

Thanks
Rich

perryworld

Hi again

this is happening when we change some of the images from your quickstart images to our own images it adds the dimensions which distorts the display on smaller devices

Does anyone have any ideas

Thanks

perryworld

Hi again

Can anyone give us an update on this ticket as we have not heard anything back yet
Any help would really be appreciated

Cheers
Rich

dominic

Hi perryworld,

This is a feature of Joomla, we can not disable it. Also, I have checked your site on my phone and see that the image is still showing well. Could you send me a screenshot of the image, which is very narrow and very long in height?

If you still want to disable it, you can open the libraries\src\Helper\MediaHelper.php file, line 347, and comment this code:

After uploading the image, you can remove the ?width=2607&height=1738.

perryworld

Hi,

Image as requested

Rich

dominic

Hi perryworld,
I have checked your site and it is still showing well on my devices.
You can try the following CSS Code to your site:

@media (max-width: 480px) {
figure.bannerimagesize.item-image img {
    width: 340px !important;
    object-fit: cover;
}
}