Options

NEW/UPDATED: Gallery Header / Cover Image

12467

Comments

  • Options
    brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited June 4, 2016
    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.

    Here's one - http://www.denisegoldberg.com/Fragments/A-wander-in-Boston-2015/.

    ...

    Here are some more galleries where I've seen this problem:
    http://www.denisegoldberg.com/Wandering-near-home/Spring-2016/
    http://www.denisegoldberg.com/GardensFlowersThings/Andres-Institute-of-Art-2016/
    http://www.denisegoldberg.com/Wandering-near-home/Winter-2016/

    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!!!!
  • Options
    denisegoldbergdenisegoldberg Administrators Posts: 14,286 moderator
    edited June 4, 2016
    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...

    --- Denise
  • Options
    canderson1229canderson1229 Registered Users Posts: 158 Major grins
    edited June 4, 2016
    Add this CSS to remove both the title and the description:
    .sm-gallery-cover-title,
    .sm-gallery-cover-description {
      display: none !important;
    }
    
    --- Denise

    Thank you Denise!
  • Options
    leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited June 4, 2016
    Why am I getting a "more" button for a Smugmug style gallery w/ a very short description?

    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.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • Options
    LPCLPC Registered Users Posts: 481 Major grins
    edited June 4, 2016

    Or to hide all gallery cover buttons this might do the trick:
    .sm-gallery-cover .sm-gallery-cover-headerbuttons {
    display: none !important;
    }
    

    Lykke til

    Lille Ulven

    Thank you thumb.gif
  • Options
    JtringJtring Registered Users Posts: 675 Major grins
    edited June 4, 2016
    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.
    .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%);
    }
    
    Jim Ringland . . . . . jtringl.smugmug.com
  • Options
    JtringJtring Registered Users Posts: 675 Major grins
    edited June 4, 2016
    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).


    No%20cover%20image%20example-L.jpg




    Cover%20image%20example-L.jpg
    Jim Ringland . . . . . jtringl.smugmug.com
  • Options
    leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited June 4, 2016
    Why am I getting a "more" button for a Smugmug style gallery w/ a very short description?

    This should now be fixed. Let me know if you still see it occurring.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • Options
    AllenAllen Registered Users Posts: 10,013 Major grins
    edited June 4, 2016
    Jtring wrote: »
    ...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.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Options
    denisegoldbergdenisegoldberg Administrators Posts: 14,286 moderator
    edited June 4, 2016
    leftquark wrote: »
    This should now be fixed. Let me know if you still see it occurring.
    I've checked the galleries where I was seeing this problem before and it looks like it is fixed.

    Thank you!

    --- Denise
  • Options
    BigRedBigRed Registered Users Posts: 288 Major grins
    edited June 4, 2016
    leftquark wrote: »
    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:
    i-3JgFxKG-M.jpg

    Bug not observed in IE browser:
    i-bSPVtLD-M.jpg

    Bug disappears in FF with <H3> tag:
    i-SqRTb89-M.jpg

    Bug disappears in FF with long description, NO HTML formatting:
    i-2q5NM2g-M.jpg
    http://www.janicebrowne.com - Janice Browne Nature Art & Photography
  • Options
    brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited June 5, 2016
    leftquark wrote: »
    This should now be fixed. Let me know if you still see it occurring.
    Looks like it's fixed. Thanks.
  • Options
    avmanavman Registered Users Posts: 60 Big grins
    edited June 5, 2016
    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!

    Tom

    http://avman.smugmug.com/
  • Options
    Lille UlvenLille Ulven Registered Users Posts: 567 Major grins
    edited June 5, 2016
    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
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • Options
    AllenAllen Registered Users Posts: 10,013 Major grins
    edited June 5, 2016
    Allen wrote: »
    Everything in the description combines to one big glob when shrunk down to phone. Any ideas?
    http://www.photosbyat.com/Birds/2016-Birding/Birding-2016-May/2016-05-30-WEKI
    New description does not work with html. All div's pile on top of each other on phone. This destroys
    ~1045 of my galleries for all but wide screens.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Options
    James LyallJames Lyall Registered Users Posts: 202 Major grins
    edited June 5, 2016
    Allen wrote: »
    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.
  • Options
    Lille UlvenLille Ulven Registered Users Posts: 567 Major grins
    edited June 5, 2016
    @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>
    

    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
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • Options
    avmanavman Registered Users Posts: 60 Big grins
    edited June 5, 2016
    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!

    Tom

    http://avman.smugmug.com/
  • Options
    ArmadilloArmadillo Registered Users Posts: 31 Big grins
    edited June 5, 2016
    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.
  • Options
    T. BombadilT. Bombadil Registered Users Posts: 286 Major grins
    edited June 5, 2016
    Jtring wrote: »
    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.
    Bruce

    Chooka chooka hoo la ley
    Looka looka koo la ley
  • Options
    JtringJtring Registered Users Posts: 675 Major grins
    edited June 5, 2016
    leftquark wrote: »
    The new header and cover photo are now love.

    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.


    Read%20More%20Example-S.jpg


    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.

    Read%20More%20No%20Headerbuttons-S.jpg

    (These examples were pulled from https://jtringl.smugmug.com/Other/Test-gallery/n-ZPsFBg/)
    Jim Ringland . . . . . jtringl.smugmug.com
  • Options
    Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited June 5, 2016
    leftquark wrote: »
    This should now be fixed. Let me know if you still see it occurring.

    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.
  • Options
    Lille UlvenLille Ulven Registered Users Posts: 567 Major grins
    edited June 5, 2016
    @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)

    Have a great time

    Lille Ulven
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • Options
    W.W. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited June 6, 2016
    Jtring wrote: »
    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?
  • Options
    JtringJtring Registered Users Posts: 675 Major grins
    edited June 6, 2016
    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
    .sm-user-ui .sm-gallery-cover[data-show-image="true"]  {
        margin-bottom: 48px;
    }
    
    Adjust that 48 up or down to taste.
    Jim Ringland . . . . . jtringl.smugmug.com
  • Options
    W.W. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited June 6, 2016
    Jtring wrote: »
    The piece of CSS I used to add space between the cover image block (with a cover image showing) and the individual images is ...
    Thanks, Jim!
  • Options
    leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited June 6, 2016
    Jtring wrote: »
    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.
    Jtring wrote: »
    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.
    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.
    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.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • Options
    AllenAllen Registered Users Posts: 10,013 Major grins
    edited June 6, 2016
    Allen wrote: »
    Noticed that breaks <br> do not work in new descriptions.
    I'd noticed that too. There seems to be no consistency across SmugMug about recognising HTML syntax.
    leftquark wrote: »
    In relation to <BR>'s,
    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?
    ...
    ...

    How about this old gallery? This is typical everywhere I've checked.
    http://www.photosbyat.com/Other/Tornado-1967
    Tornado in St. Louis 1967  <br>
    <a href="http://www.crh.noaa.gov/lsx/?n=jan241967tornado"
     target="blank">NOAA's National Weather Service</a>
    
    ... and get this, no break.
    Tornado in St. Louis 1967NOAA's National Weather Service
    
    This is really weird. I add the "See" after the break
    Tornado in St. Louis 1967  <br>
    See <a href="http://www.crh.noaa.gov/lsx/?n=jan241967tornado"
     target="blank">NOAA's National Weather Service</a>
    
    ... and get this.
    Tornado in St. Louis 1967NOAA's National Weather Service  
    See
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Options
    Lille UlvenLille Ulven Registered Users Posts: 567 Major grins
    edited June 6, 2016
    Hi Allen :)

    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
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • Options
    AllenAllen Registered Users Posts: 10,013 Major grins
    edited June 6, 2016
    Hi Allen :)

    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.
    Al - Just a volunteer here having fun
    My Website index | My Blog
Sign In or Register to comment.