NEW/UPDATED: Gallery Header / Cover Image

leftquark

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.


Clicking "Read More" will open an overlay, displaying the entire Description:


Turning OFF the Cover Image will make it so the entire Description is displayed:


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:


SmugMug style gallery with a long description:


Turning on Cover Image and setting the photo is done inside Gallery Settings:


The Gallery Breadcrumb can be turned on within the Customizer:


Please feel free to reach out with any questions. I'll update this thread when the changes go live.

photoclick

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?

leftquark

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.

Lille Ulven

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

leftquark

Lille Ulven wrote: »

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:

Lille Ulven

Thanks leftquark, that is good to know!

Allen

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.

leftquark

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.

Hikin' Mike

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!

leftquark

Update: The current plan is to push this live sometime on Monday.

David_S85

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?

leftquark

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.

David_S85

OK, thanks, Aaron. That helps since it is reversible. I'll try this on a galley tonight and see how I like it.

Allen

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 , I'll have to wait and see what happens here.

photoclick

How will it all look on mobile device?

Djm3006

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.

Allen

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??

leftquark

photoclick wrote: »

How will it all look on mobile device?

Here's how the gallery looks with a long description:


And clicking "read more":

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!

leftquark

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!

leftquark

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.

denisegoldberg

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.

Djm3006

denisegoldberg wrote: »

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. Webster

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 Ulven

@leftquark: Thanks for the info After some minor adaptions to all galleries of mine, it now looks pretty beautiful.

leftquark

denisegoldberg wrote: »

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;
}

denisegoldberg wrote: »

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;
}

denisegoldberg wrote: »

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;
}

denisegoldberg wrote: »

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.

W.W. Webster wrote: »

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.

denisegoldberg

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. Webster

Lille Ulven wrote: »

@leftquark: Thanks for the info After some minor adaptions to all galleries of mine, it now looks pretty beautiful.

Uh-oh!

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 Ulven

W.W. Webster wrote: »

Uh-oh!

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

W.W. Webster

Lille Ulven wrote: »

Don't worry, W.W. Webster ...

Thanks!

W.W. Webster

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?

denisegoldberg

W.W. Webster wrote: »

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