NEW/UPDATED: Gallery Header / Cover Image

akira3d

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?

Hikin' Mike

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

leftquark

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!

leftquark

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.

photoclick

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

photoclick

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:)

Jtring

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

Lille Ulven

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

Allen

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.

Jtring

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

Lille Ulven

@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

brandofamily

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

Allen

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

brandofamily

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

Allen

@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 */```

W.W. Webster

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

leftquark

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!

Jtring

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

W.W. Webster

@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 Ulven

@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*/

Allen

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.

leftquark

@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