I've seen this problem too but I hadn't reported it yet since I wasn't able to find a reproducible case. In my case I saw the problem using Edge but not Chrome - even with the browser at exactly the same size. Just out of curiosity I opened Internet Explorer from Edge and saw the same problem.
Your two examples both work properly for me. If the problem is tied to the size of the browser window then that might make sense (or maybe not).
I just did some more playing on my site to see if I could find some galleries that exhibit this odd behavior.
I think I'm starting to see a pattern. All of the galleries I've seen with this problem have a short gallery description.
--- Denise
I'm seeing the issue on a 23" wide screen monitor using FireFox. So not a screen width issue. Definitely has to do with VERY short descriptions...
If I add more text to the description the "more" button goes away.... Makes no sense.
HELP!!!!
I'm seeing the issue on a 23" wide screen monitor using FireFox. So not a screen width issue. Definitely has to do with VERY short descriptions...
If I add more text to the description the "more" button goes away.... Makes no sense.
HELP!!!!
I just noticed a gallery that was fine initially jumped to include a "read more" when I increased the width of the browser window. Very odd...
Thanks for the new capabilities. While I don’t think I’m quite ready to go live with cover images yet, I’m close. What I think is yet needed is a little more control over the cover image, in two rather different ways:
1. Be able to select the reference point and position. This, I gather, is coming, but let me suggest the form of how this done makes a difference. Since the image gets adjusted to fit differently depending on the window size, simple image cropping is not enough (although it might be desirable). It would nice to be able to select how high on the selected image the cover image is positioned (now it’s vertically centered), and it would be nice to be able to change what that selected position references (e.g., does the selected position correspond to the bottom of the cover image (I'd use this the most) … to the center … or to the top of the cover image).
2. Be able to select a cover image from outside the gallery. I think this has been mentioned, although I can’t find the reference off hand. Three virtues here. First, this solves the cropping problem: I could put a cropped image up elsewhere and select it. Second, this would allow me to use a common image across several galleries, for example, across all galleries in a folder. This would make it possible to transition to cover images more quickly, without having select and fiddle with a cover image for each gallery separately at first. And third, this simplifies the interface. While it’s not a huge problem for me, I’m aware SmugMug’s interface has been criticized for apparent complexity. Having two modestly different interfaces for about the same function – as we have now for selecting a gallery's feature and cover images – reinforces that perception. Unifying the interface removes that perception.
With that control, I’m close to being ready to roll. I’d probably not move to the “new breadcrumb” though until everything – all folders, pages, and galleries – had images since mixing new and old breadcrumbs just feels discordant to me.
* * * * *
I’ve added several CSS adjustments to my site so galleries without cover images remain close to the old gallery alignment and (more importantly) close to the feel of folders and pages. I’ve also installed cover images on a pair of unlisted test galleries and have worked the CSS so they look reasonably concordant with the galleries that don’t use cover images. If anyone is interested, go look at my CSS page: I list all the CSS I have up. Most are just font sizes, margins, paddings, line spacings, and the like, but two might be of more interest here. I thought the cover image was sometimes just too large, overwhelming the individual image collection. The first CSS snippet below narrows it down a bit: no more than 360px high rather than the default of 512px. I also though the scrim behind the description wasn’t strong enough for background images that were lighter in tone or had some high contrast areas at the bottom. The second CSS snippet below increases the opacity of the scrim from 0.5 to 0.75 to make the descriptions stand out more.
Here are some images from my CSS-adjusted galleries, so you can see how I moved stuff around, along with the effects of the shorter cover image and darker scrim (which this example really needs).
...With that control, I’m close to being ready to roll. I’d probably not move to the “new breadcrumb” though until everything – all folders, pages, and galleries – had images since mixing new and old breadcrumbs just feels discordant to me. ...
What do you mean move to the "new breadcrumb"? I've seen no option. They have stripped the gallery
title from the breadcrumb and placed it in the description. That configuration has been shoved down our
throats even if we are not using the new cover photo/gallery description.
This should now be fixed. Let me know if you still see it occurring.
There also seems to be something unexpected happening with the Gallery Description overflow link in Journal style galleries. I have a description of less than ONE LINE in length, but "Read More" showed up when I enlarged the font via <H3> tags. I've now reduced it to down to <H4>, which is a fine workaround for now. http://www.janicebrowne.com/Special-Galleries/Phlog/n-6bGL6J/
MORE INFO: As I understand it, there should be no concatenation logic applied to Gallery Description in Journal style galleries, right? In my case, something is triggering "Read More" even without concatenation when: Firefox browser, short Description, HTML <H4> formatted font:
Bug not observed in IE browser:
Bug disappears in FF with <H3> tag:
Bug disappears in FF with long description, NO HTML formatting:
While the new changes have potential (jury is still out), is coding available to lift gallery descriptions higher onto the header photo? http://www.tomdphotos.com/PhotoGalleries/AirShows/2016/TBMGathering/ vs (no photo) http://www.tomdphotos.com/PhotoGalleries/AirShows/2016/2016KBAD/ . While I am asking, I am also coding for mobile devices, which I have found don't tolerate much movement up or down without text overlapping on the mobile device. Additionally, the text isn't taking the colors on the gallery with the header photo. Any ideas?.....Thank you for your patience! Oh yeah, one other thing, coding in the description portion does not appear to center the desired text on the page. It appears to center it between the boundaries of the left side of the page and the left edge of the slideshow button. Any ideas on corrections for that?
I really don't have anything nifty to say so I will remain quiet and observe!
Hi avman,
For the cover-header-color try this in a "just this gallery" CSS block and adapt the color to what fits best to your cover photo
.sm-gallery-cover-description a > span{
color: #000000 !important; /*OBS: this is black and would not work well with the TBMGathering gallery, so you need to find a color that works per gallery*/
}
What do you mean move to the "new breadcrumb"? I've seen no option. They have stripped the gallery
title from the breadcrumb and placed it in the description.
Allen, you state the position very clearly. Out of the blue, the appearance of my website has changed for the worse. As far as I can see from scanning this thread, there is no hope that the old breadcrumb on a single line will ever be restored to us paying punters.
@Alan: I think the trouble that you are seeing with your website when opening it on mobile devices relates to your hard coded width of the first and last div of yours. If you only have one div or two without hard coded widths it works fine to have html in the descriptions (see my descriptions, they are all encapsulated in their own divs, though I removed the header div as it became obsolete with the new changes)
What might work for you is the following:
<div class="flexi">
<ul class="flex-container">
<li class="flex-item">
<div class="birdGalDesc">What ever is in birdGalDesc</div>
</li>
<li class="flex-item">
<center>button and stuff now in center</center>
</li>
<li class="flex-item>
<div class="birdjump">Everything that is in birdjump now<div>
</li>
</ul>
</div>
You may have to adapt the settings of the flex-boxes a little bit, what I used as base for mine is that all divs are supposed to have the same size. I haven't tried this on covers though, just all my Portfolio-Galleries are built up with flex boxes
Hi avman,
For the cover-header-color try this in a "just this gallery" CSS block and adapt the color to what fits best to your cover photo
.sm-gallery-cover-description a > span{
color: #000000 !important; /*OBS: this is black and would not work well with the TBMGathering gallery, so you need to find a color that works per gallery*/
}
Good luck
Lille Ulven
Thank you. If you check the gallery, http://www.tomdphotos.com/PhotoGalleries/AirShows/2016/2016KBAD/ you can see I had the colorization the way I wanted it in gallery description. I have also turned the mask feature on to allow the text colors to stand out from the background. Obviously, it doesn't work with a gallery cover photo. It appears description customization is disabled for a gallery header photo. Any ideas on lifting the text in a gallery header photo? Thank you
I really don't have anything nifty to say so I will remain quiet and observe!
It would be nice if SM gave a heads-up when making changes to CSS classes. My galleries have a white page background, black gallery background with white text and font set with custom CSS. The SM changes to CSS made my gallery title and descriptions dark gray! Hard to read on a black background!
I did some emergency CSS editing just now to fix it.
Hey SM, please send an e-mail, or something, to let us know when changing CSS classes.
2. Be able to select a cover image from outside the gallery. I think this has been mentioned, although I can’t find the reference off hand. Three virtues here. First, this solves the cropping problem: I could put a cropped image up elsewhere and select it. Second, this would allow me to use a common image across several galleries, for example, across all galleries in a folder. This would make it possible to transition to cover images more quickly, without having select and fiddle with a cover image for each gallery separately at first. And third, this simplifies the interface.
I Agree, ability to choose Cover from another Gallery makes a lot of sense.
Two suggestions for the cover photo display, with some illustrations of the current issues.
First, consider re-locating the "Read More" flag to be inside the last line of the truncated description rather than off to the side. As the screen shot below shows, when the window size is a bit on the narrow side, the "Read More" takes up a fair amount of screen real estate. The description get compressed into a modestly narrow column. (It may look like the title is getting compressed too, but it's not: that's just how the words wrapped in this example.) If the "Read More" was tucked into the last line of the description, that space would be freed up so the description wouldn't wrap as aggressively.
Second, I observe the header buttons (the slideshow and buy photos buttons here) disappear when the window width is less than about 1000px. I guess that's addressing the same screen real estate problem as in my first paragraph. That situation is illustrated below. The screen width here was just a tad narrower than first one but you can see that dropping the buttons really does add a bunch of space. This example has all my custom CSS in, but buttons disappear even with no custom CSS active. Basically the headerbutton <div> is empty. I'm less sure, however, that's a good way to buy space. I can imagine somebody on, say, an old 800 x 600 tablet being able to make good use of a slideshow (and the now-vanished slideshow button). In narrow windows, consider shrinking all the header buttons to icons, but not removing them ... at least until the 670px width where all sorts of layout things change.
@Hikin' Mike not sure if you get this in time before leaving: but I see your header/cover photo in both FF and Safari on Mac. Maybe your FF version is slightly outdated? (Mine is 46.0.1)
Here are some images from my CSS-adjusted galleries, so you can see how I moved stuff around, along with the effects of the shorter cover image and darker scrim (which this example really needs) ...
Jim, i'd like to get the spacing you have between the Cover Image and the main body of the gallery (Collage Portrait-style in my case), but I can't see how you've done it.
I don't want the Cover Image to be any shorter (it's already plenty short enough IHMO) but I would like the spacing. Can you (or someone) please advise?
Jim, i'd like to get the spacing you have between the Cover Image and the main body of the gallery (Collage Portrait-style in my case), but I can't see how you've done it.
I don't want the Cover Image to be any shorter (it's already plenty short enough IHMO) but I would like the spacing. Can you (or someone) please advise?
The piece of CSS I used to add space between the cover image block (with a cover image showing) and the individual images is
First, consider re-locating the "Read More" flag to be inside the last line of the truncated description rather than off to the side.
What you described is what we started with but had to divert from due to frustrations with support from certain web-browsers. Most websites that use a "Read More" inline with the text have a fixed # of characters that are supported before the "Read More" is shown. Since ours is stretchy (full-width) and depends on the screen window size we didn't want to limit your descriptions and moved it to the side so that it would work at any size window. Chrome supports some code that would let us move the Read More inline but FireFox and IE do not. If they do start supporting it, we'll update the design and move it in.
Second, I observe the header buttons (the slideshow and buy photos buttons here) disappear when the window width is less than about 1000px.
We hide most of the buttons on mobile devices (which is calculated on screen width). The Buy Button on a gallery opens the "buy multiple-photos" interface, which we haven't had a chance to update to work on mobile devices. Since it doesn't work well, we hide the Buy button for mobile devices. The slideshow button on mobile devices will return next week -- we're just getting some QA eyes on it. The download all functionality is also hidden, since most mobile devices cannot open zip files.
FWIW, I'm not using the header photo. What I'm using is adding a photo to the description field using HTML. I see it on Chrome.
The "Read More" works by looking to see if the Description will overflow 3 lines of text at 1.6em per line. If it does, we'll display "Read More". On galleries where you're using a photo in the Description, those will overflow the 3 lines and cause Read More to display. You'll probably want to use CSS to remove the Read More, or move to using the Cover Image. Let us know if you'd like us to help you move the photos out of the Description and into the Cover Image.
I'd noticed that too. There seems to be no consistency across SmugMug about recognising HTML syntax.
We made sure that this uses the same HTML syntax whitelist that the rest of the site uses. <BR>'s should be allowed. I just tested using <BR>'s on my own site, and they work fine. Could you link me to some galleries where it's not working?
...
...
I can tell you why your <br>s are not recognized...
The cover-header / cover-description is set up as a flex box, which tries to determine by itself when to add a line break and when not to. So you have this code activated:
.sm-gallery-cover-description{
display:flex;
There are two ways of getting your <br>s recognized:
1. Encapsulate your entire gallery description in a div
2. Change .sm-gallery-cover-description (or rather overwrite it) with
.sm-gallery-cover-description{
display: inline;
The first one should give you your hard coded <br>s back, I am not sure though what would happen if your line is longer than what your screen can handle...
The second one turns the flex boxes for that div-class off.
I can tell you why your <br>s are not recognized...
The cover-header / cover-description is set up as a flex box, which tries to determine by itself when to add a line break and when not to. So you have this code activated:
.sm-gallery-cover-description{
display:flex;
There are two ways of getting your <br>s recognized:
1. Encapsulate your entire gallery description in a div
2. Change .sm-gallery-cover-description (or rather overwrite it) with
.sm-gallery-cover-description{
display: inline;
The first one should give you your hard coded <br>s back, I am not sure though what would happen if your line is longer than what your screen can handle...
The second one turns the flex boxes for that div-class off.
I suspect the first is the safer option here.
Good luck
Lille Ulven
I have already used the "Encapsulate your entire gallery description in a div" where I've found this on
an individual case. Changing CSS site wide would be too dangerous I think.
My absolute problem now are the three blocks stacking on top of each other in the flex description of
almost every bird gallery shrinking the browser window. This starts at about 1140px.
Comments
I'm seeing the issue on a 23" wide screen monitor using FireFox. So not a screen width issue. Definitely has to do with VERY short descriptions...
If I add more text to the description the "more" button goes away.... Makes no sense.
HELP!!!!
--- Denise
Musings & ramblings at https://denisegoldberg.blogspot.com
Thank you Denise!
It shouldn't be doing that! I've asked the QA folks to take a look and then we'll pass along to our sorcerers when we can reproduce.
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
2. Be able to select a cover image from outside the gallery. I think this has been mentioned, although I can’t find the reference off hand. Three virtues here. First, this solves the cropping problem: I could put a cropped image up elsewhere and select it. Second, this would allow me to use a common image across several galleries, for example, across all galleries in a folder. This would make it possible to transition to cover images more quickly, without having select and fiddle with a cover image for each gallery separately at first. And third, this simplifies the interface. While it’s not a huge problem for me, I’m aware SmugMug’s interface has been criticized for apparent complexity. Having two modestly different interfaces for about the same function – as we have now for selecting a gallery's feature and cover images – reinforces that perception. Unifying the interface removes that perception.
I’ve added several CSS adjustments to my site so galleries without cover images remain close to the old gallery alignment and (more importantly) close to the feel of folders and pages. I’ve also installed cover images on a pair of unlisted test galleries and have worked the CSS so they look reasonably concordant with the galleries that don’t use cover images. If anyone is interested, go look at my CSS page: I list all the CSS I have up. Most are just font sizes, margins, paddings, line spacings, and the like, but two might be of more interest here. I thought the cover image was sometimes just too large, overwhelming the individual image collection. The first CSS snippet below narrows it down a bit: no more than 360px high rather than the default of 512px. I also though the scrim behind the description wasn’t strong enough for background images that were lighter in tone or had some high contrast areas at the bottom. The second CSS snippet below increases the opacity of the scrim from 0.5 to 0.75 to make the descriptions stand out more.
.sm-user-ui .sm-gallery-cover[data-show-image="true"] { max-height: 360px; } .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,.75),rgba(0,0,0,0) 100%); }This should now be fixed. Let me know if you still see it occurring.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
title from the breadcrumb and placed it in the description. That configuration has been shoved down our
throats even if we are not using the new cover photo/gallery description.
My Website index | My Blog
Thank you!
--- Denise
Musings & ramblings at https://denisegoldberg.blogspot.com
There also seems to be something unexpected happening with the Gallery Description overflow link in Journal style galleries. I have a description of less than ONE LINE in length, but "Read More" showed up when I enlarged the font via <H3> tags. I've now reduced it to down to <H4>, which is a fine workaround for now.
http://www.janicebrowne.com/Special-Galleries/Phlog/n-6bGL6J/
MORE INFO: As I understand it, there should be no concatenation logic applied to Gallery Description in Journal style galleries, right? In my case, something is triggering "Read More" even without concatenation when: Firefox browser, short Description, HTML <H4> formatted font:
Bug not observed in IE browser:
Bug disappears in FF with <H3> tag:
Bug disappears in FF with long description, NO HTML formatting:
Tom
http://avman.smugmug.com/
For the cover-header-color try this in a "just this gallery" CSS block and adapt the color to what fits best to your cover photo
.sm-gallery-cover-description a > span{ color: #000000 !important; /*OBS: this is black and would not work well with the TBMGathering gallery, so you need to find a color that works per gallery*/ }Good luck
Lille Ulven
~1045 of my galleries for all but wide screens.
My Website index | My Blog
http://www.lyall-photos.net/
What might work for you is the following:
with a css class somewhat like this:
.flexi{ width: 110% !important; /*that way the flex boxes work in IE*/ } .flex-container{ padding: 0; margin: 0; list-style: none; width: 110%; display: flex; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -ms-flex; display: -webkit-flex; /*display: flex;*/ -webkit-flex-flow: row wrap; justify-content: space-around; flex-wrap: wrap; } .flex-item{ flex-basis: content; }You may have to adapt the settings of the flex-boxes a little bit, what I used as base for mine is that all divs are supposed to have the same size. I haven't tried this on covers though, just all my Portfolio-Galleries are built up with flex boxes
Good luck
Lille Ulven
Thank you. If you check the gallery, http://www.tomdphotos.com/PhotoGalleries/AirShows/2016/2016KBAD/ you can see I had the colorization the way I wanted it in gallery description. I have also turned the mask feature on to allow the text colors to stand out from the background. Obviously, it doesn't work with a gallery cover photo. It appears description customization is disabled for a gallery header photo. Any ideas on lifting the text in a gallery header photo? Thank you
Tom
http://avman.smugmug.com/
I did some emergency CSS editing just now to fix it.
Hey SM, please send an e-mail, or something, to let us know when changing CSS classes.
I Agree, ability to choose Cover from another Gallery makes a lot of sense.
Chooka chooka hoo la ley
Looka looka koo la ley
Two suggestions for the cover photo display, with some illustrations of the current issues.
First, consider re-locating the "Read More" flag to be inside the last line of the truncated description rather than off to the side. As the screen shot below shows, when the window size is a bit on the narrow side, the "Read More" takes up a fair amount of screen real estate. The description get compressed into a modestly narrow column. (It may look like the title is getting compressed too, but it's not: that's just how the words wrapped in this example.) If the "Read More" was tucked into the last line of the description, that space would be freed up so the description wouldn't wrap as aggressively.
Second, I observe the header buttons (the slideshow and buy photos buttons here) disappear when the window width is less than about 1000px. I guess that's addressing the same screen real estate problem as in my first paragraph. That situation is illustrated below. The screen width here was just a tad narrower than first one but you can see that dropping the buttons really does add a bunch of space. This example has all my custom CSS in, but buttons disappear even with no custom CSS active. Basically the headerbutton <div> is empty. I'm less sure, however, that's a good way to buy space. I can imagine somebody on, say, an old 800 x 600 tablet being able to make good use of a slideshow (and the now-vanished slideshow button). In narrow windows, consider shrinking all the header buttons to icons, but not removing them ... at least until the 670px width where all sorts of layout things change.
(These examples were pulled from https://jtringl.smugmug.com/Other/Test-gallery/n-ZPsFBg/)
Not fixed here: http://gallery.imagesinthebackcountry.com/Landscape-and-Nature/Yosemite/
FWIW, I'm not using the header photo. What I'm using is adding a photo to the description field using HTML. I see it on Chrome.
I'm also leaving in a few hours and I'll be offline for a few weeks. :ivar
Just to add, I'm still using XP and I don't see it in FF.
Images in the Backcountry
My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
Have a great time
Lille Ulven
I don't want the Cover Image to be any shorter (it's already plenty short enough IHMO) but I would like the spacing. Can you (or someone) please advise?
The piece of CSS I used to add space between the cover image block (with a cover image showing) and the individual images is
.sm-user-ui .sm-gallery-cover[data-show-image="true"] { margin-bottom: 48px; }Adjust that 48 up or down to taste.We hide most of the buttons on mobile devices (which is calculated on screen width). The Buy Button on a gallery opens the "buy multiple-photos" interface, which we haven't had a chance to update to work on mobile devices. Since it doesn't work well, we hide the Buy button for mobile devices. The slideshow button on mobile devices will return next week -- we're just getting some QA eyes on it. The download all functionality is also hidden, since most mobile devices cannot open zip files.
The "Read More" works by looking to see if the Description will overflow 3 lines of text at 1.6em per line. If it does, we'll display "Read More". On galleries where you're using a photo in the Description, those will overflow the 3 lines and cause Read More to display. You'll probably want to use CSS to remove the Read More, or move to using the Cover Image. Let us know if you'd like us to help you move the photos out of the Description and into the Cover Image.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
How about this old gallery? This is typical everywhere I've checked.
http://www.photosbyat.com/Other/Tornado-1967
... and get this, no break. This is really weird. I add the "See" after the break ... and get this.
My Website index | My Blog
I can tell you why your <br>s are not recognized...
The cover-header / cover-description is set up as a flex box, which tries to determine by itself when to add a line break and when not to. So you have this code activated:
.sm-gallery-cover-description{ display:flex;There are two ways of getting your <br>s recognized:
1. Encapsulate your entire gallery description in a div
2. Change .sm-gallery-cover-description (or rather overwrite it) with
.sm-gallery-cover-description{ display: inline;The first one should give you your hard coded <br>s back, I am not sure though what would happen if your line is longer than what your screen can handle...
The second one turns the flex boxes for that div-class off.
I suspect the first is the safer option here.
Good luck
Lille Ulven
an individual case. Changing CSS site wide would be too dangerous I think.
My absolute problem now are the three blocks stacking on top of each other in the flex description of
almost every bird gallery shrinking the browser window. This starts at about 1140px.
My Website index | My Blog