Smugmug Style gap

Allen · September 18, 2015

Why all of a sudden is there a huge gap between the gallery description and photo content in a
Smugmug Style gallery. I have done nothing with CSS for some time now.

It is VERY noticeable and shocked me when I just discovered it a few minutes ago. I've been working in
many galleries today with captions an KW's and when just now switching pages this stuck out like a
sore thumb. Did something Smug just did on the sites caused this? I've had the buy button on the right
end of the gallery description forever and it was working great.

denisegoldberg · September 18, 2015

I don't think it's just smugmug style. The slideshow and buy photos buttons are on a line under the description - I thought they shared the line with the description before. Most of my galleries are in collage landscape but I just checked a journal style gallery and that is showing the same behavior.

--- Denise

Allen · September 18, 2015

I turned the slideshow button off because it was next to the buy button in the gallery description. The buy button
alone took about 20% of the description width. I had to adjust all my gallery description widths to 80% to accommodate
the buy button. Now it has slid down below the description area and is moving the gallery content with it.

Edit: 90% width because I made the buy button smaller. If you look at my screen shot you'll see where it fits.

Allen · September 18, 2015

Another thing this does is pushes the main photo partially out the bottom of the widow/screen which is
completely against what Smug has been preaching. This is how a page loads now.

leftquark · September 19, 2015

When we released the Download All feature it added a 3rd button to the Slideshow and Buy buttons and caused long gallery descriptions to overlap. As a temporary fix to prevent them from overlapping we moved the 3 buttons down. This accounts for the increased space.

This is also a good time to mention that we're working on update to the gallery header (the breadcrumb, gallery title, description and buttons). It will be a fairly significant design change from the current header but our design team did a great job making it look great. There will be entirely new CSS class names so that it won't interfere with any of your old CSS. I'll try to give you ample heads-up before it goes live so you can review it and personalize as you desire!

Allen · September 19, 2015

leftquark wrote: »

When we released the Download All feature it added a 3rd button to the Slideshow and Buy buttons and caused long gallery descriptions to overlap. As a temporary fix to prevent them from overlapping we moved the 3 buttons down. This accounts for the increased space.

This is also a good time to mention that we're working on update to the gallery header (the breadcrumb, gallery title, description and buttons). It will be a fairly significant design change from the current header but our design team did a great job making it look great. There will be entirely new CSS class names so that it won't interfere with any of your old CSS. I'll try to give you ample heads-up before it goes live so you can review it and personalize as you desire!

So, is this something we have to fix? Or do we leave it borked and look terrible?

Came up with this temporary fix but many pages would need slightly different numbers depending on number
of buttons and even whether there is a description.

.sm-gallery-headerbuttons {
margin: -65px 3px 0 0;
float:right;
}

leftquark · September 19, 2015

Allen wrote: »

So, is this something we have to fix? Or do we leave it borked and look terrible?

I think you'll want to fix now. The change will be fairly significant and will probably require you to redo it again but as always, the Heroes and I are here to help (though you're an expert with CSS these days, so you probably won't need our help).

I realize that having to continuously change your CSS is frustrating, however, we have to remember that for SmugMug to grow and improve, we have to at times make changes that will impact custom CSS. There is always risk with using Customizations to SmugMug. We suffered from this issue in Old SmugMug (with JavaScript AND custom CSS) and it held us from improving SmugMug. We're going to try to minimize the impact to customizations and I'll try to give you as much heads up / warning when there are issues that will impact you.

Allen · September 19, 2015

leftquark wrote: »

I think you'll want to fix now. The change will be fairly significant and will probably require you to redo it again but as always, the Heroes and I are here to help (though you're an expert with CSS these days, so you probably won't need our help).

I realize that having to continuously change your CSS is frustrating, however, we have to remember that for SmugMug to grow and improve, we have to at times make changes that will impact custom CSS. There is always risk with using Customizations to SmugMug. We suffered from this issue in Old SmugMug (with JavaScript AND custom CSS) and it held us from improving SmugMug. We're going to try to minimize the impact to customizations and I'll try to give you as much heads up / warning when there are issues that will impact you.

I don't mind changing CSS, it's like working a puzzle and somewhat fun, although frustrating
sometimes. I hate seeing things borked with no warning of changes.

Moving the buttons also moves the gallery content. So really large descriptions could be a challenge
vs small descriptions or no description. I do not want to go thru a 1000 or more galleries having to
make some Custom because a general CSS rule doesn't work for all.

I've tried CSS, this seems to work most places. But only if there is a description, then it's completely
borked if none. Buttons override top menu. Have not checked very large descriptions.

Experimental CSS

   /* moves all buttons up */
.sm-gallery-headerbuttons {
margin: -65px 3px 0 0;
float:right;
}
   /* fine tune buttons with BUY */
.sm-gallery-download-button,
.sm-gallery-slideshow-button {
position:relative;
top: -15px;
left: 15px;
}

Family galleries are a nightmare, most have no description. I would have to go thru 100's of galleries adding a description.

   /* flow down from top folder */
.sm-page-parentnode-NcgwK .sm-gallery-headerbuttons {
margin: -55px 3px 0 0;
float:right;
}

leftquark · September 19, 2015

I believe all we did was push it down a certain number of pixels. Waiting to confirm..... I'll get back to you.

Allen · September 19, 2015

I would not mind if the buttons were placed inside the description div and positioned top or bottom right
with all in description flowing around them.

leftquark · September 19, 2015

For your case of with descriptiosn and without descriptions ... you can use "sm-gallery-header-has-description" for the class name when there is a description ... for example ... ".sm-gallery-header .sm-gallery-header-has-description .sm-gallery-description { // some code }"

I believe this code should undo what we did:

.sm-gallery-header .sm-gallery-headerbuttons {
    position: absolute !important;
    right: 0 !important;
    bottom: 12px !important;
    margin-bottom: 0px !important;
}

 .sm-gallery-header .sm-gallery-description {
    margin: 0 264px 8px 0 !important;
}

leftquark · September 19, 2015

It might need bottom: 0px instead of 12px in that first bit ... i'm having a hard time determining ... on my own site it needed 0px.

zbreeze · September 19, 2015

I do not find CSS a puzzle to solve and do not enjoy changing it when smugmug changes things; some of the customization I have is vital for my many year old site and. "Improvements" that break sites are horrible. I am terribly frustrated with the direction smugmug is taking.

Allen · September 19, 2015

leftquark wrote: »

It might need bottom: 0px instead of 12px in that first bit ... i'm having a hard time determining ... on my own site it needed 0px.

Here's what I ended up with.
No space between these class names, guess in same tag.
.sm-gallery-header.sm-gallery-header-has-description
Combinations because of descriptions or not. Button position tweaks. Specific Family top folder flow down.

.sm-gallery-header.sm-gallery-header-has-description
  .sm-gallery-headerbuttons{
  position:absolute!important;
        right:0!important;
        bottom:10px!important;
        margin-bottom:0!important
  }

.sm-gallery-header.sm-gallery-header-has-description
  .sm-gallery-description{
    margin:0 264px 8px 0!important
  }
          /* family no descriptions section */
.sm-page-parentnode-NcgwK .sm-gallery-header
 .sm-gallery-headerbuttons {
position:relative;
top: 11px!important;
left: -5px!important;
}

.sm-page-parentnode-NcgwK 
 .sm-gallery-header
 .sm-gallery-download-button {
   position:relative!important;
   top: -15px!important;
   left: 5px!important
 }
      
.sm-page-parentnode-NcgwK 
 .sm-gallery-header
 .sm-gallery-slideshow-button {
   position:relative!important;
   top: -15px!important;
   left: 8px!important
 }
          /* family has descriptions section */
.sm-page-parentnode-NcgwK 
 .sm-gallery-header.sm-gallery-header-has-description
 .sm-gallery-headerbuttons {
position:relative;
top: 5px!important;
left: 15px!important;
}

.sm-page-parentnode-NcgwK 
 .sm-gallery-header.sm-gallery-header-has-description
 .sm-gallery-download-button {
   position:relative!important;
   top: -16px!important;
   left: 15px!important
 }
      
  .sm-page-parentnode-NcgwK 
 .sm-gallery-header.sm-gallery-header-has-description
 .sm-gallery-slideshow-button {
   position:relative!important;
   top: -16px!important;
   left: 18px!important
 }

leftquark · September 19, 2015

zbreeze wrote: »

"Improvements" that break sites are horrible. I am terribly frustrated with the direction smugmug is taking.

You have to remember that any time you change the way SmugMug has formatted the site, you're actively accepting the risk involved that we may change things in the future. We can't hold back improvements to the site for 99% of SmugMug customers for fear of breaking someone's customization. Would you prefer that we never grow SmugMug? What about the thousands of feature requests from people who wish we would implement them? We want to make SmugMug be even better and sometimes that means making changes to the design, especially as trends change and designs need to be updated and improved. We're doing our best to roll out changes using different class names, so they don't impact your customizations, but sometimes they'll do that. And when that happens, we have a great team of Support Heroes and DGrin guru's that are here to help fix anything. Feel free to monitor the "Product News" forum, where I'll be posting updates more frequently, as well as giving early warning (when I can) on changes that may impact customizations.

pbandj · September 20, 2015

This seems like it reduces the space available for the main photo in Smugmug Gallery style...I've already got a problem with having captions below the fold (and my header doesn't seem that large). This either pushes stuff further down on the page or makes the thumbnails and content smaller.

Allen · September 21, 2015

pbandj wrote: »

This seems like it reduces the space available for the main photo in Smugmug Gallery style...I've already got a problem with having captions below the fold (and my header doesn't seem that large). This either pushes stuff further down on the page or makes the thumbnails and content smaller.

On my site after moving the button back up the gallery below seems normal now. I do not see what you're seeing.

Allen · September 21, 2015

I have two identical type content Custom galleries, on one gallery, H-Z, the BUY button will not move up. FF, IE and Chrome same.
Compared both galleries. Looked at two html boxes above default gallery content.
I've checked layout, both html box margins, both identical.
2nd html box, identical content except for links back and forth.

Each "Just This Gallery" CSS identical.
CSS "entire site" nothing unique for these two galleries
CSS "all galleries" contains Button move CSS from this thread. Confirmed that it applies to
these two "Just This Gallery" galleries despite the denial in this thread. I only added the
move CSS to "all galleries" and it affected galleries made Custom.

http://www.photosbyat.com/Birds/Missouri-Bird-Photos-A-G
http://www.photosbyat.com/Birds/Missouri-Bird-Photos-H-Z << bad BUY button placement

I'm at a lost as to why the buttons don't react the same. Any help would be appreciated.
Thanks

Edit: It's the little things that make customization so complicated. The move CSS I used relied on .sm-gallery-header-has-description. I
hid the description on these two galleries because it's not needed. But, I had one blank, so the simplest of things can interfere with your
"best laid plans". Once I added in a description every thing fell in line. Duh

jchin · September 22, 2015

@Allen,

I have a crazy idea. Why not try to make the "minimum" width 1024px, the width of your header image?

.sm-page-layout-region-top,
.sm-page-layout-region-bottom { min-width: 1024px; }

Allen · September 22, 2015

jchin wrote: »
@Allen,

I have a crazy idea. Why not try to make the "minimum" width 1024px, the width of your header image?
.sm-page-layout-region-top,
.sm-page-layout-region-bottom { min-width: 1024px; }

Not sure how this relates to the problem I had.

jchin · September 22, 2015

Allen wrote: »

Not sure how this relates to the problem I had.

I read something above where you said you site was wrapping the top section.
Or was I seeing things.
I was just thinking maybe some CSS can help that by specifying a minimum width to prevent that.

Smugmug Style gap

Comments