... For consistent presentation, it would also be nice to be able to select Cover Images for pages of folders too, not just pages of galleries. Is that planned, I wonder?
Yep - but we wanted to make sure you all like the design of the Cover Image on Galleries before we pushed it everywhere on your site. It's much easier for you to tweak your site and get used to it in pieces, then dropping huge changes in multiple places all at once
I'm looking forward to this as well. If cover images are coming for folders, though, I really think you need to re-implement folder descriptions. The natural approach today, which I and presumably others use when some sort of discussion is needed, is to insert a text (or HTML) box between the breadcrumb and the navigation content box(es). Having to stick a text box between a cover image and the images in the nav box could definitely break up the visual flow.
Thanks for the new capabilities. What I think is yet needed is a little more control over the cover image
1. Be able to select the reference point and position.
2. Be able to select a cover image from outside the gallery.
I also though the scrim behind the description wasn’t strong enough ...
I've now inserted cover images into several more galleries and have some updated thoughts on these three issues.
1. Be able to select the reference point and position. For the most part having a setting that, under the covers, adjusts the vertical parameter on the CSS background-position property, looks to be enough. The current SM CSS looks like this
.sm-gallery-cover[data-show-image="true"][data-image-orientation="landscape"]
.sm-gallery-cover-image {background-position: center center;}
Simply having a SM control that let me do something like this
.sm-gallery-cover[data-show-image="true"][data-image-orientation="landscape"]
.sm-gallery-cover-image {background-position: center [B][COLOR=Wheat]60%[/COLOR][/B];}
would address almost all positioning issues. This of course, can be done in custom CSS, but having a SM control would be a lot easier to manage. In a few cases does it appear I would want more. The answer there would be to work with a cropped image, which leads to ...
2. Be able to select a cover image from outside the gallery. No new thoughts. This is needed for all the same reasons as I mentioned earlier: cropping, inserting one cover images across multiple galleries, and maintaining interface consistency.
3. Darker scrim. I definitely think a darker scrim helps. I kept the adjustment to the background linear gradient opacity that I had before (.75, up from .50) and I now start it 48px above the title text, up from 24px. The first darkens the scrim overall. The second makes it darker yet under the title. I may yet make adjust one or the other to have more darkening. Here the CSS I'm using at the moment.
Before I enhanced the scrim, I found it rather hard to find workable cover images. You have to find one that's pretty dark in the right places. With this, I can usually find at least one, even in small galleries, that works acceptably (if not optimally) even without vertical re-positioning. SM may want to explore revising their default scrim parameters.
I've now inserted cover images into several more galleries and have some updated thoughts on these three issues.
1. Be able to select the reference point and position.
2. Be able to select a cover image from outside the gallery.
3. Darker scrim
All excellent thoughts Jtring. #1 we'll be adding and is something I wanted to include originally but didn't want to hold the feature for several more months. We're getting valuable feedback (like #2 and #3) that we wouldn't have gotten had we not shipped this first version. As we go to add reposition, we can also incorporate the other things we learn.
#2 is something that we spent a lot of time thinking about and working through. Ultimately the decision to restrict the Cover Image to the current gallery was made due to the fact that different galleries can have different privacy settings. It can get very confusing to customers to have to deal with all of the different visibility and access settings that a different gallery could have. Do we let you set a Cover Image if it's from a Private gallery, knowing that none of your visitors could see the photo? Do we let you set one on a Password Protected Gallery or a Privately Shared one? Do we restrict you from seeing those galleries in the Picker, potentially confusing you on why those galleries don't show up? Rather than come up with a lot of complicated and potentially confusing warning messages, we decided to keep it simple. If we see a large # of requests for this, and people understand the confusion that comes with it, I'm more than happy to open it up.
#3 I'll discuss with the design team, though I know they spent some time and thought determining the optimal scrim settings.
#2 is something that we spent a lot of time thinking about and working through. Ultimately the decision to restrict the Cover Image to the current gallery was made due to the fact that different galleries can have different privacy settings. It can get very confusing to customers to have to deal with all of the different visibility and access settings that a different gallery could have. Do we let you set a Cover Image if it's from a Private gallery, knowing that none of your visitors could see the photo? Do we let you set one on a Password Protected Gallery or a Privately Shared one? Do we restrict you from seeing those galleries in the Picker, potentially confusing you on why those galleries don't show up? Rather than come up with a lot of complicated and potentially confusing warning messages, we decided to keep it simple. If we see a large # of requests for this, and people understand the confusion that comes with it, I'm more than happy to open it up.
Why treat the cover image differently from the feature image? The feature image can come from other folders. For feature images, you've already identified an acceptable set of answers to the questions you raised. For example, you don't show private galleries in the selection. If I select a hidden image in a public or unlisted gallery -- I've done it -- it won't show in a nav box to anyone except the logged in user, but there's no warning message. I've just got to be aware. That would seem to be the precedent. Having a different set of rules for selecting feature and cover images, selections that sit on tabs within the very same Gallery Settings pop-up, would seem to offer the bigger confusion and the bigger complication. From at least this user's perspective, two different sets of rules is definitely not "keeping it simple".
Why treat the cover image differently from the feature image? The feature image can come from other folders. For feature images, you've already identified an acceptable set of answers to the questions you raised. For example, you don't show private galleries in the selection. If I select a hidden image in a public or unlisted gallery -- I've done it -- it won't show in a nav box to anyone except the logged in user, but there's no warning message. I've just got to be aware. That would seem to be the precedent. Having a different set of rules for selecting feature and cover images, selections that sit on tabs within the very same Gallery Settings pop-up, would seem to offer the bigger confusion and the bigger complication. From at least this user's perspective, two different sets of rules is definitely not "keeping it simple".
Excellent question / point and something we discussed as well. Just because it was done one way, originally, doesn't mean that way is the right way to do it and how everything should be done going forward. The decision to allow Feature Image to work that way has been a nightmare for our customers and something we feel support questions on very often. We tried to get away from needing a "Visitor View" when we launched New SmugMug and this is one of those areas that failed. Showing one thing to the owner and another to the visitor is confusing for everyone and can lead to some nasty misunderstandings that upset everyone. Most likely we'll end up changing the behavior of Feature Image to work the same as Cover Image but I wanted to get feedback like this before I pulled the trigger.
Excellent question / point and something we discussed as well. Just because it was done one way, originally, doesn't mean that way is the right way to do it and how everything should be done going forward. The decision to allow Feature Image to work that way has been a nightmare for our customers and something we feel support questions on very often. We tried to get away from needing a "Visitor View" when we launched New SmugMug and this is one of those areas that failed. Showing one thing to the owner and another to the visitor is confusing for everyone and can lead to some nasty misunderstandings that upset everyone. Most likely we'll end up changing the behavior of Feature Image to work the same as Cover Image but I wanted to get feedback like this before I pulled the trigger.
Thank you for sharing the thinking behind the design. I see the need for a "clean" selection process. I’d be perfectly happy with a process that only allows selection of pictures that display to everyone (or, maybe for password protected galleries, everyone with a password ... and a lock icon otherwise). But no allowance for going outside the node in question strikes me as way too restrictive.
You can’t avoid going outside the node in some cases. Pages and folders that contain only pages don’t have any images inside. You will always have to maintain and support a mechanism to select a feature image from elsewhere for these. (And, when folders have cover images, a mechanism for pulling in cover image from elsewhere.)
I obviously value consistent interfaces. So whatever solution works for pages and folders without galleries would seem to be a useful model to propagate. Some shared code. One interface for the user.
I stand by my original point: pulling in a different crop (different from that of the original in a gallery) is very useful when dealing with feature or cover images whose aspect ratio may be different from that original. For cover images, a crop that removes something overly-bright or -contrasted could turn an unusable image into a great cover image source too.
There have been comments at times here on Dgrin about using images outside a gallery as the gallery feature image. I, in fact, learned how to do so from Allen in this thread. Plan on more than a tiny bit of push-back if you cut that one off.
Excellent question / point and something we discussed as well. Just because it was done one way, originally, doesn't mean that way is the right way to do it and how everything should be done going forward. The decision to allow Feature Image to work that way has been a nightmare for our customers and something we feel support questions on very often. We tried to get away from needing a "Visitor View" when we launched New SmugMug and this is one of those areas that failed. Showing one thing to the owner and another to the visitor is confusing for everyone and can lead to some nasty misunderstandings that upset everyone. Most likely we'll end up changing the behavior of Feature Image to work the same as Cover Image but I wanted to get feedback like this before I pulled the trigger.
Removing functionality doesn't seem like the right way to cut down on support tickets. It's useful to be able to pick a featured image from a different gallery... smugmug recognized that when they created the feature and nothing has changed. Same is obviously true for cover photos, especially until they can be placed as desired.
The simple solution is the hard solution... make it easy to understand. Provide warnings or just disallow feature/cover images coming from external private/password protected galleries. Getting rid of the functionality is the lazy way. I'm sure a lot of users are disappointed at smugmug's direction of dumbing down useful features since newsmug was introduced. Also, I understand you guys don't want to wait longer than needed to release a new feature, but it's just one of many half-finished features that's been released. Still waiting for the promised improvements to packages, coupons, and on and on and on. I guess I'm not so excited about cover photos since all my galleries are smugmug style. All this change meant was fixing new bugs.
Also, if you do go ahead and make it so we can't pick a featured image from a different gallery, please at least fix the bug that prevents a video thumbnail from being a featured image. Otherwise any gallery that only has videos won't be able to have a featured photo.
Read through this thread, but nothing seems to be working. Please help!
Hi Everyone,
Count me in with the group of people who wish this was an opt-in thing. I've been using CSS suggested here and from a couple of other threads to try to do the following:
1) Eliminate the 2nd title that automatically shows up because of the new cover image thing. At this time I don't plan on using a cover image, and would prefer to keep things the way I already had them set up.
2) If I can't eliminate it, I'd at least like to reduce the size of the font.
3) I want to eliminate the buy button and slideshow button globally, without having to do it for each individual gallery (ideally, even when I'm logged in, but I'd settle for them disappearing completely publicly). It appears that the buy button is gone from the public view, which is good, but the slideshow button still shows everywhere that I haven't disabled it within an individual gallery.
4) I also want to get rid of the "back to top" button entirely (I know that's not part of this thread, but I thought I'd put it in here rather than create a separate post-but I can't if it would be better).
Here is the CSS I have added.
/* Remove title, slideshow button, and buy button that was added by cover photo option. Added 2016-06-10 */
1) Eliminate the 2nd title that automatically shows up because of the new cover image thing. At this time I don't plan on using a cover image, and would prefer to keep things the way I already had them set up.
2) If I can't eliminate it, I'd at least like to reduce the size of the font.
I would recommend removing the Title content block from your site and using the CSS code listed above to shrink the text site.
3) I want to eliminate the buy button and slideshow button globally, without having to do it for each individual gallery (ideally, even when I'm logged in, but I'd settle for them disappearing completely publicly). It appears that the buy button is gone from the public view, which is good, but the slideshow button still shows everywhere that I haven't disabled it within an individual gallery.
I don't recommend using CSS to do this. Last month we released new tools in the Organizer that will let you change your settings, globally across your entire site. In the Organizer, just click on your root (it's the very top, typically your name), and then click "Settings" and choose "All Galleries Within Folder", then turn off the shopping cart and the slideshow.
I tried Gallery Cover Image, but decided not to use it for now, because it results in too many chopped off heads. I think it won't work for me, unless there is the means to manually position the image.
I read the original post, but still can't figure out to stop my gallery titles from appearing twice.
You can’t avoid going outside the node in some cases. Pages and folders that contain only pages don’t have any images inside. You will always have to maintain and support a mechanism to select a feature image from elsewhere for these. (And, when folders have cover images, a mechanism for pulling in cover image from elsewhere.)
That's a very good point. I'll have to ponder what to do in these cases.
I obviously value consistent interfaces. So whatever solution works for pages and folders without galleries would seem to be a useful model to propagate. Some shared code. One interface for the user.
I stand by my original point: pulling in a different crop (different from that of the original in a gallery) is very useful when dealing with feature or cover images whose aspect ratio may be different from that original.
There have been comments at times here on Dgrin about using images outside a gallery as the gallery feature image. I, in fact, learned how to do so from Allen in this thread. Plan on more than a tiny bit of push-back if you cut that one off.
It seems to me, aside from the case you identified above where there are no photos in a folder or page, the main reason why you use a Feature Image from a different gallery is for the case here, where the different aspect ratio doesn't center properly and you create a special feature image. You've created a workaround for a different problem and I'd much rather fix the root of the problem (that you can't position the Feature Image) than continue to allow a less optimal workaround that complicates things.
I don't plan on changing anything until we have a solution in place and I'd imagine Feature Image reposition would cover most peoples push-back.
I don't plan on changing anything until we have a solution in place and I'd imagine Feature Image reposition would cover most peoples push-back.
I would enthusiastically support your planned change to restrict the selection of a gallery's Feature Image to its own gallery IF I could fully control its crop as I'm selecting it -- i.e., choose aspect ratio and interactively "pull in" the framing, in addition to repositioning. That crop would only be applied to the Feature Image; the source image in the gallery would remain unchanged. It would also be a nice addition if somehow the selected image could be flagged, in owner view only.
Currently, I have set up a separate gallery to hold all my Feature Images, specially square-cropped (externally) to both illustrate each folder & gallery and conserve space for their titles. I don't want those versions to appear in the represented galleries.
Thanks again for the opportunity to offer feedback in advance of the change.
It seems to me, aside from the case you identified above where there are no photos in a folder or page, the main reason why you use a Feature Image from a different gallery is for the case here, where the different aspect ratio doesn't center properly and you create a special feature image. You've created a workaround for a different problem and I'd much rather fix the root of the problem (that you can't position the Feature Image) than continue to allow a less optimal workaround that complicates things.
I don't plan on changing anything until we have a solution in place and I'd imagine Feature Image reposition would cover most peoples push-back.
A discussion of root issues and how they connect to the fixes is always helpful. Behind my comments is a sense I'm having trouble juggling three core issues:
Only some pictures work well as cover images. Most don't. Judicious repositioning/cropping and aggressive scrim darkening helps. Those fixes move or darken the bright or high-contrast areas that damage title and description readability. They can't do much for images that are poorly composed for long narrow aspect ratio display or are just too busy for the cover image role. The fixes expand the space of workable pictures but sometimes no more: results are often only workable, not great.
.
I'd like a consistent look on my site. When I move to cover images, I'd like all galleries to have them. The easy out of just not putting up an image for galleries here and there that can't generate a flattering cover image source is not very attractive to me. That "hobgoblin of a small mind, beloved of poets, philosophers, and divines" is at work no doubt.
.
Some galleries are small. Here's where it all comes together: few-image galleries where the choice is too limited. In the test cases I've worked so far, I've had one 6-image gallery that generated a wonderful cover image (here) and one 6-image gallery where the best strikes me as marginal (here). Everything in that last gallery is more there for intellectual/documentary interest, not aesthetic interest, and that's not helpful for finding a nice cover image. The image in the latter gallery has some custom CSS to re-position. (My dozen public test cases with cover images are the ones here.)
So something has to give: accept weak cover images, accept the inconsistency of mixing galleries with and without images, or accept cover images from outside the gallery (perhaps a folder-level default to fall back on).
That's really where I'm coming from in all this. Of course, I can make do with selection only within a gallery provided I can re-position freely. And even with today's design, I can do it in custom CSS, although it would be a bear to manage across a whole site full of galleries. But since we are in an open comment phase, I'm taking the opportunity to lobby for what, to me, seems a better, more flexible, addition.
I see one more large potential mess with the restriction of cover photos to be taken only from that gallery: if you have a gallery that only contains portrait formatted photographs none will ever fit really well for a cover photo (not sure if panoramas will as I would like them to, but that gallery is not up yet anyway...). So most people, I assume, would prefer in this case to choose a photo from a different gallery and ... cannot. I bet eventually this will lead to as many support tickets (if not more) than what you get for people not understanding that photos from private galleries don't make perfect photos for gallery-previews accessible by everybody.
So please do not restrict the selection of cover photos to the gallery (folder) they are representing!
You've already destroyed ~1024 of my galleries, now you also want to do the folder images?
We wouldn't go an unset feature images that were already set; we'd just restrict future images from being set outside the location.
I'm still waiting for you to reach out so we can fix it. I'm more than happy to help but I'd need more information than "you destroyed my galleries." I still see all of your galleries there, with photos in them, with all of the photos visible, all of the share features available; everything you'd normally be able to do on a gallery appears to be working.
For example, you could move your 'Click to see map' section back to the center with this CSS:
... we'd just restrict future images from being set outside the location....
You mean like it use to be years ago? We got around that by setting a photo to "feature" then moving
it out to another gallery. It was just much more work for everyone.
Feature images for folders require browsing to find one. Why have a different method for galleries? That
would really confuse many.
...
I'm still waiting for you to reach out so we can fix it. I'm more than happy to help but I'd need more information than "you destroyed my galleries." I still see all of your galleries there, with photos in them, with all of the photos visible, all of the share features available; everything you'd normally be able to do on a gallery appears to be working.
For example, you could move your 'Click to see map' section back to the center with this CSS:
Major problem is narrowing browser down to phone width. Everything piles up.
See post #106 for screen shot. Currently have center stuff, map and nav, hidden below 1100px.
Top box above is a "new" html widget, trying to get it to work but same problem. But even removing
description and using a new html widget would be useless because of the gallery title and buy
button placement.
Something in the html is screwed and flex boxes not working. Have spent many hours on this.
Edit: need to add that this description has been used for many years, tweaked a couple times. And it would take a few
months of constant work to edit all ~1045 galleries. But would consider using new html that works.
Current html (shortened) in top widget.
<div class="xmyFlexbox" style="xmax-width: 100%; xmargin: 0 auto 10px;">
<div class="box1 birdGalDesc" style="xfont-size: 11pt; min-width: 480px;">
Eleven Western ... not see a nest.
</div>
<div class="box2 centerArea" style="xmax-width: 160px; xtext-align:center; xmargin-top: 0px;">
<span class="mapButton">
<a href="http://maps.smugmug.com/?feedType=geoAlbum&Data=59897516_JGnxB5" target="_blank">Click to see Map</a>
</span>
<br><br>
<span style="font-size: 8pt; color:yellow">< <a href="/Birds/2016-Birding/Birding-2016-May/2016-05-22-25-Tower-Grove-Park"><u>Previous</u></a> | gallery | <a href="/Birds/2016-Birding/Birding-2016-June/2016-06-Coming-Soon"><u>Next</u></a> >
</span>
</div>
<div class="box3 birdjump" style="xwidth: 480px ; xtext-align:center;">
<span style="color:yellow; font-size: 10pt;">Jump to >>
<a class="nav" href="/Birds/2015-Birding/Birding-2015-December">Dec 2015</a> •
...
<a class="nav" href="/Birds/2016-Birding/Birding-2016-December">Dec 2016</a> •
<a class="nav" href="/Birds/2017-Birding/Birding-2017-January">Jan 2017</a>
</span><br>
<span class="clickMain">Click on large photo below for full screen</span>
</div>
</div> <!----- end myFlexbox ------->
<div style="clear: both;"></div>
Current html in gallery description.
<div class="birdGalDesc" style="font-size: 11pt; width: 480px;">
Eleven Western ... not see a nest.
</div>
<div class="birdjump" style="max-width: 480px ; text-align:center;">
<span style="color:blue; font-size: 10pt;">Jump to >>
<a class="nav" href="/Birds/2015-Birding/Birding-2015-December">Dec 2015</a> •
<a class="nav" href="/Birds/2016-Birding/Birding-2016-January">Jan 2016</a> •
...
<a class="nav" href="/Birds/2016-Birding/Birding-2016-December">Dec 2016</a> •
<a class="nav" href="/Birds/2017-Birding/Birding-2017-January">Jan 2017</a>
<br></span>
<span style="color:blue; font-size:13pt;"><b>Click on main photo below for larger version</b></span>
</div>
<center>
<span class="mapButton">
<a href="http://maps.smugmug.com/?feedType=geoAlbum&Data=59897516_JGnxB5" target="_blank">Click to see Map</a>
</span>
<br><br>
<span style="font-size: 8pt; color:yellow"> < <a href="/Birds/2016-Birding/Birding-2016-May/2016-05-22-25-Tower-Grove-Park">
<u>Previous</u></a> | gallery | <a href="/Birds/2016-Birding/Birding-2016-June/2016-06-Coming-Soon"><u>Next</u></a> > </span>
</center>
<div style="clear: both;"></div>
I'd like to find a solution for ya that doesn't involve you having to edit a single gallery -- hopefully just some additional CSS can do the trick. Do you have an example gallery or two that's currently broken that I can test with?
I'd like to find a solution for ya that doesn't involve you having to edit a single gallery -- hopefully just some additional CSS can do the trick. Do you have an example gallery or two that's currently broken that I can test with?
The top html box on that unlisted is using the html straight from the gallery. This is the same
everywhere. Only difference is the map/nav part there or not.
I think I need to remove all the CSS I've added/changed first, might be simpler to just focus on "all galleries". Back later.
Edit: Any bird gallery, example: http://www.photosbyat.com/Birds/2016-Birding/Birding-2016-May/2016-05-30-WEKI
I removed CSS and html widgets leaving only the gallery description and its CSS.
Seems to flow down narrowing browser to phone size okay. Hid a few items at 840px.
But in the left box the text does not flow and right side is cut off on phone, see screen shot.
Jump to; box flows correctly. Both boxes have a max-width set in CSS.
Looks like this is a bug? Rotate phone to landscape and "jump to" size gets larger. Rotate back to portrait and
it stays that larger size. Screen shot left to right. iPhone 6S
All the text enlarges on this page rotating phone. http://www.photosbyat.com/Birds/2016-Birding/Birding-2016-February/2016-02-20-Kaskaskia-Island Ha, but the left box text flows? Have to check that.
Edit: checked that. In the description html it has in style a max-width vs width. Although "all galleries" CSS has max-width
!important somehow it has to be in this style also for text to flow, won't override.
@leftquark was so nice to provide us with text for the Slideshow and Download cover button.
I have only implemented the Slideshow and Buy button in the cover design and found that for some galleries the button now was overlapping the gallery description, slightly inconvenient.
The best solution that I have been able to come up with so far was to:
1. Change the Buy-button text after @leftquarks suggestion with this CSS
/* Hide the "Buy Photos" text */
.sm-gallery-cover-buy-button span:nth-of-type(2) {
display: none;
}
/* Change the "Buy Photo" button text */
.sm-gallery-cover-buy-button:after {
content: ' Buy'; /*Shorter text than the original*/
font-family: Roboto Condensed,Roboto, Helvetica, Arial, sans-serif;
margin-left: 10px;
font-size: 13px;
}
2. change the Slideshow text to a smaller font-size like this:
/* Add the word "Slideshow" to the slideshow button in the Gallery Header */
.sm-gallery-cover-slideshow-button:after {
content: ' Slideshow';
margin-left: 5px;
font-size: 13px;
}
I suspect that if you activate all three buttons and add text to all three of them, you might run into the same problem again, but I don't have a solution for that one except for using even smaller fonts and by doing so the entire point of having buttons with descriptive text is lost (unless you expect your website visitors to wear microscopes anyway...)
PS: this was not affected by my else customized gallery-descriptions as it did not work properly for a gallery where I had removed those customizations (read: additional divs) - this gallery was the one (before my enhanced customizations) that tried to get me out of my mind: http://www.lilleulven.com/Photos/Macro/Animals/ It didn't succeed
Thanks, I've added the code for shrinking the title text and I can see it change size when I'm in the customizer under content & design, but when I exit that the title text stays big.
I would recommend removing the Title content block from your site and using the CSS code listed above to shrink the text site.
I don't recommend using CSS to do this. Last month we released new tools in the Organizer that will let you change your settings, globally across your entire site. In the Organizer, just click on your root (it's the very top, typically your name), and then click "Settings" and choose "All Galleries Within Folder", then turn off the shopping cart and the slideshow.
In addition, I just realized that hiding the slideshow in the bulk settings in organizer also hides the button within the lightbox. I'd REALLY like to keep the slideshow button in the lightbox but hide it at the top of the gallery. Thanks.
If you now would add a link to your website into your dgrin signature, it could become incredibly easy to help you
Id you want one of the slideshow buttons but not the other, you will have to hide the gallery one with CSS as well.
Removing the slideshow button from the gallery cover is described in this thread on page 5 (Add a CSS box on either "All Galleries" level or if you have customized galleries on "This Gallery only" level - "Entire website" might work as well):
For the cover-title it looks like you found the correct code, so maybe you just added it to the wrong level CSS box? But I cannot figure it out without a link to your website. (Should be on as the one above - And don't use CSS boxes that come with HTML blocks, they are most likely even further restricted than the "Just this..." CSS boxes)
If you now would add a link to your website into your dgrin signature, it could become incredibly easy to help you
Id you want one of the slideshow buttons but not the other, you will have to hide the gallery one with CSS as well.
Removing the slideshow button from the gallery cover is described in this thread on page 5 (Add a CSS box on either "All Galleries" level or if you have customized galleries on "This Gallery only" level - "Entire website" might work as well):
For the cover-title it looks like you found the correct code, so maybe you just added it to the wrong level CSS box? But I cannot figure it out without a link to your website. (Should be on as the one above - And don't use CSS boxes that come with HTML blocks, they are most likely even further restricted than the "Just this..." CSS boxes)
Okay, I added the code you suggested, Lille, and checked that my CSS is under "all galleries" and doesn't come with an HTML block attached. So far I still see the cover photo slideshow button and the title is still bigger than I'd like. Any idea what I can do to fix this? Thanks!
Comments
I'm looking forward to this as well. If cover images are coming for folders, though, I really think you need to re-implement folder descriptions. The natural approach today, which I and presumably others use when some sort of discussion is needed, is to insert a text (or HTML) box between the breadcrumb and the navigation content box(es). Having to stick a text box between a cover image and the images in the nav box could definitely break up the visual flow.
The Slideshow button is now back on mobile -- we had dropped it during the update and it's now back.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
I've now inserted cover images into several more galleries and have some updated thoughts on these three issues.
1. Be able to select the reference point and position. For the most part having a setting that, under the covers, adjusts the vertical parameter on the CSS background-position property, looks to be enough. The current SM CSS looks like this
.sm-gallery-cover[data-show-image="true"][data-image-orientation="landscape"] .sm-gallery-cover-image {background-position: center center;}.sm-gallery-cover[data-show-image="true"][data-image-orientation="landscape"] .sm-gallery-cover-image {background-position: center [B][COLOR=Wheat]60%[/COLOR][/B];}2. Be able to select a cover image from outside the gallery. No new thoughts. This is needed for all the same reasons as I mentioned earlier: cropping, inserting one cover images across multiple galleries, and maintaining interface consistency.
3. Darker scrim. I definitely think a darker scrim helps. I kept the adjustment to the background linear gradient opacity that I had before (.75, up from .50) and I now start it 48px above the title text, up from 24px. The first darkens the scrim overall. The second makes it darker yet under the title. I may yet make adjust one or the other to have more darkening. Here the CSS I'm using at the moment.
.sm-user-ui .sm-gallery-cover[data-show-image="true"] .sm-gallery-cover-info { background: no-repeat linear-gradient(to top,rgba(0,0,0,[COLOR="Wheat"][B].75[/B][/COLOR]),rgba(0,0,0,0) 100%); padding-top: [COLOR="Wheat"][B]48[/B][/COLOR]px; }All excellent thoughts Jtring. #1 we'll be adding and is something I wanted to include originally but didn't want to hold the feature for several more months. We're getting valuable feedback (like #2 and #3) that we wouldn't have gotten had we not shipped this first version. As we go to add reposition, we can also incorporate the other things we learn.
#2 is something that we spent a lot of time thinking about and working through. Ultimately the decision to restrict the Cover Image to the current gallery was made due to the fact that different galleries can have different privacy settings. It can get very confusing to customers to have to deal with all of the different visibility and access settings that a different gallery could have. Do we let you set a Cover Image if it's from a Private gallery, knowing that none of your visitors could see the photo? Do we let you set one on a Password Protected Gallery or a Privately Shared one? Do we restrict you from seeing those galleries in the Picker, potentially confusing you on why those galleries don't show up? Rather than come up with a lot of complicated and potentially confusing warning messages, we decided to keep it simple. If we see a large # of requests for this, and people understand the confusion that comes with it, I'm more than happy to open it up.
#3 I'll discuss with the design team, though I know they spent some time and thought determining the optimal scrim settings.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Why treat the cover image differently from the feature image? The feature image can come from other folders. For feature images, you've already identified an acceptable set of answers to the questions you raised. For example, you don't show private galleries in the selection. If I select a hidden image in a public or unlisted gallery -- I've done it -- it won't show in a nav box to anyone except the logged in user, but there's no warning message. I've just got to be aware. That would seem to be the precedent. Having a different set of rules for selecting feature and cover images, selections that sit on tabs within the very same Gallery Settings pop-up, would seem to offer the bigger confusion and the bigger complication. From at least this user's perspective, two different sets of rules is definitely not "keeping it simple".
Excellent question / point and something we discussed as well. Just because it was done one way, originally, doesn't mean that way is the right way to do it and how everything should be done going forward. The decision to allow Feature Image to work that way has been a nightmare for our customers and something we feel support questions on very often. We tried to get away from needing a "Visitor View" when we launched New SmugMug and this is one of those areas that failed. Showing one thing to the owner and another to the visitor is confusing for everyone and can lead to some nasty misunderstandings that upset everyone. Most likely we'll end up changing the behavior of Feature Image to work the same as Cover Image but I wanted to get feedback like this before I pulled the trigger.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Thank you for sharing the thinking behind the design. I see the need for a "clean" selection process. I’d be perfectly happy with a process that only allows selection of pictures that display to everyone (or, maybe for password protected galleries, everyone with a password ... and a lock icon otherwise). But no allowance for going outside the node in question strikes me as way too restrictive.
You can’t avoid going outside the node in some cases. Pages and folders that contain only pages don’t have any images inside. You will always have to maintain and support a mechanism to select a feature image from elsewhere for these. (And, when folders have cover images, a mechanism for pulling in cover image from elsewhere.)
I obviously value consistent interfaces. So whatever solution works for pages and folders without galleries would seem to be a useful model to propagate. Some shared code. One interface for the user.
I stand by my original point: pulling in a different crop (different from that of the original in a gallery) is very useful when dealing with feature or cover images whose aspect ratio may be different from that original. For cover images, a crop that removes something overly-bright or -contrasted could turn an unusable image into a great cover image source too.
There have been comments at times here on Dgrin about using images outside a gallery as the gallery feature image. I, in fact, learned how to do so from Allen in this thread. Plan on more than a tiny bit of push-back if you cut that one off.
Removing functionality doesn't seem like the right way to cut down on support tickets. It's useful to be able to pick a featured image from a different gallery... smugmug recognized that when they created the feature and nothing has changed. Same is obviously true for cover photos, especially until they can be placed as desired.
The simple solution is the hard solution... make it easy to understand. Provide warnings or just disallow feature/cover images coming from external private/password protected galleries. Getting rid of the functionality is the lazy way. I'm sure a lot of users are disappointed at smugmug's direction of dumbing down useful features since newsmug was introduced. Also, I understand you guys don't want to wait longer than needed to release a new feature, but it's just one of many half-finished features that's been released. Still waiting for the promised improvements to packages, coupons, and on and on and on. I guess I'm not so excited about cover photos since all my galleries are smugmug style. All this change meant was fixing new bugs.
Also, if you do go ahead and make it so we can't pick a featured image from a different gallery, please at least fix the bug that prevents a video thumbnail from being a featured image. Otherwise any gallery that only has videos won't be able to have a featured photo.
Dave
Hi Everyone,
Count me in with the group of people who wish this was an opt-in thing. I've been using CSS suggested here and from a couple of other threads to try to do the following:
1) Eliminate the 2nd title that automatically shows up because of the new cover image thing. At this time I don't plan on using a cover image, and would prefer to keep things the way I already had them set up.
2) If I can't eliminate it, I'd at least like to reduce the size of the font.
3) I want to eliminate the buy button and slideshow button globally, without having to do it for each individual gallery (ideally, even when I'm logged in, but I'd settle for them disappearing completely publicly). It appears that the buy button is gone from the public view, which is good, but the slideshow button still shows everywhere that I haven't disabled it within an individual gallery.
4) I also want to get rid of the "back to top" button entirely (I know that's not part of this thread, but I thought I'd put it in here rather than create a separate post-but I can't if it would be better).
Here is the CSS I have added.
/* Remove title, slideshow button, and buy button that was added by cover photo option. Added 2016-06-10 */
.sm-gallery-cover-title {
display: none !important;
}
.sm-gallery-cover-slideshow-button,
.sm-gallery-cover-buy-button {
display: none !important;
}
/* Hide smug back to top button */
.sm-button.sm-button-size-small.sm-button-skin-submit.sm-page-scroll-to-top {
display: none;
}
/* Hide the Cover Gallery Title */
.sm-gallery-cover-title {
display: none !important;
}
/* Hide the Owner Buy button */
.sm-button.sm-button-size-large.sm-button-skin-accent.sm-gallery-cover-buy-button {
display: none;
}
/* Change the font size of the Gallery Title */
.sm-gallery-cover-title {
font-size: 14px !important;
}
If someone can help me figure out what I've done wrong (I'm a beginner), I'd appreciate it. Thanks in advance for your help.
-Rob
Thanks!
I would recommend removing the Title content block from your site and using the CSS code listed above to shrink the text site.
I don't recommend using CSS to do this. Last month we released new tools in the Organizer that will let you change your settings, globally across your entire site. In the Organizer, just click on your root (it's the very top, typically your name), and then click "Settings" and choose "All Galleries Within Folder", then turn off the shopping cart and the slideshow.
For more information visit: http://help.smugmug.com/customer/en/portal/articles/1240194-how-do-i-change-settings-for-multiple-galleries-at-once-?b_id=1644
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
I read the original post, but still can't figure out to stop my gallery titles from appearing twice.
I obviously value consistent interfaces. So whatever solution works for pages and folders without galleries would seem to be a useful model to propagate. Some shared code. One interface for the user.
It seems to me, aside from the case you identified above where there are no photos in a folder or page, the main reason why you use a Feature Image from a different gallery is for the case here, where the different aspect ratio doesn't center properly and you create a special feature image. You've created a workaround for a different problem and I'd much rather fix the root of the problem (that you can't position the Feature Image) than continue to allow a less optimal workaround that complicates things.
I don't plan on changing anything until we have a solution in place and I'd imagine Feature Image reposition would cover most peoples push-back.
Just go into the Customizer, under 'All Galleries' and remove the "Title Content Block".
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
I would enthusiastically support your planned change to restrict the selection of a gallery's Feature Image to its own gallery IF I could fully control its crop as I'm selecting it -- i.e., choose aspect ratio and interactively "pull in" the framing, in addition to repositioning. That crop would only be applied to the Feature Image; the source image in the gallery would remain unchanged. It would also be a nice addition if somehow the selected image could be flagged, in owner view only.
Currently, I have set up a separate gallery to hold all my Feature Images, specially square-cropped (externally) to both illustrate each folder & gallery and conserve space for their titles. I don't want those versions to appear in the represented galleries.
Thanks again for the opportunity to offer feedback in advance of the change.
A discussion of root issues and how they connect to the fixes is always helpful. Behind my comments is a sense I'm having trouble juggling three core issues:
- Only some pictures work well as cover images. Most don't. Judicious repositioning/cropping and aggressive scrim darkening helps. Those fixes move or darken the bright or high-contrast areas that damage title and description readability. They can't do much for images that are poorly composed for long narrow aspect ratio display or are just too busy for the cover image role. The fixes expand the space of workable pictures but sometimes no more: results are often only workable, not great.
- I'd like a consistent look on my site. When I move to cover images, I'd like all galleries to have them. The easy out of just not putting up an image for galleries here and there that can't generate a flattering cover image source is not very attractive to me. That "hobgoblin of a small mind, beloved of poets, philosophers, and divines" is at work no doubt.
- Some galleries are small. Here's where it all comes together: few-image galleries where the choice is too limited. In the test cases I've worked so far, I've had one 6-image gallery that generated a wonderful cover image (here) and one 6-image gallery where the best strikes me as marginal (here). Everything in that last gallery is more there for intellectual/documentary interest, not aesthetic interest, and that's not helpful for finding a nice cover image. The image in the latter gallery has some custom CSS to re-position. (My dozen public test cases with cover images are the ones here.)
So something has to give: accept weak cover images, accept the inconsistency of mixing galleries with and without images, or accept cover images from outside the gallery (perhaps a folder-level default to fall back on)..
.
That's really where I'm coming from in all this. Of course, I can make do with selection only within a gallery provided I can re-position freely. And even with today's design, I can do it in custom CSS, although it would be a bear to manage across a whole site full of galleries. But since we are in an open comment phase, I'm taking the opportunity to lobby for what, to me, seems a better, more flexible, addition.
"restrict the selection of a gallery's Feature Image to its own gallery"
I do not want all photos/images I use for feature shown in its gallery. Some are special images/titles
meant only for the folder levels.
You've already destroyed ~1024 of my galleries, now you also want to do the folder images?
Leave the feature selection like it is.:pissed
My Website index | My Blog
So please do not restrict the selection of cover photos to the gallery (folder) they are representing!
Thanks
Lille Ulven
We wouldn't go an unset feature images that were already set; we'd just restrict future images from being set outside the location.
I'm still waiting for you to reach out so we can fix it. I'm more than happy to help but I'd need more information than "you destroyed my galleries." I still see all of your galleries there, with photos in them, with all of the photos visible, all of the share features available; everything you'd normally be able to do on a gallery appears to be working.
For example, you could move your 'Click to see map' section back to the center with this CSS:
.sm-gallery-cover-description span { margin-left: auto; margin-right: auto; }Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
it out to another gallery. It was just much more work for everyone.
Feature images for folders require browsing to find one. Why have a different method for galleries? That
would really confuse many.
My Website index | My Blog
http://www.photosbyat.com/Birds/2016-Birding/Birding-2016-December/Test-new-box/n-4n6Q7X/
Major problem is narrowing browser down to phone width. Everything piles up.
See post #106 for screen shot. Currently have center stuff, map and nav, hidden below 1100px.
Top box above is a "new" html widget, trying to get it to work but same problem. But even removing
description and using a new html widget would be useless because of the gallery title and buy
button placement.
Something in the html is screwed and flex boxes not working. Have spent many hours on this.
Edit: need to add that this description has been used for many years, tweaked a couple times. And it would take a few
months of constant work to edit all ~1045 galleries. But would consider using new html that works.
Current html (shortened) in top widget.
<div class="xmyFlexbox" style="xmax-width: 100%; xmargin: 0 auto 10px;"> <div class="box1 birdGalDesc" style="xfont-size: 11pt; min-width: 480px;"> Eleven Western ... not see a nest. </div> <div class="box2 centerArea" style="xmax-width: 160px; xtext-align:center; xmargin-top: 0px;"> <span class="mapButton"> <a href="http://maps.smugmug.com/?feedType=geoAlbum&Data=59897516_JGnxB5" target="_blank">Click to see Map</a> </span> <br><br> <span style="font-size: 8pt; color:yellow">< <a href="/Birds/2016-Birding/Birding-2016-May/2016-05-22-25-Tower-Grove-Park"><u>Previous</u></a> | gallery | <a href="/Birds/2016-Birding/Birding-2016-June/2016-06-Coming-Soon"><u>Next</u></a> > </span> </div> <div class="box3 birdjump" style="xwidth: 480px ; xtext-align:center;"> <span style="color:yellow; font-size: 10pt;">Jump to >> <a class="nav" href="/Birds/2015-Birding/Birding-2015-December">Dec 2015</a> • ... <a class="nav" href="/Birds/2016-Birding/Birding-2016-December">Dec 2016</a> • <a class="nav" href="/Birds/2017-Birding/Birding-2017-January">Jan 2017</a> </span><br> <span class="clickMain">Click on large photo below for full screen</span> </div> </div> <!----- end myFlexbox -------> <div style="clear: both;"></div>Current html in gallery description.<div class="birdGalDesc" style="font-size: 11pt; width: 480px;"> Eleven Western ... not see a nest. </div> <div class="birdjump" style="max-width: 480px ; text-align:center;"> <span style="color:blue; font-size: 10pt;">Jump to >> <a class="nav" href="/Birds/2015-Birding/Birding-2015-December">Dec 2015</a> • <a class="nav" href="/Birds/2016-Birding/Birding-2016-January">Jan 2016</a> • ... <a class="nav" href="/Birds/2016-Birding/Birding-2016-December">Dec 2016</a> • <a class="nav" href="/Birds/2017-Birding/Birding-2017-January">Jan 2017</a> <br></span> <span style="color:blue; font-size:13pt;"><b>Click on main photo below for larger version</b></span> </div> <center> <span class="mapButton"> <a href="http://maps.smugmug.com/?feedType=geoAlbum&Data=59897516_JGnxB5" target="_blank">Click to see Map</a> </span> <br><br> <span style="font-size: 8pt; color:yellow"> < <a href="/Birds/2016-Birding/Birding-2016-May/2016-05-22-25-Tower-Grove-Park"> <u>Previous</u></a> | gallery | <a href="/Birds/2016-Birding/Birding-2016-June/2016-06-Coming-Soon"><u>Next</u></a> > </span> </center> <div style="clear: both;"></div>My Website index | My Blog
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
everywhere. Only difference is the map/nav part there or not.
I think I need to remove all the CSS I've added/changed first, might be simpler to just focus on "all galleries". Back later.
Edit: Any bird gallery, example: http://www.photosbyat.com/Birds/2016-Birding/Birding-2016-May/2016-05-30-WEKI
I removed CSS and html widgets leaving only the gallery description and its CSS.
Seems to flow down narrowing browser to phone size okay. Hid a few items at 840px.
But in the left box the text does not flow and right side is cut off on phone, see screen shot.
Jump to; box flows correctly. Both boxes have a max-width set in CSS.
Looks like this is a bug? Rotate phone to landscape and "jump to" size gets larger. Rotate back to portrait and
it stays that larger size. Screen shot left to right. iPhone 6S
All the text enlarges on this page rotating phone. http://www.photosbyat.com/Birds/2016-Birding/Birding-2016-February/2016-02-20-Kaskaskia-Island Ha, but the left box text flows? Have to check that.
Edit: checked that. In the description html it has in style a max-width vs width. Although "all galleries" CSS has max-width
!important somehow it has to be in this style also for text to flow, won't override.
My Website index | My Blog
I have only implemented the Slideshow and Buy button in the cover design and found that for some galleries the button now was overlapping the gallery description, slightly inconvenient.
The best solution that I have been able to come up with so far was to:
1. Change the Buy-button text after @leftquarks suggestion with this CSS
/* Hide the "Buy Photos" text */ .sm-gallery-cover-buy-button span:nth-of-type(2) { display: none; } /* Change the "Buy Photo" button text */ .sm-gallery-cover-buy-button:after { content: ' Buy'; /*Shorter text than the original*/ font-family: Roboto Condensed,Roboto, Helvetica, Arial, sans-serif; margin-left: 10px; font-size: 13px; }2. change the Slideshow text to a smaller font-size like this:
/* Add the word "Slideshow" to the slideshow button in the Gallery Header */ .sm-gallery-cover-slideshow-button:after { content: ' Slideshow'; margin-left: 5px; font-size: 13px; }I suspect that if you activate all three buttons and add text to all three of them, you might run into the same problem again, but I don't have a solution for that one except for using even smaller fonts and by doing so the entire point of having buttons with descriptive text is lost (unless you expect your website visitors to wear microscopes anyway...)
PS: this was not affected by my else customized gallery-descriptions as it did not work properly for a gallery where I had removed those customizations (read: additional divs) - this gallery was the one (before my enhanced customizations) that tried to get me out of my mind: http://www.lilleulven.com/Photos/Macro/Animals/
Lille Ulven
Thanks, I've added the code for shrinking the title text and I can see it change size when I'm in the customizer under content & design, but when I exit that the title text stays big.
Thanks. -Rob
/* Change the font size of the Gallery Title */
.sm-gallery-cover-title {
font-size: 24px !important;
}
Thanks.
In addition, I just realized that hiding the slideshow in the bulk settings in organizer also hides the button within the lightbox. I'd REALLY like to keep the slideshow button in the lightbox but hide it at the top of the gallery. Thanks.
If you now would add a link to your website into your dgrin signature, it could become incredibly easy to help you
Id you want one of the slideshow buttons but not the other, you will have to hide the gallery one with CSS as well.
Removing the slideshow button from the gallery cover is described in this thread on page 5 (Add a CSS box on either "All Galleries" level or if you have customized galleries on "This Gallery only" level - "Entire website" might work as well):
.sm-button.sm-button-size-large.sm-button-skin-default.sm-gallery-cover-slideshow-button{ display:none !important; }For the cover-title it looks like you found the correct code, so maybe you just added it to the wrong level CSS box? But I cannot figure it out without a link to your website. (Should be on as the one above - And don't use CSS boxes that come with HTML blocks, they are most likely even further restricted than the "Just this..." CSS boxes)
Good luck
Lille Ulven
http://www.robcorpuz.com/PORTFOLIO/
I think have that code added under "all galleries". I will check and try that other code for the slideshow as well. Thanks)
.sm-gallery-cover-headerbuttons .sm-gallery-cover-slideshow-button {display:none}
My Website index | My Blog