NEW/UPDATED: Gallery Header / Cover Image

24567

Comments

  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 moderator
    edited June 1, 2016
    Aaron -
    Can you supply CSS to add the words "slideshow" to the slideshow button. Somehow I suspect my viewers will not realize a slideshow is available.

    --- Denise
  • W.W. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited June 1, 2016
    The cover image selection is in gallery settings on the appearance tab.
    Thanks, I've found that, Denise. What I'm also asking is whether that can be an otherwise 'hidden' image, and can the crop that is used be selected by the user - or is it just a thin slice taken across the middle of the image - and what is the aspect ratio of that crop?
  • dberthiadberthia Registered Users Posts: 117 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?

    +1. It would sure be great if we could select which part of the image to use.
  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 moderator
    edited June 1, 2016
    Thanks, I've found that, Denise. What I'm also asking is whether that can be an otherwise 'hidden' image, and can the crop that is used be selected by the user - or is it just a thin slice taken across the middle of the image - and what is the aspect ratio of that crop?
    Ah, sorry for missing the real question. I'd like to know the answer to that too, I've been selecting and re-selecting photos until I find one that works.

    --- Denise
  • 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:
    /* Change the font size of the Gallery Title */
    .sm-gallery-cover-title {
        font-size: 24px !important;
    }
    
    Do you know why using a percentage doesn't work properly in this CSS? The reason the CSS I'd tried before I asked for help wasn't working was because I had specified font-size as a percent. I have other CSS where that works, but if I use a percent with this element it shrinks to a really tiny size no matter what percent I use.

    --- Denise
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited June 1, 2016
    The ability to reposition the cover image is in the works. It's something I really wanted to include in the original version but we wanted to get this out in the wild and collect feedback as soon as possible. We'll roll up any feedback in at the same time as pushing out the ability to reposition 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
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited June 1, 2016
    Aaron -
    Can you supply CSS to add the words "slideshow" to the slideshow button.

    You can use the following code to add the "Slideshow" and "Download" text to the buttons.
    /* Add the word "Slideshow" to the slideshow button in the Gallery Header */
    .sm-gallery-cover-slideshow-button:after {
        content: ' Slideshow';
        margin-left: 5px;
    }
    
    /* Add the word "Download" to the Download button in the Gallery Header */
    .sm-gallery-cover-download-button:after {
        content: ' Download';
        margin-left: 5px;
    }
    

    I've also added this code to my Customizations page:
    http://www.aaronmphotography.com/Customizations/Gallery/Buttons/Add-Text-to-Slideshow-Download
    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
  • W.W. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited June 1, 2016
    When an image has been selected as the Cover Image, it would be nice to be able to move the crop around to find the optimum placement, much as Facebook does with their banner images.

    For consistent presentation, it would also be nice to be able to select Cover Images for pages of folders too, not just pages of galleries. Is that planned, I wonder?

    Edit:
    leftquark wrote: »
    The ability to reposition the cover image is in the works. It's something I really wanted to include in the original version but we wanted to get this out in the wild and collect feedback as soon as possible. We'll roll up any feedback in at the same time as pushing out the ability to reposition the cover image.
    Just seen this - thanks!
  • rustybladesrustyblades Registered Users Posts: 120 Major grins
    edited June 1, 2016
    Aaron

    Is there a way to globally turn off the buy button? It's a lot of work to go into each gallery and turn if off at the individual gallery level.

    Thanks
    Paul
  • pmbpropmbpro Registered Users Posts: 236 Major grins
    edited June 1, 2016
    Put colour back onto breadcrumbs 'current page' indicator
    How do I put the specific colour back into my gallery breadcrumbs where the current page is Blue?

    My other folders have it correctly, like this:
    http://www.pmbimages.com/Film-Stills/Portfolio

    Now the actual galleries themselves do not, and are back to all white, like this (which I do NOT want):
    http://www.pmbimages.com/Film-Stills/Portfolio/Recall-2015/


    I'd like my Blue colour breadcrumb back in my galleries so that it is consistent like my folder breadcrumbs. Can someone please help me?

    Thanks.
    pmb images
    Film/TV Stills Photography
    "When your work speaks for itself, don't interrupt." ~ Henry J. Kaiser
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited June 1, 2016
    it would also be nice to be able to select Cover Images for pages of folders too, not just pages of galleries. Is that planned, I wonder?

    Yep - but we wanted to make sure you all like the design of the Cover Image on Galleries before we pushed it everywhere on your site. It's much easier for you to tweak your site and get used to it in pieces, then dropping huge changes in multiple places all at once :)
    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
  • W.W. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited June 1, 2016
    leftquark wrote: »
    Yep - but we wanted to make sure you all like the design of the Cover Image on Galleries before we pushed it everywhere on your site. It's much easier for you to tweak your site and get used to it in pieces, then dropping huge changes in multiple places all at once :)
    Agreed.

    These changes are all good - a giant step forward in truly useful and relevant presentation functionality, I reckon!
  • AllenAllen Registered Users Posts: 10,007 Major grins
    edited June 1, 2016
    leftquark wrote: »
    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.
    Looks like none of my original CSS is active. New classes need added.

    Biggest problem nothing flows, everything goes down to one big pile at phone size.

    WHY is the slideshow button turned back on everywhere???? I had it off.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • AllenAllen Registered Users Posts: 10,007 Major grins
    edited June 1, 2016
    Noticed that breaks
    do not work in new descriptions. You have to at least add
    around text to work.

    Would be nice if you let us know what html will not work now.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • W.W. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited June 1, 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.
  • pbandjpbandj Registered Users Posts: 237 Major grins
    edited June 1, 2016
    pmbpro wrote: »

    I'd like my Blue colour breadcrumb back in my galleries so that it is consistent like my folder breadcrumbs. Can someone please help me?

    Thanks.

    I have a similar question. The other links on my site (in the menu, the "login" link, the folder breadcrumb, etc.) all follow my theme, which means they're a slightly grey color. When I try to swap out the gallery breadcrumb for the breadcrumb content block, the gallery breadcrumb just displays everything white.

    I'd rather that the gallery breadcrumb honor the theme so I don't need CSS to fix the color...
  • pmbpropmbpro Registered Users Posts: 236 Major grins
    edited June 2, 2016
    pbandj wrote: »
    I have a similar question. The other links on my site (in the menu, the "login" link, the folder breadcrumb, etc.) all follow my theme, which means they're a slightly grey color. When I try to swap out the gallery breadcrumb for the breadcrumb content block, the gallery breadcrumb just displays everything white.

    I'd rather that the gallery breadcrumb honor the theme so I don't need CSS to fix the color...

    I agree. That should have been an option. I don't mind changing the overall CSS one time though, as long as it can be fixed.

    I had this:

    /*Change colour of Breadcrumbs*/
    sm-breadcrumbs .sm-breadcrumb {
        font-weight: normal;
        color: #00c4ff!important;
        }
    
    /*Change the colors of the separators…*/
    .sm-breadcrumbs ::before {
    color:#D8DADE
    } 
    .sm-breadcrumbs li:nth-of-type(4) {
    color:#00C4FF !important
    }
    
    


    But I hope it can be replaced. I have no idea what other code will be useless now.
    pmb images
    Film/TV Stills Photography
    "When your work speaks for itself, don't interrupt." ~ Henry J. Kaiser
  • AllenAllen Registered Users Posts: 10,007 Major grins
    edited June 2, 2016
    There is a missing period on this rule. Probably did not work.

    /*Change colour of Breadcrumbs*/
    .sm-breadcrumbs .sm-breadcrumb {
    font-weight: normal; color: #00c4ff!important;
    }
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • AllenAllen Registered Users Posts: 10,007 Major grins
    edited June 2, 2016
    leftquark wrote: »
    ...
    Allen, we can work on your CSS. Just let me know what you'd like to change.
    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
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • AceCo55AceCo55 Registered Users Posts: 950 Major grins
    edited June 2, 2016
    I must admit that I wasn't aware the new change was going to affect the breadcrumb so dramatically whether you choose to use the new Cover Image option.
    It has caught me by surprise - and, in my situation, it just uses up vertical screen space for little gain. (YMMV)

    1) is there a way to get the Gallery Name back on the same line as the rest of the Breadcrumb?


    2) you can turn off the Gallery Name by using this:
    /* Hide the Gallery Title */
    .sm-gallery-cover-title {
    display: none !important;
    }
    but the breadcrumb in the Breadcrumb Content Block doesn't pick up my old css to emphasise the last entry. This code was:
    /*enhance the last entry of breadcrumb */
    .sm-user-ui .sm-breadcrumb h1 {
    color: #fbd713;
    font-size: 18px;
    }

    3) This is my solution in the interim (hopefully I can get the whole breadcrumb back on one line with the last entry coloured)
    /* Change the font size and font color of the Gallery Title */
    .sm-gallery-cover-title {
    color: #fbd713 !important;
    font-size: 18px !important;
    }

    I do not want the Gallery Title on a new line. My colour on the last entry emphasised the breadcrumb exactly how I wanted it.
    My opinion does not necessarily make it true. What you do with my opinion is entirely up to you.
    www.acecootephotography.com
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited June 2, 2016
    Big disappointment here (no surprise).

    I was hoping to have a selection of photo sizes/formats (2:3, 1:3 etc) for the gallery header. Currently I'm using some HTML in the gallery description section to display a picture (feature) for each gallery. Looks like I will have to continue using it.
  • pmbpropmbpro Registered Users Posts: 236 Major grins
    edited June 2, 2016
    Allen wrote: »
    There is a missing period on this rule. Probably did not work.

    /*Change colour of Breadcrumbs*/
    .sm-breadcrumbs .sm-breadcrumb {
    font-weight: normal; color: #00c4ff!important;
    }

    Hi Allen,

    Thanks. I went back to check my code and add the period, only to find that apparently it already did have that period in it (not sure why it disappeared when I pasted it in this thread headscratch.gif).
    Unfortunately, it didn't work.

    I have no idea what else to change, or why the code no longer works. ne_nau.gif
    pmb images
    Film/TV Stills Photography
    "When your work speaks for itself, don't interrupt." ~ Henry J. Kaiser
  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 moderator
    edited June 2, 2016
    This change initially shocked me. Based on leftquark's initial post in this thread I expected it to be a good addition, but the size of the font chosen for the title and the fact that the cover image was turned off (which makes sense to me, giving me the choice to enable it in galleries) didn't initially give me a look that I liked.

    I tried a CSS change to make the title smaller. When that didn't work - apparently because I was using a percentage instead of pixels - I asked for help. leftquark provided CSS that worked, I did a bit of experimenting, and I started turning gallery cover images on.

    I'm very happy with this change (with a couple of tweaks), and I look forward to the tweaks promised on the selection of the part of the image used for the cover image.

    leftquark
    -
    please pass my thanks on to your team!

    My initial impressions can be seen in my blog post product review :: new SmugMug gallery header.

    --- Denise
  • RichardRichard Administrators, Vanilla Admin Posts: 19,893 moderator
    edited June 2, 2016
    I just looked at my site and the new headers have made rather a mess of things. Not happy. I had other plans for tomorrow.
  • rustybladesrustyblades Registered Users Posts: 120 Major grins
    edited June 2, 2016
    Aaron

    Is there a way to globally turn off the buy button? It's a lot of work to go into each gallery and turn if off at the individual gallery level.

    No action needed. I figured out how to do it. I turned it off using CSS at the top level.

    Paul
  • pmbpropmbpro Registered Users Posts: 236 Major grins
    edited June 2, 2016
    Richard wrote: »
    I just looked at my site and the new headers have made rather a mess of things. Not happy. I had other plans for tomorrow.

    Yeah, this happened at a time when some producers were looking at my site for some potential projects I was after, too. I was lucky that the 'mess' was relatively minor compared to some others.

    I'm just trying to figure out how to get my Blue breadcrumb back into my galleries again.
    pmb images
    Film/TV Stills Photography
    "When your work speaks for itself, don't interrupt." ~ Henry J. Kaiser
  • RichardRichard Administrators, Vanilla Admin Posts: 19,893 moderator
    edited June 2, 2016
    pmbpro wrote: »
    Yeah, this happened at a time when some producers were looking at my site for some potential projects I was after, too. I was lucky that the 'mess' was relatively minor compared to some others.

    I'm just trying to figure out how to get my Blue breadcrumb back into my galleries again.
    I found the solutions to most of my problems earlier in this thread, I'm glad to say. I can't say that the changed headers have done me any good so far--perhaps they will in the future, dunno--but at least the damage has been repaired quickly.
  • AllenAllen Registered Users Posts: 10,007 Major grins
    edited June 2, 2016
    pmbpro wrote: »
    ...
    I'm just trying to figure out how to get my Blue breadcrumb back into my galleries again.
    Try this in "all galleries" CSS.
    .sm-gallery-cover-breadcrumbs .sm-breadcrumbs li:nth-of-type(4) a {
        color: #00C4FF !important;
    }
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • pmbpropmbpro Registered Users Posts: 236 Major grins
    edited June 2, 2016
    Allen wrote: »
    Try this in "all galleries" CSS.
    .sm-gallery-cover-breadcrumbs .sm-breadcrumbs li:nth-of-type(4) a {
        color: #00C4FF !important;
    }
    

    Hi Allen,

    Thanks for the code. For some reason, it does not work. Not only that, but:

    1. The folder levels are no longer Blue, like they already were; and
    2. The Gallery Name itself is completely gone!

    I hadn't changed anything in the code since I'd last posted here, so I have no idea why the gallery name would be gone now, nor the folder level Blue colour would disappear.

    Am I missing something?

    This link's breadcrumb is supposed to say "Recall 2015", but it only stops at the previous folder level now (which is now White).

    http://www.pmbimages.com/Film-Stills/Portfolio/Recall-2015/

    I'm stumped by this now too. Is there something to that code where it can bring these elements back? headscratch.gif
    pmb images
    Film/TV Stills Photography
    "When your work speaks for itself, don't interrupt." ~ Henry J. Kaiser
Sign In or Register to comment.