Lightbox Customization Issues

erik64

Hi, I'm new to this forum and new to CSS. I'm trying to get my site in order and I've been running into all kinds of issues that can likely be adjusted with CSS. Some things I've been slowly able to sort out on my own, others not so much. There are lots of things that I'd like to change, but let me start with the most annoying - The Lightbox. Like other folks I've been reading about, I'm not too keen on how the caption bar and navigation thingies sometimes interfere with the image. What I'd like the thing to do is create an image at 85% - 90% of "FILL" size to avoid the caption bar and, most importantly, leave a border around the image. I've tried some margin scaling code which sort of works, but since it rescales the already created "Fill" size, it doesn't resharpen and the image looks soft.

If you can't tell it to create a sharpened fill image at 85 - 90%, can the Fill function be disabled? In most cases, if it just uses the largest pre-created image (X2 or X3 for example), I'll still get a good-sized, decent looking image with a border around it. If I just limit the viewable image size to X3 or whatever, a smaller screen will still be filled edge to edge. I don't want to disable the fill function site-wide, just the lightbox. Is this possible? Thanks.

erik64.smugmug.com

Jtring

I don’t have an answer, and I’ll be very interested in anything that comes from Erik’s query. I’ve been fiddling with the lightbox via CSS almost since the arrival of the new SmugMug with some similar concerns and similar problems. Let me at least recount where I’ve been and reinforce the nature of the issue.

Until fairly recently I used an approach that scaled the fill image to provide a margin for the caption to show without any overlaps. It was a hybrid of the things Nicholas Sherlock (http://www.sherlockphotography.org/Customisations) has published with a few of my own twists. I abandoned it because of the rendering sharpness problems, although I didn’t know their source until Erik posted. (I was actually wondering if it had something to do with the handling of progressive JPEGs.) The degree of resolution loss was situation dependent. For example, on my 1920 x 1200 monitor, using Chrome full screen, scaling the fill image (which typically was the X3) resulted in no significant image compromise. On the same monitor with Chrome not running full screen, scaling the fill image (which was itself a scaled X3) looked awful. Firefox behaved somewhat differently: the full-screen lightbox could look worse than the not-full-screen one! While I didn’t explore things enough to be able to provide good documentation here, behavior on my wife’s 1920 x 1080 monitor was different yet. There the scaled lightbox seemed to produce crisp renderings under more circumstances. Since SmugMug’s unscaled “native” lightbox always produced good images, I couldn’t really complain to the help desk on this one either.

The work-around was either to use Chrome full-screen or, with Firefox, to use the sizes button to drop down to X2 or XL images. My CSS included a section that applied an attribute selector to not scale an image whose height was exactly 960px or 768px (X2 or XL) or whose width was exactly 1280px or 1024px.

The work-around had all sorts of difficulties. It’s possible for that sort of logic to get confused by images that are not in 4:3 landscape mode, although in practice, I never ran across an image that presented a problem. However, I had a complex piece of CSS. I had to take the extra step of moving to an X2 or going full screen. When using an X2, I had a margin that was larger than necessary. And I had to insert a note back on the gallery template telling users (mostly just friends and family) what to do if the lightbox looked fuzzy to them.

With the latest lightbox changes I just bailed out on all that and tried to make the best of having the controls and caption overlay the image. I made the background of the controls transparent and the footer transparent (and thus not showing) except when the mouse was hovering.

I’d still love to have simple-looking lightbox that keeps caption and image totally separate. The current approach in the native SmugMug lightbox – caption covering image, long delays on having the caption and controls disappear, and relatively intrusive-looking controls with their big background boxes – certainly presents opportunities for design improvement.

Incidentally, Erik, I see this is your first post. Welcome. This issue led to my first post on Dgrin back in 2013, about a week after the new SmugMug went live: http://dgrin.com/showthread.php?t=237467.

erik64

Anyone?

Thanks for the reply, Jtring. I'm glad someone shares my displeasure with the lightbox. It seems to me, the lightbox should be the place where folks can view our images in their "best light", so to speak. Most of us (I would think) crop and edit our images to achieve a particular visual balance. If you go and cover up part of the image with a caption box or butt it right up against a non-uniform border, it kinda ruins the whole thing.

At a minimum, it would be nice to have a nice, simple lightbox space where your image can be displayed at the largest size possible while still maintaining a visually pleasing border of your choosing around it and which will accommodate the presence of text beneath it.

I know just this side of zero about computer code, but it doesn't seem like it ought to be that hard to make this possible. Correct me if I'm wrong, but as I understand it, newly uploaded images are resized and properly resharpened into the various smugmug "native" sizes (small - X3). To accomplish the "Fill" function there also has to be some code that resizes and resharpens images on the fly to fit the available space. To achieve the desired-scaled down fill size, resizing either a "native" image or a freshly created "fill" image won't work because no resharpening is taking place (maybe with some browsers it does) and the resulting resized image looks crummy. By my way of thinking, the "fill" code has to assess the available space before it creates an image, so.... can either:

a) some invisible margin code be inserted that will fool the "fill" code into thinking the available space is smaller or...
b) insert some code that will tell the "fill" code to only fill 85 - 90% of the assessed available space.

If any any of you CSS experts have any suggestions, I'd really appreciate it. Thanks.

bnickeson

I'd like to bump this thread and piggyback off of it, as I posed some similar questions about the lightbox nearly a year ago. It seems smugmug has made some very minor changes in ways you can edit the lightbox, but unfortunately none of those changes were really anything that needed to be changed or added...though it is at least a step in the right direction.

There are really two schools of thought for the use of the lightbox. One thought process is that the lightbox should be used to display only the photo and display it as large and grand as possible. The other is that the lightbox should be used more as an image landing page, and that it should feature the image somewhat as it is now, but should also include a visible title and caption centered below it in addition to the image tools located on the bottom right. I'm of the second school of thought since smugmug is one of the only gallery or image portfolio sites in existence that does not have an image landing page for most of its gallery styles. Nearly every other photographer's site on earth does in some form or fashion. So when I click on an image in my gallery, I want it to show up in the lightbox (since there's no other option for an image page) with its title and caption visible directly below it, and then the image tools along with the buy button located somewhere else on the page.

Unfortunately, to get something as simple as this requires extensive CSS modification as Sherlock Photography has generously granted us. Also unfortunately, every time smugmug alters their CSS, those customizations no longer work and many of us are left un-notified that our titles, captions, and buy buttons have disappeared.

What really needs to happen is a re-write of the coding in the lightbox. I don't know a whole lot about the coding, but it seems a lot of these customizations would be much easier if the title and caption were in a different div element (or at least a different horizontal element) from the image tools like the Share and Buy buttons. Using a typical monitor size and an image with an XL display size, I have a large space below the image that could be used for the title and caption, but because of the coding method used there's really no easy way of placing that information here.

Again, I'd really like Smugmug to reconsider the way they treat their lightbox page because, as I mentioned earlier, without an image landing page it becomes the most important page on our site. And right now it's by far the most poorly designed and impossible to edit.

Jtring

I just added my vote (and some notes that will show once they get moderator approval) to this feedback item: http://feedback.smugmug.com/forums/17723-smugmug/suggestions/5945747-solve-the-problem-of-the-obtrusive-caption-bar-in.

leftquark

Hey guys,
There's a lot of good discussion here and I'd like to respond in detail (both from a Product standpoint and from a technical standpoint) but I need to gather a little bit of information from our sorcerers to confirm my understanding of how the Lightbox renders images. I did want you to know that I've read the thread, someone from SM is listening, and I'll respond as soon as I can. If it goes a few days with no response from me just bump this thread and I'll make sure to give this the attention it deserves (you shouldn't have to remind me though).

bnickeson

Thanks Aaron, good to hear you guys are listening. I really think the lightbox could use wide-ranging customizations like all of your other pages have.

leftquark

There's a lot of really good discussion here and I want to break it down into a few points and try to address everything. The best place to begin is probably at the beginning: what is the purpose of the lightbox.

What is the Purpose of the Lightbox?
There are 2 lines of thought for the Lightbox and both are valid and correct. bnickeson does a great job of summarizing the 2:

bnickeson wrote: »

One thought process is that the lightbox should be used to display only the photo and display it as large and grand as possible. The other is that the lightbox should be used more as an image landing page, and that it should feature the image somewhat as it is now, also include a visible title and caption below it in addition to the image tools located on the bottom right.

You nailed it! The Lightbox is meant to show off your photo.

Thought #1 is all about the photo and only about the photo. It's how Flickr, 500px and most other photography sites do it. It's all about making the photo visible. More often then not, the photo was clicked from another page where it was smaller and surrounded by text or other objects; opening the lightbox singles out the photo for people to see much larger. Often it fills up the entire screen, it lacks captions, titles and other tools and typically only has navigation options (back, next, close).

Thought #2 is similar, it's still about the photo, but it adds in additional features to make the photo more useful. It adds in titles, keywords, captions, maybe some EXIF information. While it's not necessarily a landing page, it should display information that might have been hidden within the normal gallery style. This is perfect for thumbnail or collage styles, for example, that don't display captions or keywords.

Thought #1 works very well when the gallery style displays the full title, caption, and keywords. Let me hide the 'fluff' of my site and focus entirely on this one image. But it doesn't work well for Thumbnail Style or the Collage and Grid styles where the caption is either not visible at all or really small. You need somewhere to go to display that information and that's where the lightbox comes in.

Thought #2 works well for the Collage/Thumbnail/Grid gallery styles as I just mentioned. It finally lets the user see the caption, tools for downloading, keywords, etc. It's the first chance where we can display a link to the original gallery for collected images, it includes sharing information, and for the owner it opens up the image tools. It does start to clutter the space, though, if the gallery was SmugMug style in which it's repeating the information that was already displayed within the main gallery.

How it Works Now:
Our initial release of lightbox (and as it's been so far) took a hybrid approach. Rather than have multiple lightbox styles we opted for one Lightbox that could work for both. It displays titles, captions, keywords, etc, but still focuses the user on the image at hand. The photo fills as large as possible, the captions don't distract from the photo (for the most part) ... it's all about the photo but with options to see the additional information. For the majority of users, this works great. For the rest, that want better display options, it starts to break down, as you've seen: where do the titles, captions and keywords go? Where do the tools, download and share go? etc....

We determine the properly display size to deliver based on the size of the window prior to any CSS modifications. If we think it needs an X3 to fill, then we'll deliver that, only to then shrink it if you have any custom CSS. The browser handles the downsizing since you can manually change the size of the window. You could, for example, shrink the window down so small that we'd have delivered an X3 when all you really needed was a S. Each browser and even within each OS handles the downsizing differently and as you've mentioned, some do it elegantly, and some not so well. The best fix for this would be for us to develop the lightbox to support what you want and not have to require CSS.

What's in Store for the Future?
Where we could go from here really depends on what you're trying to do. Do you want to shrink the photo to make room for the caption? Do you want the caption to display over the photo always or only on hover? Do you want it to display below the photo and require the user to scroll down? Do we shrink the photo to make some room for the caption? If the caption is really long, do we make the photo really teeny or is it OK for the viewer to have to scroll? Do we move the title, caption and keyword (and potentially EXIF information?) to the right side, where there's 'white space', similar to the "Details" option in Legacy SmugMug? What happens if there is no white space because the image fills the entire screen -- do we shrink it to support a right side bar? You guys will have to let us know what you're looking for so we can scope this to meet your desires.

Lastly, the idea of a "Photo Landing Page" is also a great idea. It's something we'd love to get to, along with additional gallery styles, at some point. It's a place where we could add additional information, like EXIF data (without having to click 'info') and surface title, caption, keywords etc.

Please do continue to add votes / comments to the Feature Request forum that was linked above. We do listen and data/votes help us determine which features are important to you guys.

Stay tuned!

bnickeson

I'm going to bump this thread (again). I'm practically pleading with smugmug to do something about the lightbox or offer an image landing page as described above. I have a feeling that a re-organization of the lightbox would be much easier though and would be enough to get the job done.

As most have noticed, Sherlock Photography's customization to show and center the title/caption no long works. I don't blame him for not updating it as they are changing the CSS in there enough to make it not worth the while. So meanwhile those of us who used his customization have a rather ugly looking title and caption sitting on the bottom left of the page with the Tools panel on the right floating above the bottom of the page. Fun.

I've created a feature request located here: http://feedback.smugmug.com/forums/17723-smugmug/suggestions/10854609-revised-lightbox-layout-for-title-and-captions Hopefully this will be the correct link once the request gets moderator approval. Anyway, if you'd like to have a more functional lightbox that allows for a title and caption that doesn't look like $&*#, please consider reading the request and giving it a vote.

To summarize what I've described above and in the request, I'd like the lightbox div block organizational structure to change so that the Title and Caption block is located under the image, with the Tools panel block fixed to the bottom of the page below that. The way it is currently, the title and caption is located within the same horizontal div block as the tools panel, so any modification to it won't be able to separate it vertically from the tools panel. If you separate them vertically, it opens up a whole new world of simple customizations to be able to tweak the title/caption or hide it completely. Fixing the Tools panel to the bottom of the screen allows it to always be visible whether you've scrolled in the lightbox or not.

If any coders want to chime in on this feel free. I don't know much about coding, but I can't imagine a re-organization like I'm describing would take too incredibly long. I just can't understand how this hasn't been addressed before given the page that shows our image is the most important page on our websites!

leftquark

We have a number of improvements planned for the Lightbox, unfortunately we haven't had a chance to get to them just yet. It's still going to be a little bit of time before we do, but it's high on the priority list after these next few things we're really excited about. Feedback like this will be extremely helpful when we go to implement improvements to the Lightbox. I've gone ahead and approved the Feature Request, so the link should be all good for voting on. Feel free to leave any other comments you'd like so we have all the feedback we can when we start working on it!

ant31460

I was about to post my own question about lightbox captions when I found this thread. The way the new Smugmug displays captions in lightbox view just looks nasty and amateurish. Frankly, I can't believe that there is still no option to have a simple, static, centered caption below the photo in the lightbox, rather than the current messy effort with all the text on the left. The old Smugmug did it perfectly well, so to my mind, this aspect of the new site is an exasperating downgrade, not an upgrade!

ant31460

leftquark, please can you advise if you have any progress to report on this one? Thank you.

havanese

After trying to change the lightbox title and caption area...I found this thread.

November 2015 was some time ago

Would be great to get this worked on by SM.

ant31460

Just in case anyone else reads this thread, yesterday I raised it again with SmugMug Support. Sadly there is still no progress to report, which is very disappointing given that these issues were raised almost 2 years ago. You would have thought that a customizable caption layout would have been quite a basic thing to sort out. :-(

leftquark

As a small company, with thousands of feature requests, we can only do so many of them but we're hard at work on a number of things we're really excited to release for you.

In terms of the Lightbox, I'll just say that sometimes the simple things can require something more complex to make it happen. We're working on getting the Lightbox ready for many of the items that have been brought up here.

havanese

@leftquark said:
As a small company, with thousands of feature requests, we can only do so many of them but we're hard at work on a number of things we're really excited to release for you.

In terms of the Lightbox, I'll just say that sometimes the simple things can require something more complex to make it happen. We're working on getting the Lightbox ready for many of the items that have been brought up here.

Any new features coming 1Q of 2017?

leftquark

Last year we released updates on average 3 times a day and we plan on continuing that (or rather growing that) this year. Even this week we have some exciting things planned. Stay tuned!

havanese

@leftquark said:
Last year we released updates on average 3 times a day and we plan on continuing that (or rather growing that) this year. Even this week we have some exciting things planned. Stay tuned!

That's an impressive feat...as a 9-year member I would say I don't think I'm aware of more than 10 or so new features...where can I see updates, patches, new features, etc...as that is a very impressive number.

leftquark

A number of the updates are behind-the-scenes things that don't get discussed, but we post weekly release notes over on our blog (https://news.smugmug.com/tagged/release-notes) and I've been posting monthly updates in the Product News Forum, though I got a little behind!