Large images displays incorrect size

[DML73]

Bootstrap 3.7.7-beta1
Image Handler 5.3.5


In Admin->Configuration->Images

IH large images maximum width
and
IH large images maximum height

are set to 'empty', also tried '0' and '1024', but when clicking the product image on the product page, it does not display as the size in my images folder which is 1024px.
Example here: https://www.usconverters.com/rs232-r...nverter-xs201a

Any ideas why?

[balihr]

It's because the modal window limits the size of its contents. Your image IS being loaded as 1024x1024px, but displayed as 480x480 as that's all that fits in the container (responsive).

Modal window is set to max-width: 800px, and then if you look at the structure, you'll get down to div id="slider" class="col-lg-8 offset-lg-2", which means 8/12 of the parent. Add some paddings along the way and you get your 480px. You can change it to col-12 (and remove the offset), but you risk additional images going below the viewport so you'd have to scroll down to click on the additional image thumbnail...

[chadlly2003]

It's because the modal window limits the size of its contents. Your image IS being loaded as 1024x1024px, but displayed as 480x480 as that's all that fits in the container (responsive).

Modal window is set to max-width: 800px, and then if you look at the structure, you'll get down to div id="slider" class="col-lg-8 offset-lg-2", which means 8/12 of the parent. Add some paddings along the way and you get your 480px. You can change it to col-12 (and remove the offset), but you risk additional images going below the viewport so you'd have to scroll down to click on the additional image thumbnail...

Balihr,

Your very close in solving the issue.

This what needs to be changed

find and remove in the html

col-lg-8 offset-lg-2

find

@media (min-width: 992px) {
    .modal-lg, .modal-xl {
        max-width: 800px;
    }

repace with

@media (min-width: 992px) {
    .modal-lg, .modal-xl {
        max-width: 1400px;
    }

[balihr]

Balihr,

Your very close in solving the issue.

This what needs to be changed

find and remove in the html

col-lg-8 offset-lg-2

find

@media (min-width: 992px) {
    .modal-lg, .modal-xl {
        max-width: 800px;
    }

repace with

@media (min-width: 992px) {
    .modal-lg, .modal-xl {
        max-width: 1400px;
    }

I would disagree. I'm on a 1920x1200 monitor, no zoom or anything, and with the suggestion I made, additional images are at the very bottom (although still visible). Now try a standard 1920x1080 monitor and you're cutting off the thumbnails in the modal. Even with the modal window being 800px, additional images go below the viewport which is bad UX - user should NOT scroll through the modal window to swap images around. If we let the modal go to 1400, sure, the main image is displayed in full size, but even the main image is cut off and thumbnails are miles down... That's a big no-no from me.

A much cleaner solution would be to move the thumbs to the side and display a vertical thumbs carousel instead of horizontal, but I'm not familiar enough with this template to just drop the solution here.

[chadlly2003]

I would disagree. I'm on a 1920x1200 monitor, no zoom or anything, and with the suggestion I made, additional images are at the very bottom (although still visible). Now try a standard 1920x1080 monitor and you're cutting off the thumbnails in the modal. Even with the modal window being 800px, additional images go below the viewport which is bad UX - user should NOT scroll through the modal window to swap images around. If we let the modal go to 1400, sure, the main image is displayed in full size, but even the main image is cut off and thumbnails are miles down... That's a big no-no from me.

A much cleaner solution would be to move the thumbs to the side and display a vertical thumbs carousel instead of horizontal, but I'm not familiar enough with this template to just drop the solution here.

of course the additional images are going to drop down if you make the image 1400px. But tha'ts what he was asking for.

you can always have 1400px and as you mentioned move the carousel to the left or keep it at the bottom. Simple enough

[DML73]

Thanks, I would like to give it a try but I can't find:

@media (min-width: 992px) {
.modal-lg, .modal-xl {
max-width: 800px;
}

anywhere. Which file would that be in?

[Shop Suey]

you sure the images are being processed by IH?

[mprough]

Anyone noting the file extension? .webp

I'm with Shop Suey, don't think IH is processing these images all the time

https://www.usconverters.com/rs232-r...nverter-xs201a

images/xs201a/rs232-rs485-converter.webp

I am getting intermittent loads of IH processing the images & also not like above

[DML73]

I have selected IH displaying webp images, so I assume IH is handling that. Here are my image settings:

[Shop Suey]

IH processes in real-time anything compatible you throw at it and creates for every size quality optimized cached pre-rendered images.
If you decide to change quality or size, you clear the IH cache and IH processes at new access.
This is the magic

Just compare with one of my shop's product image urls and you'll notice the difference imidiately.