Duplicate Fully embedded attachments don't show in lightbox if at natural size

mattrogowski

Well-known member
Affected version
2.2.8
See example thread here: https://xenforo.com/community/threads/lightbox.203152/

Attachment 1 is not embedded - shows in the lightbox
Attachment 2 is embedded as a thumbnail - shows in the lightbox
Attachment 3 is embedded in full - does not show in the lightbox
Attachment 4 is embedded in full - shows in the lightbox

The only difference between attachment 3 and 4 (in terms of how they're embedded) is that one is being displayed at native size and one is being scaled to fit the container width.

So the requirements for it to be in the lightbox are:
  • Not embedded at all (showing as thumbnail)
  • Embedded as thumbnail
  • Embedded in full but not being rendered at native size
It's the last point that seems like a completely arbitrary limitation to me. Why does the fact it's not displaying at native size mean it should be in the lightbox, when another attachment in the same post that is maybe 100px narrower and displaying at full native size will not show? We had the question raised as to why it was including some and not others and I eventually tracked it down to a very intentional check:

JavaScript:
if ($image && this.isImageNaturalSize($image))
{
    include = false;
}

The description of the "Lightbox displays all attached thumbnails on page" option says "Note that the lightbox will only include images that do not appear in full size in the message body" - I took this to mean embedded in full (as in that button was clicked when embedding), not literally rendering at full native size - it means that even with this option disabled, some attachments within a post may not show up when others will - see here, the first image isn't included at all.

1644431506935.png
1644431525409.png

The reason for this definitely isn't obvious to users, and wasn't even obvious to me without reading through the source code - it seems like such an arbitrary thing to use to determine whether it shows in the lightbox. As soon as I remove the few lines above, it shows all of them as expected. If users are using this to easily view all images on the page (which was our use case), skipping ones that are fully embedded but just so happen to be narrower than the post body container makes it appear broken (and may even mean it behaves differently based on device/screen size).
 

beerForo

Well-known member
I believe this is the same issue I have encountered with a singe full size image I want to zoom into and it is not clickable.
 

mattrogowski

Well-known member
Most likely - essentially, the message-content containing div is 1018px wide for me, so if an image was 1017px it wouldn't show in the lightbox, but if it was 1019px it would as it would technically be being scaled down. I can see it causing a lot of confusion.
 

mattrogowski

Well-known member
I don't know, maybe make it an option. But the reason why one of the below images shows in the lightbox and the other doesn't is 100% not clear to anyone.

xf-1017.pngxf-1019.png

It's caused confusion for several users I know of and we're likely not the only ones.
 

Chris D

XenForo developer
Staff member
You're correct. It has been reported before.

In fact, there was a point where we didn't show embedded images (from IMG tags, not ATTACH tags) in the lightbox mixed with other embedded images or attachments at all.

That was changed in XF 2.2.

But it is intentional for the reasons I've just alluded to, and as you can see from the code.

But on that basis, it is behaving as designed and therefore should be considered in the future as a suggestion.
 

beerForo

Well-known member
Should we show 64px embedded images in the lightbox too?
All attachments, so you can scroll through them all with the navigation arrow and be able to zoom (closer than the current one also). The size shouldn't matter (or maybe a cutoff for really small).
 
Last edited:

nicodak

Well-known member
Submitting a suggestion is the easy method for developers in this case. What do you suggest? Does it work consistently? Nobody would find the way it works normal, consistent, logical... So it should be directly taken care of by XF in order to fix it.

I go to a bike dealer and try one of their bikes, I come back and tell them your bike does not work well it does not turn right. And the seller replies that's how we designed it and if you want it to turn right suggest it in the suggestion box...

Anyone who uses the lightbox feature would assume it's a bug, as designed or not it doesn't work as it should.
 

Kirby

Well-known member
Does it work consistently? Nobody would find the way it works normal, consistent, logical...
I must be nobody ;)
The lightbox does work consistently, it does show images that are larger than their container.

as designed or not it doesn't work as it should.
I have to disagree here as well, the feature is working as it should - that'd the definition of working as designed.
You might not like the design decisions, but that doesn"t mean it is not working as it should.
 

mattrogowski

Well-known member
I must be nobody ;)
The lightbox does work consistently, it does show images that are larger than their container.


I have to disagree here as well, the feature is working as it should - that'd the definition of working as designed.
You might not like the design decisions, but that doesn"t mean it is not working as it should.
But from a user's perspective, why would you expect an image that's displaying at a non-native size to be in a lightbox, and one that's at native size to not be? If it's been scaled down it will still be perfectly visible within the post, yet when clicked will open a lightbox while another also displaying as a large image (natural dimensions) won't. If your intention is to be able to see a slideshow of all media on the page, the fact it skips ones that just so happen to be displaying at a native size is definitely not obvious to most.
 
Last edited:

mattrogowski

Well-known member
Put it this way, if you took the average forum user, showed them a post with 5 images, where 4 were larger than the container and had been scaled down and one was a very similar size but rendering at native size, and asked them why that one wasn't in the lightbox, I don't believe that they would say "well that's obvious, the others are not displaying at native size and have been scaled down", as the average forum user has no understanding of that. They'd just be expecting that 5th image at native size to be in the lightbox along with the other 4. It'd be even less obvious if the images weren't next to each other, like image, paragraph, image, paragraph, image, paragraph etc, if one image was a bit smaller than the others so wasn't scaled down, I don't believe for a second that the average user would understand why it wasn't showing with the rest.
 
Last edited:

mattrogowski

Well-known member
If anyone is interested in changing how this works, this is how I resolved it:

Code:
<xf:js>
(function ($, window, document, _undefined)
{
    "use strict";

    XF.Lightbox = XF.extend(XF.Lightbox, {
        isImageNaturalSize: function($image)
        {
            return false;
        },
    });
} (jQuery, window, document));
</xf:js>

This will force it to treat all images as displaying at a non-native size, and this function is what's used to determine whether or not to add it to the lightbox. This will make every image in a post be included. A bit of a crude fix but saves editing a core file or re-defining a larger function.
 

Kruzya

Well-known member
I reported same issue two years ago and received mark "As designed". Unfortunately.
Currently behavior is absolute illogical, and i don't understand, why devs made exactly. In XF 1.x it works as expected (all images showed in lightbox), in XF 2.x for some reason images in natural size is hidden from viewer.
 

nicodak

Well-known member
I must be nobody ;)
The lightbox does work consistently, it does show images that are larger than their container.


I have to disagree here as well, the feature is working as it should - that'd the definition of working as designed.
You might not like the design decisions, but that doesn"t mean it is not working as it should.
 
Top