Experiencing a 401 Unauthorized Error During Update?
If you're seeing a 401 Unauthorized error when trying to update your Joomla extension, it's likely due to our new two-factor authentication (2FA) security measure for your Download ID.
To resolve this, check your email (Spam folder?) for a message to approve your server or device, or read our detailed blog post here(
onlinecommunityhub.nl/best-practice/new-...-extension-downloads) to understand the steps involved. This will guide you through approving your server for future updates.
No bug "Add Image Size" Not Working Properly
- Alex Wilhelm
- Topic Author
- Offline
- Posts: 3
- Thank you received: 0
The one issue I am having is that if I turn on "add image size", it adds the size of the original image (in my case, 1280x960 for most of my images), rather than the size of the thumbnail. This has the effect of stretching my article intro images horizontally, as I have a max-height defined for those in css, but no max width in order to allow for images that are either landscape or portrait orientation to be rendered correctly. It also does little to avoid CLS when you tell the browser the image is 1280x960, and then provide it with a thumbnail that is 400x300. Am I missing something as to how this is supposed to work?
Please Log in to join the conversation.
- Ruud van Lent
- Offline
- Posts: 1640
- Thank you received: 107
Now when the browser is is on a tablet with a resolution of 800px, it will download and display the 800px image from the srcset to the visitor, but if you have a tablet with a screen dpi of 2 and a resolution of 800px, it will not take the 800px but the 1600px image as that has the best quality on a 2dpi screen.
This means that we can stop 'thinking' in terms of sizing the images for the best possible display as that now is the responsibility of the browser. If we do this ourself (sizing images) then we will always end-up with a compromis as either the image is to large or to small for the visitor.
Converting the images to a srcset is seamless: it doesn't change anything on the visual display of the image on the page. Adding the width / height does so this will only work if the original image is sized exactly to fit is and is not resized by the browser / css.The one issue I am having is that if I turn on "add image size", it adds the size of the original image (in my case, 1280x960 for most of my images), rather than the size of the thumbnail. This has the effect of stretching my article intro images horizontally, as I have a max-height defined for those in css, but no max width in order to allow for images that are either landscape or portrait orientation to be rendered correctly. It also does little to avoid CLS when you tell the browser the image is 1280x960, and then provide it with a thumbnail that is 400x300. Am I missing something as to how this is supposed to work?
So although you can turn that on, you should not as it can break the displaying of the image.
Does this make sense Alex?
Feel free to follow up, ochResponsiveimages is very powerfull and a big part of that power comes from it's 'simplicity': it is really a set and forget plugin!
regards,
Ruud.
Please Log in to join the conversation.
- Alex Wilhelm
- Topic Author
- Offline
- Posts: 3
- Thank you received: 0
I had a plugin previously that generated a thumbnail / small size image at whatever size was specified in the HTML, and it worked great, but sadly has not been updated to support Joomla 4/5.
I was hoping to avoid it, but perhaps I just need to manually create intro / full article images at a specific resolution for all of my articles. If I did this, would the "add image size" option still break the formatting on small screens? It probably would... I might need to experiment a bit.
The dpi of 2 resulting in an 800px display using the 1600px image is something I didn't realize. That may be why I have noticed that page speed insights seems to be using the larger images on it's mobile test, even though smaller ones exist. Or maybe page speed insights is just somewhat broken itself...
Regarding image size attributes and CLS, is there any way to avoid CLS when using srcset? It seems that what you are saying is that by the very nature of having multiple image sizes that the browser can request, there's no way to tell the browser to save space for the image?
Please Log in to join the conversation.
- Ruud van Lent
- Offline
- Posts: 1640
- Thank you received: 107
The size of the image doesn't matter as long as the aspect ratio of the images (in the srcset) are the same: if not, the browser is reserving the wrong space > either the height or width is then not correct resulting in CLS.
Please Log in to join the conversation.
- Alex Wilhelm
- Topic Author
- Offline
- Posts: 3
- Thank you received: 0
Please Log in to join the conversation.
- Ruud van Lent
- Offline
- Posts: 1640
- Thank you received: 107
As all the images created by ochResponsiveImages have the same aspect ratio, they will then all display correct with the width / height set (100 x 100) on any browser device.
ochResponsiveImages respects the width / height set on the image. So setting that width / height is what you need to do for preventing cls.
Note that this has nothing to do / cannot be set with css as css loads after the the reserved space is taken. So preventing cls can only be done by (manually) adding the image height / width on the image itself.
Please Log in to join the conversation.