NEW/UPDATED: Gallery Header / Cover Image

123457»

Comments

  • akira3dakira3d Digital Artist Palos Verdes, CARegistered Users Posts: 9 Big grins
    edited November 8, 2016
    It's funny, but the way I was using the old cover photo is a little bit backwards from this approach. I actually didn't want to have a header for individual galleries. What I had basically done on my site was use the old cover photo to provide a header for entire folders. I use folders to represent a larger grouping of similar themed content, especially for folders at the top-most level of my site. As such, I felt these groupings deserve a larger heading title, descriptive text, and a bold image. As for galleries, most of the time I just want to present the images themselves.

    Now that the old cover content block has been modified to be based on the profile, I'm finding it difficult to provide a similar treatment for my folders. Perhaps we could have a Folder Header / Cover Image option added to Folder Settings as well?
    akira3D
    Canon 5D Mark II, 30D, EF 16-35mm F2.8/L, EF 70-200mm F2.8/L IS....

    akira3d.com
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,432 Major grins
    edited November 8, 2016
    akira3d wrote: »
    It's funny, but the way I was using the old cover photo is a little bit backwards from this approach. I actually didn't want to have a header for individual galleries. What I had basically done on my site was use the old cover photo to provide a header for entire folders. I use folders to represent a larger grouping of similar themed content, especially for folders at the top-most level of my site. As such, I felt these groupings deserve a larger heading title, descriptive text, and a bold image. As for galleries, most of the time I just want to present the images themselves.

    Now that the old cover content block has been modified to be based on the profile, I'm finding it difficult to provide a similar treatment for my folders. Perhaps we could have a Folder Header / Cover Image option added to Folder Settings as well?

    I would like to see that too. For now, I've customized my site to include a "Folder Cover Image": http://gallery.imagesinthebackcountry.com/Smugmug-customization/Add-Image-Description-Folders
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,781 Many Grins
    edited November 10, 2016
    akira3d wrote: »
    Now that the old cover content block has been modified to be based on the profile, I'm finding it difficult to provide a similar treatment for my folders. Perhaps we could have a Folder Header / Cover Image option added to Folder Settings as well?

    That's been part of the plan, but we wanted to make sure we iterate and get the Gallery Cover settled before we implemented it on Folders. We've still got some work to do on Gallery Cover. Stay tuned!
    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,781 Many Grins

    You can now reposition the Gallery Cover Image. If we are able to detect a Point of Interest within the photo, we'll automatically center it around that, otherwise you can manually move it up, down, left or right. Some photos will only be able to move up/down, and others only left/right depending on their aspect ratio.

    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
  • photoclickphotoclick Major grins Registered Users Posts: 278 Major grins
    THANK YOU!!!!!!!!!!!!!!!!!!!!!! I'm in the car, haven't had a chance to try yet. Can't wait to get to the office and try :smile:
  • photoclickphotoclick Major grins Registered Users Posts: 278 Major grins

    Aaron,
    Finally tried the cover reposition - works great. Thanks again. I noticed something that might be an unintended behavior. Really minor, doesn't bother me at all (I'll explain why) but here are the steps to reproduce:

    Have a a Gallery page with a built-in album widget. Make sure Gallery is Collage Landscape and the Breadcrumb is set to OFF.
    1) Land on such gallery (breadcrumbs are not shown, as per the settings)
    2) Initiate repositioning of the Cover photo
    3) Click Cancel or Save
    4) Upon returning back from the reposition mode the Breadcrumb shows in the upper left.
    5) The good thing is - the Breadcrumb will NOT show if you are logged out. That is why it does not really bother me:)

  • JtringJtring Major grins CaliforniaRegistered Users Posts: 653 Major grins
    edited December 9, 2016

    @leftquark said:
    You can now reposition the Gallery Cover Image. If we are able to detect a Point of Interest within the photo, we'll automatically center it around that, otherwise you can manually move it up, down, left or right. Some photos will only be able to move up/down, and others only left/right depending on their aspect ratio.

    Not sure centering around the point of interest is wise as a general rule. Some of us like the highlight at the 1/3 position. (On the other hand, I don't think you found a POI for any of the few cases on my site I've tested.) I see that erroneous breadcrumb too.

    And see the bug forum. Three in maybe ten or twelve re-positionings that I tried didn't stick: it was back to the old position after a page refresh.

    Edit: Scratch that comment about centering. One can just move the position to wherever. I was somehow thinking you were centering things in the un-movable direction. I don't think that's what you meant.

    Jim Ringland . . . . . jtringl.smugmug.com
  • Lille UlvenLille Ulven Lille Ulven ScandinaviaRegistered Users Posts: 566 Major grins

    What I just noticed – and since I have had close looks on my galleries for the past couple of weeks, I guess I can claim for the moment that this change must have been released within this past week (49) – for those that are using a text-replacement on the Buy button (change "Buy Photos" to something else) in the gallery's header the old code might not work as it did until about a week ago (maybe even yesterday).
    If your code looked something like this
    /**************************************************************/
    /* Add Slideshow text to Slideshow button in Collage galleries/
    /
    Add the word "Slideshow" to the slideshow button in
    the Gallery Header /
    /**************************************************************/
    /
    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: ' ';
    }
    
    @media only screen and (min-width: 968px){
    .sm-gallery-cover-slideshow-button:after {
        content: ' Slideshow';
        margin-left: 15px;
        /*padding-left: 0px;
        border-left: 2px;
        width: 120px;
      font-size: 13px;*/
      width:120px;
    }
    
    .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';
        margin-left: 10px;
        padding-right: 20px;
        width:120px;
      font-size: 13px;
    }
    
    }
    

    using a .sm-gallery-cover-buy-button span:nth-of-type(2) {display:none;} line you would like to change it to:

    /**************************************************************/
    /* Add Slideshow text to Slideshow button in Collage galleries*/
    /* Add the word "Slideshow" to the slideshow button in 
       the Gallery Header                                         */
    /**************************************************************/
    /* Hide the "Buy Photos" text */
    
    
    .sm-gallery-cover-buy-button span:nth-of-type(1) {
        display: none;
    }
    
    /* Change the "Buy Photo" button text */
    .sm-gallery-cover-buy-button:after {
        content: ' ';
    }
    
    @media only screen and (min-width: 968px){
    .sm-gallery-cover-slideshow-button:after {
        content: ' Slideshow';
        margin-left: 15px;
        /*padding-left: 0px;
        border-left: 2px;
        width: 120px;
      font-size: 13px;*/
      width:120px;
    }
    
    .sm-gallery-cover-buy-button span:nth-of-type(1) {
        display: none;
    }
    
    /* Change the "Buy Photo" button text */
    .sm-gallery-cover-buy-button:after {
        content: ' Buy';
        margin-left: 10px;
        padding-right: 20px;
        width:120px;
      font-size: 13px;
    }
    
    }
    

    Effectively changing the
    .sm-gallery-cover-buy-button span:nth-of-type(2) {display:none;}
    into a
    .sm-gallery-cover-buy-button span:nth-of-type(1) {display:none;}

    Did at least the trick for me :)

    Hope this helps you all too.

    Good look and good weekend

    Lille Ulven

    https://www.lilleulven.smugmug.com - The Photos of my travels
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoRegistered Users Posts: 9,976 Major grins

    Am I imagining things? All of a sudden I see a huge ugly brown buy button. I had it modified to a nice smaller one colored coordinated with my page colors.

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • JtringJtring Major grins CaliforniaRegistered Users Posts: 653 Major grins

    @Allen said:
    Am I imagining things? All of a sudden I see a huge ugly brown buy button. I had it modified to a nice smaller one colored coordinated with my page colors.

    Well, mine was blue, but "huge ugly" certainly fits. The latest update changed one of the classes. I had to adjust my buy button code. (I was hiding it.)

    Old:

    .sm-gallery-cover .sm-gallery-cover-headerbuttons .sm-gallery-cover-buy-button {
    display:none;
    }
    

    New:

    .sm-gallery-cover .sm-gallery-cover-buttons .sm-gallery-cover-buy-button {
        display:none;
    }
    
    Jim Ringland . . . . . jtringl.smugmug.com
  • Lille UlvenLille Ulven Lille Ulven ScandinaviaRegistered Users Posts: 566 Major grins

    @Allen I would guess that your code is similar to @Jtring's or mine...just that you also set a different color for it...which I did not

    https://www.lilleulven.smugmug.com - The Photos of my travels
  • brandofamilybrandofamily Just a Guy with a Camera Illinois USARegistered Users Posts: 2,011 Major grins

    Thanks Lille... your simple swap of a 2 for a 1 fixed my button.

  • AllenAllen "tweak 'til it squeaks" St. Louis, MoRegistered Users Posts: 9,976 Major grins

    @Lille Ulven said:
    @Allen I would guess that your code is similar to @Jtring's or mine...just that you also set a different color for it...which I did not

    Got it updated to smaller button, thanks.

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • brandofamilybrandofamily Just a Guy with a Camera Illinois USARegistered Users Posts: 2,011 Major grins

    Allen, how did you make it smaller? I got the custom text back, but the button is still very tall.

  • AllenAllen "tweak 'til it squeaks" St. Louis, MoRegistered Users Posts: 9,976 Major grins
    edited December 10, 2016

    @brandofamily said:
    Allen, how did you make it smaller? I got the custom text back, but the button is still very tall.

    This is the whole lot of what I did. Not sure if it's all needed. Edit: I've no idea how to post code. Also think I settled for different colors then this below.
    example here: http://www.photosbyat.com/Birds/2016-Birding/Birding-2016-November/2016-11-22-RMBS-Area
    ```
    /* start BUY button */
    .sm-gallery-cover-container .sm-gallery-cover-buy-button {
    height: 30px !important;
    line-height: 10px;
    padding: 1px 1px !important;
    background: #999 !important;
    border-radius: 8px;
    overflow: visible;
    }

    .sm-gallery-cover-container .sm-gallery-cover-buy-button:hover {
    background: gold !important;
    }

    .sm-gallery-cover-container .sm-fonticon-large {
    font-size: 16px;
    }

    .sm-gallery-cover-container .sm-button-label {
    font-size: 12px;
    color: #000 !important;
    }

    .sm-gallery-cover-container .sm-icon-large {
    color: #000 !important;
    }

    .sm-page-parentnode-Qm7v4
    .sm-gallery-cover-container .sm-gallery-cover-buttons {
    top: -10px !important;
    }

    /* A-G H-Z galleries*/
    .sm-page-node-CjDm7 .sm-gallery-cover-container
    .sm-gallery-cover-buy-button {
    visibility:visible; }

    .sm-page-node-NJNt4 .sm-gallery-cover-container
    .sm-gallery-cover-buy-button {
    visibility:visible;}

    .sm-page-node-CjDm7 .sm-gallery-cover-container .sm-gallery-cover-buttons,
    .sm-page-node-NJNt4 .sm-gallery-cover-container .sm-gallery-cover-buttons {
    top: -275px !important;
    }

    /* end BUY button */```
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • W.W. WebsterW.W. Webster Happily mirrorfree New ZealandRegistered Users Posts: 3,204 Major grins
    edited December 10, 2016

    @leftquark said:
    You can now reposition the Gallery Cover Image. If we are able to detect a Point of Interest within the photo, we'll automatically center it around that, otherwise you can manually move it up, down, left or right. Some photos will only be able to move up/down, and others only left/right depending on their aspect ratio.

    Excellent, thanks! However, when I saved an adjustment to an existing Gallery Cover Image to try things out, the breadcrumb appeared (a second time) within the Cover Image. I'm happy with just having it (once) above the image. How do I get this result?

  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,781 Many Grins
    edited December 10, 2016

    We've been able to verify the breadcrumb appearing after reposition and hope to have a fix early next week. On the bright side, refreshing the page should make it disappear, as it's supposed to be.

    The issue with it not saving I'm having trouble reproducing. If people could send me a link to a gallery where the cover image reposition won't save, or a link to the photo that isn't having its position set, that would help me investigate further!

    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
  • JtringJtring Major grins CaliforniaRegistered Users Posts: 653 Major grins

    @leftquark said:
    The issue with it not saving I'm having trouble reproducing. If people could send me a link to a gallery where the cover image reposition won't save, or a link to the photo that isn't having its position set, that would help me investigate further!

    See my post in the bug forum. This issue, for me at least, only occurs when I try using a square source image for the cover.

    Jim Ringland . . . . . jtringl.smugmug.com
  • W.W. WebsterW.W. Webster Happily mirrorfree New ZealandRegistered Users Posts: 3,204 Major grins

    @leftquark said:
    We've been able to verify the breadcrumb appearing after reposition and hope to have a fix early next week. On the bright side, refreshing the page should make it disappear, as it's supposed to be.

    Thanks Aaron. Refreshing the page fixes the problem so that's a perfectly adequate workaround in the meantime!

  • Lille UlvenLille Ulven Lille Ulven ScandinaviaRegistered Users Posts: 566 Major grins

    @Allen to format your text into code mark the text and then from the editors top line choose the drop down button from the 6th symbol (looking like a mirrored capital P followed by an I) and from that selection choose "code".

    @brandofamily for making your button smaller I would try this part of @Allen 's code:
    .sm-gallery-cover-container .sm-gallery-cover-buy-button {
    height: 30px !important;
    line-height: 10px;
    } /from my understanding this defines the "button box size"/
    .sm-page-parentnode-Qm7v4
    .sm-gallery-cover-container .sm-gallery-cover-buttons {
    top: -10px !important;
    } /not sure about this one, except that it is moving something 10px further to the top/
    .sm-gallery-cover-container .sm-fonticon-large {
    font-size: 16px;
    } /if the button is smaller the icon shouldn't be too large to fit/

    .sm-gallery-cover-container .sm-button-label {
    font-size: 12px;
    } /*make the font on the button fit the new button size*/
    
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoRegistered Users Posts: 9,976 Major grins
    edited December 10, 2016

    I use Smugmug style galleries so all the CSS applies to that style.
    I had to move the buy button up some for different areas. By default I moved it up 10px because it falls on the line between the gallery description and photos. Two specific galleries with large description info moved a bunch.
    Here's a typical example for a bird gallery (http://www.photosbyat.com/Birds/2012-Birding/Birding-2012-November/2012-11-26-Crossbills-Faust-Pk). It falls in a perfect spot, on the unused space of the gallery title line.

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,781 Many Grins

    @leftquark said:
    We've been able to verify the breadcrumb appearing after reposition and hope to have a fix early next week. On the bright side, refreshing the page should make it disappear, as it's supposed to be.

    The issue with it not saving I'm having trouble reproducing. If people could send me a link to a gallery where the cover image reposition won't save, or a link to the photo that isn't having its position set, that would help me investigate further!

    The issue with the breadcrumb showing up should be fixed

    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
Sign In or Register to comment.