NEW/UPDATED: Gallery Header / Cover Image

leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
edited November 10, 2016 in SmugMug Product News
I wanted to give everyone here a heads up that we will be updating the top portion of your galleries (the "header") sometime this week, as early as tomorrow (Thursday, May 26th). This will add the Title of the Gallery, update the Slideshow, Download, and Buy Buttons, and introduce a new Gallery Breadcrumb (separate from the Breadcrumb Content Block).

Additionally, this will include the first version of a Gallery Cover Image, which is a beautiful welcoming photo that fits full-width at the top of the gallery. Cover Image can be turned on in Gallery Settings and can be set separately from the galleries Feature Image. If you turn on Cover Image but don't select one, we'll pick one for you (either your Feature Image or the first Landscape oriented photo that meets our size recommendations of 1500x1000px).

Cover Image is only available for Collage Landscape, Collage Portrait, and Thumbnail style galleries. SmugMug, Journal, and Slideshow styles do not have the option to display a Cover Image, since these styles do not lend themselves to a full-width photo at the top.

If the Galleries Description is longer than 3 lines, we will concatenate it into a "Read More" button, which opens the description in an overlay. If you disable Cover Image, the entire Description will be displayed, with no read more button.

With this release, I would recommend everyone removes their Breadcrumb Content Block from their 'All Galleries' and instead turn on the Gallery Breadcrumb in the Gallery Customization settings. Since the new Gallery Header includes the title of the Galleries, if you had previously enabled your Breadcrumb Content Block to "Show Current Page", we'll hide the Current Page in the Breadcrumb CB to prevent the title from being duplicated.

For your enjoyment, here are some screenshots:

Cover Image on a Collage Landscape Gallery, with a long description. The Breadcrumb Content Block has been removed and the Gallery Breadcrumb is turned on.
Cover%20Photo%20On%20-%20Long%20Description-M.png

Clicking "Read More" will open an overlay, displaying the entire Description:
Cover%20Photo%20On%20-%20Long%20Description%20-%20Read%20More-M.png

Turning OFF the Cover Image will make it so the entire Description is displayed:
Collage%20Landscape%2C%20Cover%20Image%20Off-M.png

Cover Image on a Collage Landscape Gallery, with a short description. The Gallery Breadcrumb is turned OFF, and the Breadcrumb Content Block still exists, above the Cover Image:
Cover%20Photo%20On%20-%20Short%20Description%20-%20Breadcrumb%20CB-M.png

SmugMug style gallery with a long description:
SmugMug%20Style%20-%20Long%20Description-M.png

Turning on Cover Image and setting the photo is done inside Gallery Settings:
Gallery%20Settings-M.png

The Gallery Breadcrumb can be turned on within the Customizer:
customizing%20breadcrumb-M.png

Please feel free to reach out with any questions. I'll update this thread when the changes go live.
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
«134567

Comments

  • photoclickphotoclick Registered Users Posts: 278 Major grins
    edited May 25, 2016
    Aaron - will the Cover Image (and other new items) be displayed if I show the gallery through the Multiple Photos block with the single gallery as a source?
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited May 25, 2016
    photoclick wrote: »
    Aaron - will the Cover Image (and other new items) be displayed if I show the gallery through the Multiple Photos block with the single gallery as a source?

    Great question! These changes only apply to Gallery's specifically. If you create a Page (or your homepage) with a Multiple Photos CB, they will not have the new header or 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
  • Lille UlvenLille Ulven Registered Users Posts: 567 Major grins
    edited May 25, 2016
    OK, this may sound like the weirdest question ever...but if one is using a CSS like the following
    .sm-gallery-tiles-container{
    display:none;
    }
    

    Yes, I do use that...I customized my portfolio galleries a little more than "usual"... (see here for an example: Macro - Selection
    Does this somehow interfere with the new settings?
    Say: will the new release lead to the .sm-gallery-tiles-container being no longer a valid class for collage-landscape galleries and therefore the gallery content might get displayed again, which I wouldn't want due to it being then displayed twice?
    Or well anything else for that matter that is automatically changed with the new release when collage-landscapes are used, or will all these (some of them very sweet) changes only take an effect if I actively turn them on in the gallery settings?

    (I completely had forgotten that these changes were in the queue when I customized my portfolio galleries...and I have no chance to do any quick fixes before Friday night if this breaks my code...
    a quick and dirty fix for my customizations -- this is just for myself so that I can jump in and find some notes on this should anything break... -- should be in the top CSS of the Portfolio pages
    /*Emergency quick fix in case of break of customizations */
    /*.sm-gallery-tiles-container{
    display:none;
    }*/
    
    #wsc_visible_container.sm-gallery-tiles-container {
    display:none;
    /*margin-left: 40px;
      display: flex !important;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -ms-flex;
      display: -webkit-flex;
      
      -webkit-flex-flow: row wrap;
      justify-content: space-around;
      flex-direction: row;
      flex-wrap: wrap;
      
      width: 130% !important;
    */
    }
    
    )

    Thanks for the heads-up.

    Lille Ulven
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited May 25, 2016
    if one is using a CSS like the following
    .sm-gallery-tiles-container{
    display:none;
    }
    


    Does this somehow interfere with the new settings?

    Nope, the changes are all above the div that contains the gallery tile container, as you'll see here:

    sm-gallery-tile-container-M.png
    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
  • Lille UlvenLille Ulven Registered Users Posts: 567 Major grins
    edited May 25, 2016
    Thanks leftquark, that is good to know!
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited May 26, 2016
    Where on the page does my existing top banners fall? HTML box in header "entire site".
    Where on the page does my existing top horizontal menus fall? I have two of them in header "entire site".
    Where on the page does my existing breadcrumb fall?

    I will turn off any cover photo as my multiple different top banners are short.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited May 26, 2016
    Allen wrote: »
    Where on the page does my existing top banners fall? HTML box in header "entire site".
    Where on the page does my existing top horizontal menus fall? I have two of them in header "entire site".
    Where on the page does my existing breadcrumb fall?

    The HTML schema for SmugMug sites is currently set to look something like the following (specifically focusing on your questions):
    • Header
    • Body
      • Breadcrumb Content Block
      • Gallery
    • Footer

    The New Gallery Header and the Cover Image all fit in the "Gallery" section.

    Your top banners and your horizontal menu's are in the Header and are above any of the items being changed.

    Your HTML description that includes the "Click to see Map" and your Jump to Dates may be impacted, but I believe I came up with a quick CSS fix for you, though the full description is displayed if Cover Image is OFF, so it might not even be needed.
    Allen wrote: »
    I will turn off any cover photo as my multiple different top banners are short.

    For current SmugMug sites, Cover Photo will be OFF by default. Additionally, since you all have Breacrumb Content Blocks already on the page, the Gallery Breadcrumb will also be OFF. The one impact to you, Allen, is that we'll be hiding the "Current Gallery" (which you have emphasized and in Yellow), since the Gallery Title is now part of the Gallery Header. If you want it to be yellow, I can help create some CSS for you to turn the new Gallery Title to the yellow color of your choosing.

    For customers signing up after we push this live, the Gallery Breadcrumb will be turned ON and the Breadcrumb Content Block will be removed.
    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
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited May 26, 2016
    From what I'm reading/seeing, the new header is "inside" the Gallery section. So I can now remove the code I'm using to display a "header photo" on my galleries. Similar to what WordPress uses (feature image).

    Can't wait!
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited May 26, 2016
    Update: The current plan is to push this live sometime on Monday.
    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
  • David_S85David_S85 Administrators Posts: 13,167 moderator
    edited May 26, 2016
    If I navigate to All Galleries and then trash the breadcrumbs content blocks throughout my site, there seems to be no option to bring that feature back if I don't want to use gallery cover photos. Is this correct? The flyout menu doesn't have the breadcrumb feature visible anymore if I remove my current breadcrumbs. Orin other words, if the old breadcrumbs are removed and the new version is saved, does the old style breadcrumb option return to the menu if I want to go back in there and reinstate them?
    My Smugmug
    "You miss 100% of the shots you don't take" - Wayne Gretzky
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited May 26, 2016
    David_S85 wrote: »
    If I navigate to All Galleries and then trash the breadcrumbs content blocks throughout my site, there seems to be no option to bring that feature back if I don't want to use gallery cover photos. Is this correct? The flyout menu doesn't have the breadcrumb feature visible anymore if I remove my current breadcrumbs. Orin other words, if the old breadcrumbs are removed and the new version is saved, does the old style breadcrumb option return to the menu if I want to go back in there and reinstate them?

    If you removed your Breadcrumb Content Block, you'd want to go in and enable the Gallery Breadcrumb (start on a gallery, go to the Customizer, and click on the Gallery block, then choose the gallery style(s) you use, and enable the breadcrumb). That would ensure a breadcrumb is always visible, regardless of whether or not Cover Image is ON or OFF.

    You can always drag the Breadcrumb Content Block back in from the list of available content blocks in the "Content" tab of the Customizer.
    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
  • David_S85David_S85 Administrators Posts: 13,167 moderator
    edited May 26, 2016
    OK, thanks, Aaron. That helps since it is reversible. I'll try this on a galley tonight and see how I like it.
    My Smugmug
    "You miss 100% of the shots you don't take" - Wayne Gretzky
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited May 26, 2016
    leftquark wrote: »
    ..
    Your HTML description that includes the "Click to see Map" and your Jump to Dates may be impacted, but I believe I came up with a quick CSS fix for you, though the full description is displayed if Cover Image is OFF, so it might not even be needed.
    ...
    The one impact to you, Allen, is that we'll be hiding the "Current Gallery" (which you have emphasized and in Yellow), since the Gallery Title is now part of the Gallery Header. If you want it to be yellow, I can help create some CSS for you to turn the new Gallery Title to the yellow color of your choosing.
    ...
    I have the CSS you supplied saved so just a matter of adding it, I hope.
    Yellow is actually gold :D, I'll have to wait and see what happens here.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • photoclickphotoclick Registered Users Posts: 278 Major grins
    edited May 31, 2016
    How will it all look on mobile device?
  • Djm3006Djm3006 Registered Users Posts: 226 Major grins
    edited May 31, 2016
    leftquark wrote: »
    Update: The current plan is to push this live sometime on Monday.

    Morning, Hope you all had a great weekend. what day are you looking at now? and are you going to do a bulk email with the info to everyone.
  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited May 31, 2016
    Well after the long awaited change I got'a say it looks like crap. At least 1045 galleries destroyed.

    I could probably get most of the colors, text and alignment fixed but that huge ugly buy button has to go.

    All that moving the gallery name does is add extra distance down to the photos.


    BTW leftquark, this is with the CSS you created in my theme. Does not seem to have any effect.

    STOP!!! Holy $#^^$#, the new config just disappeared??
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited May 31, 2016
    photoclick wrote: »
    How will it all look on mobile device?

    Here's how the gallery looks with a long description:
    IMG_5267-M.png

    And clicking "read more":
    IMG_5268-M.png
    Djm3006 wrote: »
    Morning, Hope you all had a great weekend. what day are you looking at now? and are you going to do a bulk email with the info to everyone.
    We decided not to push it on Memorial Day. We're begun pushing the release and it will take a few hours. You should see it go live tomorrow (Wednesday). I'll give you an update tomorrow afternoon, if it's live or with a new ECD!
    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
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited June 1, 2016
    Allen wrote: »
    the new config just disappeared??
    We went to push today but realized we had to make some infrastructure changes first -- those will happen tonight and the full push will go out Wednesday morning.
    Allen wrote: »
    I could probably get most of the colors, text and alignment fixed but that huge ugly buy button has to go.
    The new, larger buttons look much better than the older previous ones and have also been the same buttons that you've seen in the screenshots posted previously. The button can always be configured with CSS if you'd prefer them to be smaller.
    Allen wrote: »
    All that moving the gallery name does is add extra distance down to the photos.
    In the old Gallery Header the buttons covered the Gallery Description, so we had to push the buttons and the rest of the gallery down. The new Header allocates space for the buttons and the description to exist together, so some of the space of the Gallery Title is erased by not having to push things down for the buttons. The net effect is only a small amount of pushing the photos down. We've adjusted the gallery slightly so that SM Style galleries still try to keep part of the photo title visible.
    Allen wrote: »
    BTW leftquark, this is with the CSS you created in my theme. Does not seem to have any effect.
    We'll have to evaluate what's going on when we push this live tomorrow. I'll be around to help!
    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
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited June 1, 2016
    The new header and cover photo are now love.

    Allen, we can work on your CSS. Just let me know what you'd like to change.
    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
  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 moderator
    edited June 1, 2016
    Aaron -
    Can the sizes of the title, the slideshow and buy button be changed?

    I've tried to change the title to be smaller but I'm missing something, it doesn't seem to change (so clearly I have the wrong CSS). I find the buttons to be glaring. I know, I want people to see the buttons, but I prefer them to be smaller.

    I'd like both buttons smaller, and I would prefer the buy button just say "buy" not "buy photos". And I'd like control over the size of the title.

    Also, I just checked my settings for collage landscape galleries and it appears the "buy button style" and "buy button size" entries are no longer active. I'd prefer to change the style with a setting, but the small setting and the large setting show the same size, both too large.

    Can you help with CSS?

    Thanks!

    --- Denise


    ...updated...
    oh, interesting. The galleries look much better even with the larger font if the gallery cover image is turned on.

    I'd still like control over the sizes though - especially since I will likely have a mix of cover image on and off.
  • Djm3006Djm3006 Registered Users Posts: 226 Major grins
    edited June 1, 2016
    Aaron -
    Can the sizes of the title, the slideshow and buy button be changed?

    I've tried to change the title to be smaller but I'm missing something, it doesn't seem to change (so clearly I have the wrong CSS). I find the buttons to be glaring. I know, I want people to see the buttons, but I prefer them to be smaller.

    I'd like both buttons smaller, and I would prefer the buy button just say "buy" not "buy photos". And I'd like control over the size of the title.

    Also, I just checked my settings for collage landscape galleries and it appears the "buy button style" and "buy button size" entries are no longer active. I'd prefer to change the style with a setting, but the small setting and the large setting show the same size, both too large.

    Can you help with CSS?


    Thanks!

    --- Denise

    with you on that also, other wise I like it
  • W.W. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited June 1, 2016
    leftquark wrote: »
    The new header and cover photo are now love.
    I'm not loving that my breadcrumbs are suddenly not displaying fully. Could that be an unexpected consequence of the Gallery Header/Cover Image rollout?

    Yes, I've lodged a support call, but the help folk aren't always told these things.
  • Lille UlvenLille Ulven Registered Users Posts: 567 Major grins
    edited June 1, 2016
    @leftquark: Thanks for the info :) After some minor adaptions to all galleries of mine, it now looks pretty beautiful.
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited June 1, 2016
    I've tried to change the title to be smaller but I'm missing something

    You can use this code to change the font size of the Gallery Title:
    /* Change the font size of the Gallery Title */
    .sm-gallery-cover-title {
        font-size: 24px !important;
    }
    
    I find the buttons to be glaring. I know, I want people to see the buttons, but I prefer them to be smaller. I'd like both buttons smaller.

    You can tweak this code to change the sizes as you desire:
    /* Make the slideshow, download and buy buttons smaller */
    .sm-gallery-cover .sm-button-size-large {
        line-height: 24px !important;
    }
    
    .sm-gallery-cover .sm-gallery-cover-headerbuttons .sm-button-size-large {
        padding: 9px 10px 4px !important;
    }
    
    I would prefer the buy button just say "buy" not "buy photos".
    I've updated the code to change the "Buy Photos" button text: http://www.aaronmphotography.com/Customizations/Gallery/Buttons/Add-to-Cart-Button
    /* 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';
        font-family: Roboto Condensed,Roboto, Helvetica, Arial, sans-serif;
        margin-left: 10px;
    }
    
    Also, I just checked my settings for collage landscape galleries and it appears the "buy button style" and "buy button size" entries are no longer active. I'd prefer to change the style with a setting, but the small setting and the large setting show the same size, both too large.
    Let me look into this.
    I'm not loving that my breadcrumbs are suddenly not displaying fully. Could that be an unexpected consequence of the Gallery Header/Cover Image rollout?
    If you're on a gallery, the current page (the title of the gallery) is now displayed below the breadcrumb. I would recommend you remove your Breadcrumb CB and turn on the Gallery Breadcrumb in the Customization settings for each of the gallery styles -- it'll look nicer. We wanted to emphasize the gallery title and felt the navigation elements of the breadcrumb were not the right place for the title.
    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
  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 moderator
    edited June 1, 2016
    leftquark wrote: »
    You can use this code to change the font size of the Gallery Title:
    .....
    Thanks! I'll try the CSS and post back if I have problems.

    --- Denise
  • W.W. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited June 1, 2016
    @leftquark: Thanks for the info :) After some minor adaptions to all galleries of mine, it now looks pretty beautiful.
    Uh-oh! eek7.gif

    Does this mean I have to make "minor adaptions to all galleries of mine" just so all my breadcrumbs continue to display correctly, even if I don't or until I implement the new Gallery Header/Cover Image feature? Really? That's scores if not hundreds of galleries I would need to change just to ensure my breadcrumbs display correctly.

    Update: Now seen Aaron's response. Thanks for that Aaron. Will need to look further into this.
  • Lille UlvenLille Ulven Registered Users Posts: 567 Major grins
    edited June 1, 2016
    Uh-oh! eek7.gif

    Does this mean I have to make "minor adaptions to all galleries of mine" just so all my breadcrumbs continue to display correctly, even if I don't or until I implement the new Gallery Header/Cover Image feature? Really? That's scores if not hundreds of galleries I would need to change just to ensure my breadcrumbs display correctly.

    Update: Now seen Aaron's response. Thanks for that Aaron. Will need to look further into this.

    Don't worry, W.W. Webster I had my header taken from the description field and added some formatting to it there too. That didn't look too good with the new code - especially the header then being duplicated in two fonts looked rather stupid. So I figured to use the new code and deactivated my adaptions. And since I was on it I changed my Portfolio-Galleries to use the new Gallery header photo (the normal Galleries of mine cannot use that since they are smugmug galleries and not collage /journal).
    And well I was already on it, so a few minor changes made to the Travel country folders did not harm either :-)

    @leftquark one question though: what is the font you're now using for the new Gallery headers? I'd like to change my Folder titles to the same font to give it a more coherent look :-)
    Thanks in advance!

    Lille Ulven
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • W.W. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited June 1, 2016
    Don't worry, W.W. Webster ...
    Thanks!
  • W.W. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited June 1, 2016
    I take it there is no way to select the slice of the cover image that will be placed into the crop which is displayed? If not, you really need to have an image to use which is close to the cover image aspect ratio if you don't want a bizarre crop to result.

    What is that ratio? And can the cover image reside in another (maybe hidden) gallery somewhere?
  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 moderator
    edited June 1, 2016
    I take it there is no way to select the slice of the cover image that will be placed into the crop which is displayed? If not, you really need to have an image to use which is close to the cover image aspect ratio if you don't want a bizarre crop to result.

    What is that ratio? And can the cover image reside in another (maybe hidden) gallery somewhere?
    The cover image selection is in gallery settings on the appearance tab.

    --- Denise
Sign In or Register to comment.