One thing that’s always slightly bothered me is the black bar that regularly pops up over images, often hiding important details, and (to me) not serving a useful purpose:
Our members wouldn’t be particularly interested in the image dimensions or file size.
Could this be made configurable … or just disabled?
Oh … looking at the screenshot and behavior on my iPhone, this looks like a bit of a bug @zogstrip.
We don’t even have hover on mobile so displaying this bar is kind of pointless. The way it triggers in and out now is very strange.
After you click an image, on the iPhone, it grows, then you click elsewhere, it shrinks and leaves a leftover black mark on the image, till you click elsewhere again.
You can easily disable it with this CSS
.lightbox .meta { display: none; }
I can’t reproduce this on my iPhone.
Oh I have a 100% repro on mobile, you have to “touch scroll” so you scroll the page starting with the image. It does not pop up the image but it does show the black bar, which is a bit pointless on mobile anyway.
Any reason not to suppress it unconditionally on mobile?
None. I’m fine hiding it on mobile.
I may be missing the rationale here. I’m thinking it might be better to change the position rather than remove it. Especially for mobile. For example if I see “lolcat.jpg 838GB” I might decide that despite how cute the image is I would prefer to not download the full image regardless. If not a “black bar” I think an indication of the file’s weight could still be a good thing to have.
If you can only randomly trigger it using ninja, swipe scroll, there is very little point in keeping it.
If you are making an argument for displaying it unconditionally, well I am not sure about this, on click you should get a nice lightbox with all the info. Maybe a better hint that you can make it bigger.
Can’t someone just tap outside the image and the bar will go away? I mean, that works on my phone…
Would having the metadata bar “attached” to the bottom of the photo be a decent solution? This could be done across both desktop and mobile for consistency without any drawback that I can think of. It would eliminate any obscuring of the photo, which seems ideal. The space of the bar can be set without actually displaying, and then on hover of the photo, the metadata bar fades in, indicating the ability to maximize and providing some info on the photo.
Edit: The CSS below does what I was thinking about. After seeing it, though, the extra space below the image when it’s not hovered over might not be desirable.
.lightbox img {
margin-bottom: 30px;
}
Yes, they can.
But… how do they “magic tap” it in? Why is “scrolling” suddenly an act that makes the black box appear.
This is just confusing to end users, they have a workaround to a problem they should not be having.
I worry that this introduces visual noise everywhere, I am much more open with some sort of indicator that shows you can “expand” on mobile, but metadata on every single image always displayed feels very noisy.
Would something like this, but on mobile work, or is it too subtle?
I sized it to fit in the established space between a line of text and the top of the image. Are you thinking of having a mobile image expansion indicator always visible, or have it appear on some scroll or tap event?
In any case, I really like that this discussion is happening. I’ve been a bit unhappy with the way images, scrolling, and the metadata bar work together on mobile.
No it wouldn’t work on mobile, there’s no “hover” “mouseenter” “mouseleave”… events on mobile. You touch or you don’t that’s mostly the two possible states.
@ChrisBeach I just made a little theme component that might improve things a little. See what you think.
https://meta.discourse.org/t/subtle-image-expansion-hint-for-mobile-theme-component/81758
Well, if you tap the image, it automatically shows the black bar at the bottom, but it also opens the image. If you are scrolling down and tap the image, then the image acts like you tapped it, but yet it doesn’t open a new window…
@nbianca can you take this? On mobile, only shows the 
arrows like it’s done in
https://meta.discourse.org/t/subtle-image-expansion-hint-for-mobile/81758