> There is a Lightbox customization setting that will leave the navigation buttons always on. > Where can I find that? I would like to have the nav's and title to be always on.
There is a Lightbox customization setting that will leave the navigation buttons always on.
I searched and searched but cannot find. Can you point my a direction? I'm a bit familiar with css (already have the 'Buy' button always off as I don't sell but I'm unable to find the right setting for the New Lightbox - Title always on.
TIA
There is a Lightbox customization setting that will leave the navigation buttons always on.
I searched and searched but cannot find. Can you point my a direction?
It's pretty buried. One day in the future we'll surface these settings more visibly:
1. Start on a Gallery (any gallery will do).
2. Go to "Customize" and then choose "Content and Design"
3. On the "Content" tab in the sidebar on the right, you'll see an option for "Lightbox" with an icon of a wrench next to that. Click the wrench.
4. This opens the Lightbox settings where you can set it to always be on, for example.
There is a Lightbox customization setting that will leave the navigation buttons always on.
I searched and searched but cannot find. Can you point my a direction?
It's pretty buried. One day in the future we'll surface these settings more visibly:
1. Start on a Gallery (any gallery will do).
2. Go to "Customize" and then choose "Content and Design"
3. On the "Content" tab in the sidebar on the right, you'll see an option for "Lightbox" with an icon of a wrench next to that. Click the wrench.
4. This opens the Lightbox settings where you can set it to always be on, for example.
So this would have to be done on every gallery? There is no site wide setting?
@brandofamily said:
So this would have to be done on every gallery? There is no site wide setting?
Either. If done on "All Galleries", then it applies to every gallery on your site (Site-Wide). You also have the option to make a gallery custom by selecting "Just this gallery...", in which case the settings can be different from your site-wide galleries.
There was a request for adding some padding to the top/bottom of the photo. Here's the CSS. You should be able to use this.... change the "80px" to whatever amount of padding you want ... times 2. So this adds 40px to the top/bottom.
/* Add 40px of space above and below lightbox content */
@media screen and (min-width: 961px) {
.sm-user-ui .sm-lightbox-v2-content {
height: calc(100% - 80px);
align-self: center;
}
}
Hi. I would like the Title, Caption, and Buy Button to be displayed in full beneath the photo. When I tried the code in #8 above, only the Buy Button moved below the photo. When I tried #9, nothing happened. Basically, I'm trying to recreate what my old lightbox looked like here: Any help would be appreciated greatly. Thank you. www.foundviewgallery.com
@JSS44 said:
Hi. I would like the Title, Caption, and Buy Button to be displayed in full beneath the photo. When I tried the code in #8 above, only the Buy Button moved below the photo. When I tried #9, nothing happened. Basically, I'm trying to recreate what my old lightbox looked like here: Any help would be appreciated greatly. Thank you. www.foundviewgallery.com
I want exactly the same. I am so frustrated right now. For some reasons all the new implements always make everything worse for me. Please tell me how to ALWAYS show caption and keywords by default like it used to be?! Can the "photo details" be made open all the time by default? I don't seem to find answer to that..
Re: The suggested "8. Move the "Title" and "Buy" buttons below the photo"
As written, the code works fine....., but only if one is using a hideous black or some similarly hideous dark colored background. If using a white background, the title is all but invisible (only because of the beveled aspect is the title visible at all).
See attached example (I have the 'Buy Photo' button turned off so not expecting that to appear).
Re: The suggested "9. Render title, caption, and keywords at bottom on desktop & tablet landscape viewports."
This suggestion sorta almost works. The title/caption/keywords do display at the bottom....but only if the site viewer knows to click the 'Photo Details' button. Is there not a way to make that data appear by default when an image is loaded in the lightbox. A site vistor shouldn't have to click anything to make that appear...unless "I" (the site owner) chooses to design my site in such a way.
And to compound the issue with this one, employing it re-introduces the one real gripe I had with the old lightbox functionality. If the site visitor does click the Photo Details button, then the image itself is glued to the top of the browser window. I.e., there is no 'white' space between the upper edge of the browser window and the image.
Photo Info Toggle button in new Lightbox. Creating an obvious button.
I managed to replace the hamburger with text. Hamburger icon shows under text when expanded, need to hide icon.
Any help would be appreciated. Thanks
It fits real nice in the space available. Line wrap places words each on a different line.
Have not checked whether !important is need.
Download disappeared, then remembered had it turned off on most galleries.
@leftquark please can you give some information on how/when/if this problem is handled, that the caption is not showing by default (or photo details can be turned on by default if site owner chooses so). This is crucial, my clients need to see that immediately without clicking anywhere, and as I can see, many others request it too.
@kyllitedre said: @leftquark please can you give some information on how/when/if this problem is handled, that the caption is not showing by default (or photo details can be turned on by default if site owner chooses so). This is crucial, my clients need to see that immediately without clicking anywhere, and as I can see, many others request it too.
Absolutely! I try to be as communicative as I can. I need to do a better job of having open discussions with y'all and making sure to those discussions don't give the intent that we are absolutely changing things. I love DGrin because it gives me a chance to work with all of you and understand your desires and goals. Sometimes we'll make immediate changes from these discussions, and sometimes they help give us insight without any planned changes.
Currently I'd like the new Lightbox to sit for a few weeks with all of you and your visitors before we make any changes. We worked with many customers (Pro and non-Pro) as well as many of your visitors to dive into what was working well, how your minds work when viewing photos, and understand how well both the new and old design worked. The decisions made were very deliberate to fix many of the frustrations that were highlighted in all of these discussions. For example, your visitors told us loudly "when we view a photo, we want to view a photo. We don't want to be distracted by other text. And when we want to read text, it needs to be easy to read and we stop paying close attention to the photo. The title/caption on top of the photo distracts us from enjoying the photo, and the photo behind the text makes it hard to read the caption." When we tested the new design with your visitors they said "YES! THIS IS SO MUCH BETTER! I can enjoy the photo and when I want, read the story!"
Now that we're getting a lot more folks using the new Lightbox we'll collect all the feedback and then determine what improvements need to be made. Feedback like this helps us shape that -- it's you who shape the implementations, not just a few designers and engineers on our team. We're here listening and collecting all the feedback from DGrin, the Help Desk, from Social, from your visitors, and a few other places that give us insight.
With that said, I'd love to keep getting a better understanding of your workflow such that having captions on top of the photo is crucial. How do you and your customers use those captions?
@leftquark
There are so many different kinds of photographers here on SM, and what they are trying to accomplish is so different.
I would imagine that many professional photographers really don't need or want text info to distract from the image. Whether it is event photographers or those who are selling artistic shots, the viewer/purchaser doesn't need or want a lot of distracting text (the folks interested in buying event pix already know what the event is and the viewer/purchaser of artistic shots wants to see how the photo looks as a piece of art...in both cases the text can distract).
Then there are those who specialize in a certain kind of photography...e.g., insects. They take close up shots of insects and want to provide detailed info about the bugs, and their viewers want that, too. They want title and caption to be easily accessible, since the info they provide is an absolutely essential part of the experience.
Then there those like me who are documenting family stuff, or the soccer season of their child's team, and we, too, want to be able to have text info as an integral part of the Lightbox, but we don't need as much room for text as photographer type #2.
In my particular use case, I'd be happy with Title always showing and a clearly viewable "click for more info" method to view the caption, but ONLY when there actually is a caption; I don't want views to constantly click on "more" only to find that 50% there is nothing else to look at.
@camner said:
In my particular use case, I'd be happy with Title always showing and a clearly viewable "click for more info" method to view the caption, but ONLY when there actually is a caption; I don't want views to constantly click on "more" only to find that 50% there is nothing else to look at.
Agreed!
We spend a lot of time thinking about "what is the ultimate outcome this person wants to get to." In many cases "I just want to see the photo and know what it's of." If the title gets you that, and there's no more information to get to that outcome, then we don't need a giant "CLICK HERE FOR MORE" because the outcome has already been realized ... it'd just upset the viewer. So we try to be smart about those things
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.
@kyllitedre said: @leftquark please can you give some information on how/when/if this problem is handled, that the caption is not showing by default (or photo details can be turned on by default if site owner chooses so). This is crucial, my clients need to see that immediately without clicking anywhere, and as I can see, many others request it too.
Absolutely! I try to be as communicative as I can. I need to do a better job of having open discussions with y'all and making sure to those discussions don't give the intent that we are absolutely changing things. I love DGrin because it gives me a chance to work with all of you and understand your desires and goals. Sometimes we'll make immediate changes from these discussions, and sometimes they help give us insight without any planned changes.
Currently I'd like the new Lightbox to sit for a few weeks with all of you and your visitors before we make any changes. We worked with many customers (Pro and non-Pro) as well as many of your visitors to dive into what was working well, how your minds work when viewing photos, and understand how well both the new and old design worked. The decisions made were very deliberate to fix many of the frustrations that were highlighted in all of these discussions. For example, your visitors told us loudly "when we view a photo, we want to view a photo. We don't want to be distracted by other text. And when we want to read text, it needs to be easy to read and we stop paying close attention to the photo. The title/caption on top of the photo distracts us from enjoying the photo, and the photo behind the text makes it hard to read the caption." When we tested the new design with your visitors they said "YES! THIS IS SO MUCH BETTER! I can enjoy the photo and when I want, read the story!"
Now that we're getting a lot more folks using the new Lightbox we'll collect all the feedback and then determine what improvements need to be made. Feedback like this helps us shape that -- it's you who shape the implementations, not just a few designers and engineers on our team. We're here listening and collecting all the feedback from DGrin, the Help Desk, from Social, from your visitors, and a few other places that give us insight.
With that said, I'd love to keep getting a better understanding of your workflow such that having captions on top of the photo is crucial. How do you and your customers use those captions?
I am not asking for captions on top of the photo. I am asking to recreate what I already had (see my old lightbox image posted previously in this thread, above) and what was working well for me--to have the photo title and captions always display below the photo, in full, without any need to click on anything first. I use this when selling prints so that all pricing information is available effortlessly. The more someone has to click and look for information, the more likely they are to just give up and lose interest. That may not be true for event photographers, when people are already highly motivated to buy prints. But my prints attract casual shoppers looking for wall decor. The information needs to be available without them having to look for it. If anyone could provide some code that would achieve this, it sounds like there may be several of us who would find it helpful.
@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?
A couple of weeks ago I posted my CSS mods for the still-in-process version of Lightbox V2. See https://dgrin.com/discussion/comment/2097029#Comment_2097029. Now that we're live, let me post an update with my observations on the release version, a screenshot of what I have after updating my CSS, and a listing of new CSS. Feel free to use or adjust the CSS as desired.
First, my situation. My galleries tell stories, but not all in one picture. Each picture gets a caption of one, two, or three sentences. I don't use titles. They look great in the new lightbox but the inability to sort galleries by title is something of a show-stopper. That means captions are THE storyline carrier and need lots of emphasis. I'm enough of an enthusiast that keywords and camera information are interesting, but the definitely a notch down. And while my photos are primarily aimed at family and friends (and myself), I do get comments back from other site visitors from time to time. So I have to take into account an irregular sequence of visitors who may know nothing of SmugMug.
So, some observations on the new lightbox ... and some motivations for the changes I've introduced.
Up front, let me note I do like the new lightbox. Things need fiddling, but for me, I find this a plus overall.
Given my approach, the display needs to emphasize captions more and de-emphasize everything else. I've fiddled with colors, fonts, and spacing to do so.
As Allen pointed out first, things get ugly in Firefox if the information panel ever needs to scroll. Aaron mentioned that SmugMug might implement the non-standard scrollbar-width and scrollbar-color CSS properties which Firefox recognizes. I'll note they haven't. Worse, SmugMug does not forward these when written into user custom CSS. Can SmugMug do anything on their end regarding one or both of these? In the mean time, I've tightened up the camera information section in a variety of ways so scrolling is needed only infrequently.
As Ferguson has noted, site visitors may not even find the captions in the lightbox. For me, captions are quite visible on the basic collage landscape display -- I use rather large images and have allowed the captions to go up to five lines under each -- so the caption issue in the lightbox is not a showstopper. But it is there, at least when I think about those irregular visitors. Being able have the lightbox open with the information screen showing as the default would be welcome, although it's not the must-have for me that it appears to be for others. (Since I don't use titles, the "VIEW PHOTO DETAILS" message shows, and that helps, but it's not always that visually obvious. I've played with moving it around, but haven't found any alternate position that doesn't have its own downsides.)
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.
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. And it would be nice for the custom CSS writer if it were possible to distinguish whether the camera info display is in the "SHOW MORE" or "SHOW LESS" mode. Right now no classes or variables change. All that happens is that more lines show up in one compared to the other.
In any case here's a screen shot of my CSS-adjusted lightbox. Code will follow in a separate message.
And here's the code mentioned in my previous message. Feel free to copy or adapt as desired.
/* Reset Lightbox background color to be a bit darker than the theme dark color
2019-08-15*/
.sm-user-ui.sm-user-overlay-container .sm-modal-mask.sm-lightbox-v2-modal-mask[data-opacity="opaque"],
.sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-navbar,
.sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar {
background-color: #242526;
}
/* Narrow and darken the scroll bar in Firefox. Note this does not actually work so is here
as a place-holder at the moment. Smugmug strips this browser-specific non-standard code. 2019-08-16.*/
.sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar {
scrollbar-width: thin;
scrollbar-color: #444 #777;
}
/* In the left side navbar, de-emphasize buttons not selected, but highlight the selected one
by making the icon pure white and by widening the marker on the side. This provides a bit more of a visual cue
as to what's going on. It also adds a guide on how to close the information panel. 2019-08-16*/
.sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-navbar .sm-lightbox-v2-primary-controls-list button.sm-button {
color: #989ba2;
}
.sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-navbar .sm-lightbox-v2-primary-controls-list button.sm-button[data-selected="true"] {
color: white;
}
.sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-primary-controls-list button.sm-button[data-selected="true"]::after {
border-width: 0 0 0 6px;
}
/* Adjust the caption color and sizing to increase emphasis and visual focus to this section. 2019-05-29*/
.sm-user-ui .sm-lightbox-v2 .sm-image-metadata-caption {
color: white;
font-size: 18px;
line-height:1.33em;
}
/* Adjust color on all secondary text in the information sidebar (all except the title, caption, and "show more")
to a light gray. This de-emphasizes this section so as to emphasize the title and caption.
2019-08-15*/
.sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar .sm-keywords a,
.sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar p.sm-image-metadata-attribution,
.sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar p.sm-image-metadata-attribution a,
.sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar .sm-imageinfo-label,
.sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar .sm-imageinfo-value,
.sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar button,
.sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar h5{
color: #989ba2;
}
/* Add extra space above keywords, again adding focus on caption. 2019-05-29*/
.sm-user-ui .sm-lightbox-v2 .sm-image-metadata-keywords {
margin-top:48px;
}
/* Remove the unnecessary keywords label. 2019-05-29*/
.sm-user-ui .sm-lightbox-v2 .sm-image-metadata-keywords h5 {
display:none;
}
/* Meke the Edit Photo Details button transparent, visually reducing it's impact. 2019-08-16*/
.sm-user-ui .sm-lightbox-v2-sidebar button[data-elem-id="imagemetadata_edit_button"] {
background: transparent;
}
/* Tighten up the spacing on camera info entries in the information sidebar.
This reduces the need for scrolling in many cases. Inserted 2019-07-04.*/
.sm-lightbox-v2-sidebar-content .sm-imageinfo-container .sm-imageinfo-label,
.sm-lightbox-v2-sidebar-content .sm-imageinfo-container .sm-imageinfo-value {
padding-bottom: 4px;
}
/* Many specific adjustments to the entries in the Camera Info data table. Note the basic metadata fields are
Camera, Lens, ISO,Focal Length, Aperture, Exposure Time, Name, Size, File Size, Date Taken, Date Modified, and Copyright.
The goal here is to produce a more compact camera info section which does not compete as much for visual attention
with the more important title and caption. To that end, I've reduced line spacing, adjusted spacing and wording to
avoid multi-line wrapped entries, and have removed a few entries that seem unnecessary.
/* Remove three of the basic entries. 2019-08-16*/
.sm-lightbox-v2-sidebar-content tr[data-metadata="Size"] {
display:none;
}
.sm-lightbox-v2-sidebar-content tr[data-metadata="File Size"] {
display:none;
}
.sm-lightbox-v2-sidebar-content tr[data-metadata="Date Modified"] {
display:none;
}
/* For those that remain, set width of the label to 0%. This shrinks the width of the
label column to the length of longest word, rather than half the table width, leaving more
space for the data. For the three two-word labels (Focal Lenth, Exposure Time, Date Taken),
this would result in a word-wrap and uneven spacing. Replace these with
one-word alternatives. Note that when SHOW MORE is active, there are entries without the
0% width so the table returns to 50% label, 50% data. That seems OK given the complexity of some of the
labels there and that I plan to turn that option off except for my own use as site owner.
2019-08-16*/
.sm-lightbox-v2-sidebar-content tr[data-metadata="Camera"] .sm-imageinfo-label {
width:0%;
}
.sm-lightbox-v2-sidebar-content tr[data-metadata="Lens"] .sm-imageinfo-label {
width:0%;
}
.sm-lightbox-v2-sidebar-content tr[data-metadata="ISO"] .sm-imageinfo-label {
width:0%;
}
.sm-lightbox-v2-sidebar-content tr[data-metadata="Focal Length"] .sm-imageinfo-label {
font-size:0;
width:0%;
padding-bottom:0;
}
.sm-lightbox-v2-sidebar-content tr[data-metadata="Focal Length"] .sm-imageinfo-label:before {
Content:"FL";
font-size:12px;
}
.sm-lightbox-v2-sidebar-content tr[data-metadata="Focal Length"] .sm-imageinfo-label {
width:0%;
}
.sm-lightbox-v2-sidebar-content tr[data-metadata="Aperture"] .sm-imageinfo-label {
width:0%;
}
.sm-lightbox-v2-sidebar-content tr[data-metadata="Exposure Time"] .sm-imageinfo-label {
font-size:0;
width:0%;
padding-bottom:0;
}
.sm-lightbox-v2-sidebar-content tr[data-metadata="Exposure Time"] .sm-imageinfo-label:before {
Content:"Shutter";
font-size:12px;
}
.sm-lightbox-v2-sidebar-content tr[data-metadata="Name"] .sm-imageinfo-label {
width:0%;
}
.sm-lightbox-v2-sidebar-content tr[data-metadata="Date Taken"] .sm-imageinfo-label {
font-size:0;
width:0%;
padding-bottom:0;
}
.sm-lightbox-v2-sidebar-content tr[data-metadata="Date Taken"] .sm-imageinfo-label:before {
Content:"Taken";
font-size:12px;
}
.sm-lightbox-v2-sidebar-content tr[data-metadata="Copyright"] .sm-imageinfo-label {
width:0%;
}
/* Remove the SHOW MORE [camera info] button. Restore when logged in as owner.
It's too much information and too much clutter for general browsers, but I
occaisionally like to check some of it as the owner. Thanks to Allen from
Dgrin for correcting my earlier code here. 2019-05-29*/
.sm-user-ui .sm-lightbox-v2 .sm-imageinfo-advanced-btn {
display:none;
}
.sm-user-loggedin.sm-user-owner .sm-lightbox-v2 .sm-imageinfo-advanced-btn {
display:inline-flex;
}
/* Update font for overlay title in lightbox to be the same font as the VIEW PHOTO DETAILS message
when there is no title. This is mostly moot at the moment given I use titles only in one very-out-of-the
way test gallery now, but I may use them more in the future.
2019-05-29. */
.sm-user-ui .sm-lightbox-v2-photo-buttons h2{
font-size: 16px;
font-weight: 400;
}
@Jtring said:
3. As Allen pointed out first, things get ugly in Firefox if the information panel ever needs to scroll. Aaron mentioned that SmugMug might implement the non-standard scrollbar-width and scrollbar-color CSS properties which Firefox recognizes.
It’s on the list for things to improve in the next few weeks but as you can imagine we were trying to finish up the last things that were outstanding to get this fully live and we had determined this shouldn’t be a blocker to getting this out to everyone. Getting the map back into the Camera Info section, for example, is coming in the next few days. The Firefox update will be Coming soon!
@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.
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.
@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.
@Jtring said:
And it would be nice for the custom CSS writer if it were possible to distinguish whether the camera info display is in the "SHOW MORE" or "SHOW LESS" mode. Right now no classes or variables change. All that happens is that lines show up in one compared to the other.
Comments
>
Where can I find that? I would like to have the nav's and title to be always on.
BTW Why don't work my Markdown blockquotes?
https://www.vanronton.nl/
Markdown is not available in the first two posts
Now I'm promoted!
https://www.vanronton.nl/
I should I do when the update arrives?
.sm-page-powered-by {
overflow:hidden;
height:0;
}
.sm-page-layout>.sm-page-layout-region-header.sm-page-layout-region-pinned, .sm-page-layout>.sm-page-layout-region>.sm-page-layout-region-left.sm-page-layout-region-pinned, .sm-page-layout>.sm-page-layout-region>.sm-page-layout-region-right.sm-page-layout-region-pinned {position: relative;}
/* add a margin to a lightbox image */
.sm-lightbox-image {
-webkit-transform: scale(0.90);
-moz-transform: scale(0.90);
-ms-transform: scale(0.90);
transform: scale(0.90);
-webkit-backface-visibility: hidden;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-repeat: no-repeat;
background-position: center center;
background-size: contain !important;
}
@leftquark said 5 august:
I searched and searched but cannot find. Can you point my a direction? I'm a bit familiar with css (already have the 'Buy' button always off as I don't sell
but I'm unable to find the right setting for the New Lightbox - Title always on.
TIA
https://www.vanronton.nl/
.
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
It's pretty buried. One day in the future we'll surface these settings more visibly:
1. Start on a Gallery (any gallery will do).
2. Go to "Customize" and then choose "Content and Design"
3. On the "Content" tab in the sidebar on the right, you'll see an option for "Lightbox" with an icon of a wrench next to that. Click the wrench.
4. This opens the Lightbox settings where you can set it to always be on, for example.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
So this would have to be done on every gallery? There is no site wide setting?
Either. If done on "All Galleries", then it applies to every gallery on your site (Site-Wide). You also have the option to make a gallery custom by selecting "Just this gallery...", in which case the settings can be different from your site-wide galleries.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Here's where the settings are, in case the screenshot helps:
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
There was a request for adding some padding to the top/bottom of the photo. Here's the CSS. You should be able to use this.... change the "80px" to whatever amount of padding you want ... times 2. So this adds 40px to the top/bottom.
/* Add 40px of space above and below lightbox content */ @media screen and (min-width: 961px) { .sm-user-ui .sm-lightbox-v2-content { height: calc(100% - 80px); align-self: center; } }Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Thanks for the top and bottom padding, looks like it works great adding same space for portraits. Not needed for landscapes.
Used 40px
My Website index | My Blog
Hi. I would like the Title, Caption, and Buy Button to be displayed in full beneath the photo. When I tried the code in #8 above, only the Buy Button moved below the photo. When I tried #9, nothing happened. Basically, I'm trying to recreate what my old lightbox looked like here:
Any help would be appreciated greatly. Thank you. www.foundviewgallery.com
I want exactly the same. I am so frustrated right now. For some reasons all the new implements always make everything worse for me. Please tell me how to ALWAYS show caption and keywords by default like it used to be?! Can the "photo details" be made open all the time by default? I don't seem to find answer to that..
Re: The suggested "8. Move the "Title" and "Buy" buttons below the photo"
As written, the code works fine....., but only if one is using a hideous black or some similarly hideous dark colored background. If using a white background, the title is all but invisible (only because of the beveled aspect is the title visible at all).
See attached example (I have the 'Buy Photo' button turned off so not expecting that to appear).
Re: The suggested "9. Render title, caption, and keywords at bottom on desktop & tablet landscape viewports."
This suggestion sorta almost works. The title/caption/keywords do display at the bottom....but only if the site viewer knows to click the 'Photo Details' button. Is there not a way to make that data appear by default when an image is loaded in the lightbox. A site vistor shouldn't have to click anything to make that appear...unless "I" (the site owner) chooses to design my site in such a way.
And to compound the issue with this one, employing it re-introduces the one real gripe I had with the old lightbox functionality. If the site visitor does click the Photo Details button, then the image itself is glued to the top of the browser window. I.e., there is no 'white' space between the upper edge of the browser window and the image.
Photo Info Toggle button in new Lightbox. Creating an obvious button.
I managed to replace the hamburger with text. Hamburger icon shows under text when expanded, need to hide icon.
Any help would be appreciated. Thanks
It fits real nice in the space available. Line wrap places words each on a different line.
Have not checked whether !important is need.
Download disappeared, then remembered had it turned off on most galleries.
.sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-navbar-primary li:nth-child(2) .sm-button-square:after { content:" INFO CAPTION On/Off"!important; font-size:75%!important; color: yellow!important; } .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-navbar-primary li:nth-child(5) .sm-button-square:after { content:" Down load"!important; font-size:80%!important }Example: https://www.photosbyat.com/Birds/Missouri-Bird-Photos-A-G/i-FndDvc4/A
My Website index | My Blog
(if you use
.sm-user-uithen you shouldn't need the!important)Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Thanks It does work without the `!important.
Only see two things that need fixin.
1. Hide hamburger on expanded info.
2. Auto hide close button
Any help appreciated
Thanks
Edit: Ha, just took a background to hide the icon.
One of copy/paste goofs, had double CSS. Exit button now hides.
.sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-navbar-primary li:nth-child(2) .sm-button-square:after { content:" INFO & CAPTION On/Off"; font-size:75%; background: #222; x border-radius: 4px; x border: 2px solid #ccc; x padding: 3px 4px 0px 2px; x margin-left:4px; color:#ff0 }My Website index | My Blog
How can we make the caption display by default (without the need to click "details")?
@leftquark please can you give some information on how/when/if this problem is handled, that the caption is not showing by default (or photo details can be turned on by default if site owner chooses so). This is crucial, my clients need to see that immediately without clicking anywhere, and as I can see, many others request it too.
Absolutely! I try to be as communicative as I can. I need to do a better job of having open discussions with y'all and making sure to those discussions don't give the intent that we are absolutely changing things. I love DGrin because it gives me a chance to work with all of you and understand your desires and goals. Sometimes we'll make immediate changes from these discussions, and sometimes they help give us insight without any planned changes.
Currently I'd like the new Lightbox to sit for a few weeks with all of you and your visitors before we make any changes. We worked with many customers (Pro and non-Pro) as well as many of your visitors to dive into what was working well, how your minds work when viewing photos, and understand how well both the new and old design worked. The decisions made were very deliberate to fix many of the frustrations that were highlighted in all of these discussions. For example, your visitors told us loudly "when we view a photo, we want to view a photo. We don't want to be distracted by other text. And when we want to read text, it needs to be easy to read and we stop paying close attention to the photo. The title/caption on top of the photo distracts us from enjoying the photo, and the photo behind the text makes it hard to read the caption." When we tested the new design with your visitors they said "YES! THIS IS SO MUCH BETTER! I can enjoy the photo and when I want, read the story!"
Now that we're getting a lot more folks using the new Lightbox we'll collect all the feedback and then determine what improvements need to be made. Feedback like this helps us shape that -- it's you who shape the implementations, not just a few designers and engineers on our team. We're here listening and collecting all the feedback from DGrin, the Help Desk, from Social, from your visitors, and a few other places that give us insight.
With that said, I'd love to keep getting a better understanding of your workflow such that having captions on top of the photo is crucial. How do you and your customers use those captions?
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
@leftquark
There are so many different kinds of photographers here on SM, and what they are trying to accomplish is so different.
I would imagine that many professional photographers really don't need or want text info to distract from the image. Whether it is event photographers or those who are selling artistic shots, the viewer/purchaser doesn't need or want a lot of distracting text (the folks interested in buying event pix already know what the event is and the viewer/purchaser of artistic shots wants to see how the photo looks as a piece of art...in both cases the text can distract).
Then there are those who specialize in a certain kind of photography...e.g., insects. They take close up shots of insects and want to provide detailed info about the bugs, and their viewers want that, too. They want title and caption to be easily accessible, since the info they provide is an absolutely essential part of the experience.
Then there those like me who are documenting family stuff, or the soccer season of their child's team, and we, too, want to be able to have text info as an integral part of the Lightbox, but we don't need as much room for text as photographer type #2.
In my particular use case, I'd be happy with Title always showing and a clearly viewable "click for more info" method to view the caption, but ONLY when there actually is a caption; I don't want views to constantly click on "more" only to find that 50% there is nothing else to look at.
Agreed!
We spend a lot of time thinking about "what is the ultimate outcome this person wants to get to." In many cases "I just want to see the photo and know what it's of." If the title gets you that, and there's no more information to get to that outcome, then we don't need a giant "CLICK HERE FOR MORE" because the outcome has already been realized ... it'd just upset the viewer. So we try to be smart about those things
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
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 am not asking for captions on top of the photo. I am asking to recreate what I already had (see my old lightbox image posted previously in this thread, above) and what was working well for me--to have the photo title and captions always display below the photo, in full, without any need to click on anything first. I use this when selling prints so that all pricing information is available effortlessly. The more someone has to click and look for information, the more likely they are to just give up and lose interest. That may not be true for event photographers, when people are already highly motivated to buy prints. But my prints attract casual shoppers looking for wall decor. The information needs to be available without them having to look for it. If anyone could provide some code that would achieve this, it sounds like there may be several of us who would find it helpful.
.
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?
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
A couple of weeks ago I posted my CSS mods for the still-in-process version of Lightbox V2. See https://dgrin.com/discussion/comment/2097029#Comment_2097029. Now that we're live, let me post an update with my observations on the release version, a screenshot of what I have after updating my CSS, and a listing of new CSS. Feel free to use or adjust the CSS as desired.
First, my situation. My galleries tell stories, but not all in one picture. Each picture gets a caption of one, two, or three sentences. I don't use titles. They look great in the new lightbox but the inability to sort galleries by title is something of a show-stopper. That means captions are THE storyline carrier and need lots of emphasis. I'm enough of an enthusiast that keywords and camera information are interesting, but the definitely a notch down. And while my photos are primarily aimed at family and friends (and myself), I do get comments back from other site visitors from time to time. So I have to take into account an irregular sequence of visitors who may know nothing of SmugMug.
So, some observations on the new lightbox ... and some motivations for the changes I've introduced.
In any case here's a screen shot of my CSS-adjusted lightbox. Code will follow in a separate message.
...
And here's the code mentioned in my previous message. Feel free to copy or adapt as desired.
/* Reset Lightbox background color to be a bit darker than the theme dark color 2019-08-15*/ .sm-user-ui.sm-user-overlay-container .sm-modal-mask.sm-lightbox-v2-modal-mask[data-opacity="opaque"], .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-navbar, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar { background-color: #242526; } /* Narrow and darken the scroll bar in Firefox. Note this does not actually work so is here as a place-holder at the moment. Smugmug strips this browser-specific non-standard code. 2019-08-16.*/ .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar { scrollbar-width: thin; scrollbar-color: #444 #777; } /* In the left side navbar, de-emphasize buttons not selected, but highlight the selected one by making the icon pure white and by widening the marker on the side. This provides a bit more of a visual cue as to what's going on. It also adds a guide on how to close the information panel. 2019-08-16*/ .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-navbar .sm-lightbox-v2-primary-controls-list button.sm-button { color: #989ba2; } .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-navbar .sm-lightbox-v2-primary-controls-list button.sm-button[data-selected="true"] { color: white; } .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-primary-controls-list button.sm-button[data-selected="true"]::after { border-width: 0 0 0 6px; } /* Adjust the caption color and sizing to increase emphasis and visual focus to this section. 2019-05-29*/ .sm-user-ui .sm-lightbox-v2 .sm-image-metadata-caption { color: white; font-size: 18px; line-height:1.33em; } /* Adjust color on all secondary text in the information sidebar (all except the title, caption, and "show more") to a light gray. This de-emphasizes this section so as to emphasize the title and caption. 2019-08-15*/ .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar .sm-keywords a, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar p.sm-image-metadata-attribution, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar p.sm-image-metadata-attribution a, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar .sm-imageinfo-label, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar .sm-imageinfo-value, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar button, .sm-user-ui .sm-lightbox-v2 .sm-lightbox-v2-sidebar h5{ color: #989ba2; } /* Add extra space above keywords, again adding focus on caption. 2019-05-29*/ .sm-user-ui .sm-lightbox-v2 .sm-image-metadata-keywords { margin-top:48px; } /* Remove the unnecessary keywords label. 2019-05-29*/ .sm-user-ui .sm-lightbox-v2 .sm-image-metadata-keywords h5 { display:none; } /* Meke the Edit Photo Details button transparent, visually reducing it's impact. 2019-08-16*/ .sm-user-ui .sm-lightbox-v2-sidebar button[data-elem-id="imagemetadata_edit_button"] { background: transparent; } /* Tighten up the spacing on camera info entries in the information sidebar. This reduces the need for scrolling in many cases. Inserted 2019-07-04.*/ .sm-lightbox-v2-sidebar-content .sm-imageinfo-container .sm-imageinfo-label, .sm-lightbox-v2-sidebar-content .sm-imageinfo-container .sm-imageinfo-value { padding-bottom: 4px; } /* Many specific adjustments to the entries in the Camera Info data table. Note the basic metadata fields are Camera, Lens, ISO,Focal Length, Aperture, Exposure Time, Name, Size, File Size, Date Taken, Date Modified, and Copyright. The goal here is to produce a more compact camera info section which does not compete as much for visual attention with the more important title and caption. To that end, I've reduced line spacing, adjusted spacing and wording to avoid multi-line wrapped entries, and have removed a few entries that seem unnecessary. /* Remove three of the basic entries. 2019-08-16*/ .sm-lightbox-v2-sidebar-content tr[data-metadata="Size"] { display:none; } .sm-lightbox-v2-sidebar-content tr[data-metadata="File Size"] { display:none; } .sm-lightbox-v2-sidebar-content tr[data-metadata="Date Modified"] { display:none; } /* For those that remain, set width of the label to 0%. This shrinks the width of the label column to the length of longest word, rather than half the table width, leaving more space for the data. For the three two-word labels (Focal Lenth, Exposure Time, Date Taken), this would result in a word-wrap and uneven spacing. Replace these with one-word alternatives. Note that when SHOW MORE is active, there are entries without the 0% width so the table returns to 50% label, 50% data. That seems OK given the complexity of some of the labels there and that I plan to turn that option off except for my own use as site owner. 2019-08-16*/ .sm-lightbox-v2-sidebar-content tr[data-metadata="Camera"] .sm-imageinfo-label { width:0%; } .sm-lightbox-v2-sidebar-content tr[data-metadata="Lens"] .sm-imageinfo-label { width:0%; } .sm-lightbox-v2-sidebar-content tr[data-metadata="ISO"] .sm-imageinfo-label { width:0%; } .sm-lightbox-v2-sidebar-content tr[data-metadata="Focal Length"] .sm-imageinfo-label { font-size:0; width:0%; padding-bottom:0; } .sm-lightbox-v2-sidebar-content tr[data-metadata="Focal Length"] .sm-imageinfo-label:before { Content:"FL"; font-size:12px; } .sm-lightbox-v2-sidebar-content tr[data-metadata="Focal Length"] .sm-imageinfo-label { width:0%; } .sm-lightbox-v2-sidebar-content tr[data-metadata="Aperture"] .sm-imageinfo-label { width:0%; } .sm-lightbox-v2-sidebar-content tr[data-metadata="Exposure Time"] .sm-imageinfo-label { font-size:0; width:0%; padding-bottom:0; } .sm-lightbox-v2-sidebar-content tr[data-metadata="Exposure Time"] .sm-imageinfo-label:before { Content:"Shutter"; font-size:12px; } .sm-lightbox-v2-sidebar-content tr[data-metadata="Name"] .sm-imageinfo-label { width:0%; } .sm-lightbox-v2-sidebar-content tr[data-metadata="Date Taken"] .sm-imageinfo-label { font-size:0; width:0%; padding-bottom:0; } .sm-lightbox-v2-sidebar-content tr[data-metadata="Date Taken"] .sm-imageinfo-label:before { Content:"Taken"; font-size:12px; } .sm-lightbox-v2-sidebar-content tr[data-metadata="Copyright"] .sm-imageinfo-label { width:0%; } /* Remove the SHOW MORE [camera info] button. Restore when logged in as owner. It's too much information and too much clutter for general browsers, but I occaisionally like to check some of it as the owner. Thanks to Allen from Dgrin for correcting my earlier code here. 2019-05-29*/ .sm-user-ui .sm-lightbox-v2 .sm-imageinfo-advanced-btn { display:none; } .sm-user-loggedin.sm-user-owner .sm-lightbox-v2 .sm-imageinfo-advanced-btn { display:inline-flex; } /* Update font for overlay title in lightbox to be the same font as the VIEW PHOTO DETAILS message when there is no title. This is mostly moot at the moment given I use titles only in one very-out-of-the way test gallery now, but I may use them more in the future. 2019-05-29. */ .sm-user-ui .sm-lightbox-v2-photo-buttons h2{ font-size: 16px; font-weight: 400; }It’s on the list for things to improve in the next few weeks but as you can imagine we were trying to finish up the last things that were outstanding to get this fully live and we had determined this shouldn’t be a blocker to getting this out to everyone. Getting the map back into the Camera Info section, for example, is coming in the next few days. The Firefox update will be Coming soon!
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.
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.
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.
I’ll pass along to the engineering team
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations