@Jtring said:
5. Then there is the question of how to close the information panel. It may not be terribly obvious to a casual visitor. In the test version, the info screen icon on the navbar at the left was highlighted when the info screen was active. That provided a cue that that button was linked to the display. Today it's not highlighted other than by the not-terribly-obvious 3px wide bar next to it. I've used custom CSS to restore the highlighting and double the width of that bar. I'd still encourage SM to restore the highlighting they had earlier.
Hmm, it should still show the accent color next to whichever item in the sidebar is selected. Clicking the button will close the sidebar. Also clicking on the photo will also close the sidebar.
The accent color bar is there. The problem is that on a high resolution screen, a 3px wide bar is pretty thin. It can really disappear in Firefox if you have a sidebar with bookmarks. It's more visible when it butts right up to the end of the screen. I just changed the number of pixels, but something like .3vw would be more responsive across various screen sizes.
How to close the sidebar was one of the bigger usability items that we came across as we tested this. We’re eager to hear peoples thoughts and to then continue to iterate. Most of the folks we tested the new LB with found clicking on the photo on their own but we’re curious to see how this holds up now that it’s out in the wild.
I didn't even try to click the image as a way of getting rid of the information panel. It never came to mind. That must say something about my odd mind, but I'm not sure what.
@W.W. Webster said:
Here's a simple request, I think. How can I move the title button from the left to the centre, as it presently overwrites my white watermark with a confusing result.
Thanks in advance for a solution to this.
I think this in your site CSS will do the trick: .sm-lightbox-v2-photo-buttons {justify-content:center}
For those of you, who do not want the details button and the title text displayed over your photos, while the button stays in the sidebar, this should do the trick:
@JSS44 said:
I use the caption to display pricing information and it is important for people to be able to see it without having to look for it. The more times someone has to click and the longer it takes to find information, the more likely they are to just give up and leave. This may not be true for event photographers, where people are already highly motivated to buy prints. But I sell prints to casual shoppers who are browsing and looking for wall decor. If somebody could provide some code to accomplish this it sounds like there may be several of us who would find it helpful. (Apologies if this gets posted twice, but the comment I just posted seems to have disappeared.)
When a viewer clicks the “Buy” button the sidebar opens into the commerce mode.
What if the commerce mode was already active when the Lightbox opens. Would you still need the captions to describe all buying options?
Just realized that the "Edit Photo Details" is a huge button. This is only seen when logged in.
I'm sure anyone logged in knows what it is and it can be minimized and placed somewhere to not interfere with the photo info stack view.
Maybe icon when "logged in" in left nav stack?
I use Web Dev to toggle it on and off when customizing to examine info stack view of visitors.
@Allen it is only visible when you are logged in, not when your visitors are logged in (at least on my site). But you can toggle the size with this code:
@Jtring said:
6. Finally, a two small points regarding the information display. In the camera information section, it really seems ISO should be next to aperture and exposure time (shutter speed) since the three link to determine overall exposure. It seems out of order in its current position.
In the next few weeks we’re planning on slimming down the # of items displayed by default in the “Camera Info” section (essentially the standard information like camera, lens, ISO/Aperture/Shutter Speed, Copyright info, and Date Taken). We’ll improve the grouping of items too.
Add focal length and I'd think you had the perfect basic list.
Does anyone here know how to hide or remove of everything in a lightbox like "view photo details" "full screen" "forward/backward arrow" except for the photo? I want to like the classic one. Any help would be appreciated. Thank you.
I totally disagree with SmugMug’s decision to remove the persistent display of the title, of the description, and of the keywords under the photo in the Lightbox. Please bring back the appearance as it was before the update. Thank you.
Just sharing... To achieve a classic Lightbox image view with no text or tools/buttons except for navigation (R/L arrows & close X), this seems to work for me:
/* NEW LIGHTBOX 2019: HIDE ALL ACTION BUTTONS AT LEFT */
.sm-user-ui .sm-lightbox-v2-navbar-primary .sm-button {
display: none;
}
/* NEW LIGHTBOX 2019: TURN OFF ALL BOTTOM BUTTONS */
.sm-user-ui .sm-lightbox-v2-photo-buttons {
display:none;
}
> @BranislavMilic said: > I totally disagree with SmugMug’s decision to remove the persistent display of the title, of the description, and of the keywords under the photo in the Lightbox. Please bring back the appearance as it was before the update. Thank you.
Agreed. I am no pro user, but when I share my galleries with family, etc, the persistent captions below the picture is very important.
I think it's not a very good idea to group photo title/caption into a single "section" with various camera metadata and all that stuff. I really don't see any reason for that. Ideally, I want the title and caption to always be displayed, because that's what they're for, while the camera metadata should by default be disabled, because that's really not something a person viewing the photo should generally be interested in (but the viewer should obviously still be able to view these if interested in it).
Turning these into all or nothing doesn't really make any sense to me. Especially given that the camera metadata takes a lot of space.
My ideal configuration would be title, caption and possibly keywords (I personally don't think keywords are something that has to be shown to the visitor, but I understand some people want them to be seen for easier navigation) shown by default under the photo (with an option to turn them off or make them only appear on mouseover or something like that), and camera metadata shown separately in a sidebar or overlay box by clicking a button if the viewer wants to see that. That's a layout that makes the most sense to me for a photo gallery.
> @BigRed said: > Just sharing... To achieve a classic Lightbox image view with no text info or tools/buttons (just navigation), this seems to work for me: > > /* NEW LIGHTBOX 2019: HIDE ALL ACTION BUTTONS AT LEFT */ .sm-user-ui .sm-lightbox-v2-navbar-primary .sm-button { display: none;}/* NEW LIGHTBOX 2019: TURN OFF ALL BOTTOM BUTTONS */.sm-user-ui .sm-lightbox-v2-photo-buttons { display:none;}
Thanks for sharing. It worked when I inserted CSS content to a single gallery. When I entered your code into the custom CSS theme, then it does not work. I have no idea why?
Do you also know how to resize the photo in a lightbox?
> My ideal configuration would be title, caption and possibly keywords (I personally don't think keywords are something that has to be shown to the visitor, but I understand some people want them to be seen for easier navigation) shown by default under the photo (with an option to turn them off or make them only appear on mouseover or something like that), and camera metadata shown separately in a sidebar or overlay box by clicking a button if the viewer wants to see that. That's a layout that makes the most sense to me for a photo gallery.
Do you know how to resize the photo in Lightbox? I don't want the photo shows fullscreen on the browser. I am looking for the CSS code that could set the padding or margin in a lightbox. If you could give me the code, I appreciated :-).
I wish SmugMug has the option to disable the Lightbox, but it seems no way.
@polaris said:
Do you know how to resize the photo in Lightbox? I don't want the photo shows fullscreen on the browser. I am looking for the CSS code that could set the padding or margin in a lightbox. If you could give me the code, I appreciated :-).
Why not just limit the size displayed? Go to your Gallery Settings > Photo Protection > Maximum Display Size.
This new New Lightbox it seems complicated.
Now the mouse icon will turn into a magnifying glass while your mouse is over the photo
and get a picture not in size and quality as in the old version "Size and then Original"
Example: https://www.romeocolombo.com/Recent-Photos/i-233G8MH/A
Good magnifying glass while your mouse is over the photo if then I see bigger and in the quality loaded.
Greetings https://www.romeocolombo.com/
Since it made a big change it should already allow customization options instead of requiring to write css to make this useable again, like how we get choices for bottom/under info when customizing galleries. For users that limit the resolution and have a bottom watermark it got completely cluttered with info over the photo, not to mention the buy button covering the corner.
I'm using the code now someone posted to put it under the photo again, but then the title and "view photo details" looks almost invisible with galleries that have a white background, bit weird too that the info is aligned to the corner of the page instead of closer to the image.
@polaris said:
Do you know how to resize the photo in Lightbox? I don't want the photo shows fullscreen on the browser. I am looking for the CSS code that could set the padding or margin in a lightbox. If you could give me the code, I appreciated :-).
Why not just limit the size displayed? Go to your Gallery Settings > Photo Protection > Maximum Display Size.
Thanks, Mike. But I want the image displayed smaller in Lightbox, not the image quality via Poto Protection as you suggested. Please see the photos attached.
@coro085 said:
This new New Lightbox it seems complicated.
Now the mouse icon will turn into a magnifying glass while your mouse is over the photo
and get a picture not in size and quality as in the old version "Size and then Original"
Example: https://www.romeocolombo.com/Recent-Photos/i-233G8MH/A
Good magnifying glass while your mouse is over the photo if then I see bigger and in the quality loaded.
Greetings https://www.romeocolombo.com/
I noticed that too. I hope this is a bug. I don't want to zoom past the Gallery Settings Maximum Display Size.
I like the new Lightbox and the mods you can do, But for me the Title/caption/Keywords/Metadata can all be seen in Gallery view and the Lightbox is for the potential customer to have a closer look at the photo they would have already seen info before going into Lightbox view
Does anyone know how to change the background color or hide backward or forward arrow in the lightbox? Please see the attached photo that what I need. Thank you very much.
While I have my own strong feelings of what SM should and should not do in terms of how the Lightbox appears, we should all keep in mind this, from my favorite cartoonist: https://xkcd.com/1172/
Edit: Disregard, the code I mentioned before still works. But for those who previously relabeled your lightbox buy button, the new code looks like this:
/*Change the BUY PHOTO button label in Lightbox v2*/
.sm-lightbox-buy-button:after {
content: ' Whatever you want it to say here';
}
However, still trying to figure out how to change '.sm-com-lb-sidebar-title' and the label on the Buy Multiple Photos button. In my galleries, ideally those should say 'Buy This Print' and 'Buy Multiple Prints'.
Comments
The accent color bar is there. The problem is that on a high resolution screen, a 3px wide bar is pretty thin. It can really disappear in Firefox if you have a sidebar with bookmarks. It's more visible when it butts right up to the end of the screen. I just changed the number of pixels, but something like .3vw would be more responsive across various screen sizes.
I didn't even try to click the image as a way of getting rid of the information panel. It never came to mind. That must say something about my odd mind, but I'm not sure what.
I think this in your site CSS will do the trick:
.sm-lightbox-v2-photo-buttons {justify-content:center}For those of you, who do not want the details button and the title text displayed over your photos, while the button stays in the sidebar, this should do the trick:
.sm-button.sm-button-nochrome.sm-button-size-large.sm-button-skin-none.sm-lightbox-v2-photo-title.sm-lightbox-v2-hide-landscape.sm-flex-justify-start { display: none; }I think that could work.
Just realized that the "Edit Photo Details" is a huge button. This is only seen when logged in.
I'm sure anyone logged in knows what it is and it can be minimized and placed somewhere to not interfere with the photo info stack view.
Maybe icon when "logged in" in left nav stack?
I use Web Dev to toggle it on and off when customizing to examine info stack view of visitors.
My Website index | My Blog
@Allen it is only visible when you are logged in, not when your visitors are logged in (at least on my site). But you can toggle the size with this code:
.sm-button.sm-button-size-large.sm-button-skin-default.sm-image-metadata-edit-button.sm-button-full-width { width: 20px; font-size: 10px; }Anyone get that feeling when all of a sudden you realize you can't think of what to customize next?
My Website index | My Blog
Add focal length and I'd think you had the perfect basic list.
Does anyone here know how to hide or remove of everything in a lightbox like "view photo details" "full screen" "forward/backward arrow" except for the photo? I want to like the classic one. Any help would be appreciated. Thank you.
Just sharing... To achieve a classic Lightbox image view with no text or tools/buttons except for navigation (R/L arrows & close X), this seems to work for me:
/* NEW LIGHTBOX 2019: HIDE ALL ACTION BUTTONS AT LEFT */ .sm-user-ui .sm-lightbox-v2-navbar-primary .sm-button { display: none; } /* NEW LIGHTBOX 2019: TURN OFF ALL BOTTOM BUTTONS */ .sm-user-ui .sm-lightbox-v2-photo-buttons { display:none; }> I totally disagree with SmugMug’s decision to remove the persistent display of the title, of the description, and of the keywords under the photo in the Lightbox. Please bring back the appearance as it was before the update. Thank you.
Agreed. I am no pro user, but when I share my galleries with family, etc, the persistent captions below the picture is very important.
Since my site is white, but prefer a dark background in my Lightbox, I tried the code posted above. Works great but it has some "holes". When you click on some of the other features, the original background still shows. Rather post the code here (It may change), I thought I'd add it to my Customization page: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Change-Background-Color-in-SmugMug-Lightbox
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
I think it's not a very good idea to group photo title/caption into a single "section" with various camera metadata and all that stuff. I really don't see any reason for that. Ideally, I want the title and caption to always be displayed, because that's what they're for, while the camera metadata should by default be disabled, because that's really not something a person viewing the photo should generally be interested in (but the viewer should obviously still be able to view these if interested in it).
Turning these into all or nothing doesn't really make any sense to me. Especially given that the camera metadata takes a lot of space.
My ideal configuration would be title, caption and possibly keywords (I personally don't think keywords are something that has to be shown to the visitor, but I understand some people want them to be seen for easier navigation) shown by default under the photo (with an option to turn them off or make them only appear on mouseover or something like that), and camera metadata shown separately in a sidebar or overlay box by clicking a button if the viewer wants to see that. That's a layout that makes the most sense to me for a photo gallery.
> Just sharing... To achieve a classic Lightbox image view with no text info or tools/buttons (just navigation), this seems to work for me:
>
> /* NEW LIGHTBOX 2019: HIDE ALL ACTION BUTTONS AT LEFT */ .sm-user-ui .sm-lightbox-v2-navbar-primary .sm-button { display: none;}/* NEW LIGHTBOX 2019: TURN OFF ALL BOTTOM BUTTONS */.sm-user-ui .sm-lightbox-v2-photo-buttons { display:none;}
Thanks for sharing. It worked when I inserted CSS content to a single gallery. When I entered your code into the custom CSS theme, then it does not work. I have no idea why?
Do you also know how to resize the photo in a lightbox?
Without seeing your site, who knows. I'm going to guess you put it in the wrong section or a typo. I tried it and it works. This is where it goes: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-CSS-to-your-SmugMug-Website
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
> My ideal configuration would be title, caption and possibly keywords (I personally don't think keywords are something that has to be shown to the visitor, but I understand some people want them to be seen for easier navigation) shown by default under the photo (with an option to turn them off or make them only appear on mouseover or something like that), and camera metadata shown separately in a sidebar or overlay box by clicking a button if the viewer wants to see that. That's a layout that makes the most sense to me for a photo gallery.
PLEASE BRING BACK THE PREVIOUS APPEARANCE
PHOTO
Title
Description
Keywords
Thank you
Warning: As always, use at your own risk. These can break at any time should we make improvements to the Lightbox in the future.
You should put that on the Smugmug homepage. Who the hell thought that putting crap over the photos would be an improvement?
borealphoto.smugmug.com
Thank you, Mike! I found the problem
Do you know how to resize the photo in Lightbox? I don't want the photo shows fullscreen on the browser. I am looking for the CSS code that could set the padding or margin in a lightbox. If you could give me the code, I appreciated :-).
I wish SmugMug has the option to disable the Lightbox, but it seems no way.
Why not just limit the size displayed? Go to your Gallery Settings > Photo Protection > Maximum Display Size.
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
This new New Lightbox it seems complicated.
Now the mouse icon will turn into a magnifying glass while your mouse is over the photo
and get a picture not in size and quality as in the old version "Size and then Original"
Example:
https://www.romeocolombo.com/Recent-Photos/i-233G8MH/A
Good magnifying glass while your mouse is over the photo if then I see bigger and in the quality loaded.
Greetings
https://www.romeocolombo.com/
For users that limit the resolution and have a bottom watermark it got completely cluttered with info over the photo, not to mention the buy button covering the corner.
I'm using the code now someone posted to put it under the photo again, but then the title and "view photo details" looks almost invisible with galleries that have a white background, bit weird too that the info is aligned to the corner of the page instead of closer to the image.
Thanks, Mike. But I want the image displayed smaller in Lightbox, not the image quality via Poto Protection as you suggested. Please see the photos attached.
I noticed that too. I hope this is a bug. I don't want to zoom past the Gallery Settings Maximum Display Size.
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
I believe that logged in it zooms up to Original. Not logged in it only zooms to max display size.
My Website index | My Blog
No. I just changed it to medium (600 x 400) and logged out. It zooms to the screen, way past maximum photo size.
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
I like the new Lightbox and the mods you can do, But for me the Title/caption/Keywords/Metadata can all be seen in Gallery view and the Lightbox is for the potential customer to have a closer look at the photo they would have already seen info before going into Lightbox view
Instagram
Twitter
Hello everyone
Does anyone know how to change the background color or hide backward or forward arrow in the lightbox? Please see the attached photo that what I need. Thank you very much.
While I have my own strong feelings of what SM should and should not do in terms of how the Lightbox appears, we should all keep in mind this, from my favorite cartoonist: https://xkcd.com/1172/
Edit: Disregard, the code I mentioned before still works. But for those who previously relabeled your lightbox buy button, the new code looks like this:
/*Change the BUY PHOTO button label in Lightbox v2*/ .sm-lightbox-buy-button:after { content: ' Whatever you want it to say here'; }However, still trying to figure out how to change '.sm-com-lb-sidebar-title' and the label on the Buy Multiple Photos button. In my galleries, ideally those should say 'Buy This Print' and 'Buy Multiple Prints'.