Gallery page content doesn't always fit vertically!
Apipes
Registered Users Posts: 20 Big grins
I'm having this problem on all of my gallery pages -- no matter how large I make my browser window (and I'm sitting in front of a HUGE desktop monitor), frequently I cannot see all of the vertical content of my gallery page unless I use the scroll bar -- either my logo or the footer is frequently scrolled off the page.
Any insights on what I can modify/look at so I can see everything? I've also checked this on a couple different browsers (Firefox, IE) and the undesired behavior is consistent.
This wasn't a problem on the old smugmug -- maybe I inadvertently changed a setting somewhere?
I'm using the Smugmug style. Here is an example page/gallery:
http://www.arleenpiperphotography.com/Galleries/Gallery-1/i-HkGkBBX
On a side note, when I display the filename (don't want the caption or title), it is way off to the left and several lines down -- this makes my page even taller, and causes even more not to be seen vertically.
Any way to center a filename and bring it up a few lines?
Any insights on what I can modify/look at so I can see everything? I've also checked this on a couple different browsers (Firefox, IE) and the undesired behavior is consistent.
This wasn't a problem on the old smugmug -- maybe I inadvertently changed a setting somewhere?
I'm using the Smugmug style. Here is an example page/gallery:
http://www.arleenpiperphotography.com/Galleries/Gallery-1/i-HkGkBBX
On a side note, when I display the filename (don't want the caption or title), it is way off to the left and several lines down -- this makes my page even taller, and causes even more not to be seen vertically.
Any way to center a filename and bring it up a few lines?
0
Comments
- Make your header smaller--use a smaller font.
- Reduce the vertical space between elements by changing the top and bottom margins in the dimensions tab. Set the bottom margins of your header and gallery to zero and the top margin of the gallery to zero as well.
- Experiment with setting the top margin of the gallery to something negative, say -15px. You can gain a few pixels this way, but you need to exercise caution because if you go too far, it might look good but your menu will stop being clickable.
- Change your footer so that your part occupies one line, not two. Consider putting your copyright and the SM mini on one line, with your copyright left justified and the SM bit on the right.
If none of that does the trick, or if you simply don't like the way it looks, you could try replacing the SM header (I'm guessing that's what you're using) with a custom header consisting of your logo and a horizontal menu, and making it site wide. That would likely make it possible to reduce the space between the menu and the logo, using the top and bottom margin tweaks above.I'd wait a bit on all of this to give others a chance to offer suggestions that solve your problem with a single changed setting
If you haven't approached the help desk on this one, do so. Maybe a chat so you can work interactively. This looks like buggy SmugMug behavior to me.
I was looking at your site with different browsers and with the different size windows and I saw some real inconsistent behavior: sometimes everything fits, sometimes a huge collection of thumbnails pushes everything down. Smaller windows are often better behaved than big ones. Chrome seems much more liable to do weird things than Firefox. Full-screen (F11) Firefox seems the one sizing that seems well-behaved. For reference, I'm on a 1920 x 1200 monitor. This all looks like bad SmugMug behavior to me. They had problems early on with SmugMug gallery layouts and perhaps some of the old problems are still there (or new ones arrived later) for galleries full of L-sized images like yours.
Thanks so much for your suggestions! I'll look into them!
I went ahead and asked the Smug folks. The first time they indicated that my logo may be too large (which could make sense if I was only having the problem on smaller-sized windows, but doesn't make sense when seeing the problem on larger windows). When I mentioned that in a reply, they then suggested maybe I was zoomed in on that given browser. I checked and that wasn't the case either.... Not sure if it's worth trying a third time or not. They're probably swamped with folks converting as the clock winds down on legacy and are wanting to spend more time on more critical issues... It's not a huge issue, but annoying... A previous poster had some suggestions I was going to look into to see if any of those suggestions may help. Thanks so much for verifying it's not just me seeing this!
I have checked your website on a 27" monitor - this is what I see:
http://take.ms/MjYUN
No scrolling needed.
That's about what I saw in some cases, but I can't agree that no scrolling is needed or that this represents desirable behavior. The caption and the control arrows below the main image are off the page even though there is a very large amount of open space below the thumbnails and image. The thumbnail page indication requires a scroll-down too, as does the footer.
I really think there's still a SmugMug gallery layout problem.
This is a normal behaviour if you have quite high logo. The gallery is not designed to fit automatically with the header in the screen. Some users also add more content blocks to the header of their site - that would make the gallery look very small on some screen - if we would force it to fit the screen automatically.
-- maybe this is my problem???: I don't have my logo in the header area. (I have no site-wide info in my header). I have my logo as a "single photo" on my homepage (customized page), and then as a single photo on "all galleries".
Could that be causing any type of issues/inconsistencies here?
I made it smaller (I changed the height of my logo from 175 pixels to 125 pixels on this internal page:
http://www.arleenpiperphotography.com/Portraits/Arleen-Piper-Photography/2015-0703-Hunter/n-WfS2kR/
but am still seeing seeing the "need to scroll to see everything" problem...
You should also look at your site on smaller devices since your viewers are likely to be using phones or tablets. This site can give you a good idea of how your site looks on different device types - http://quirktools.com/screenfly/. When I look at your site on a phone your logo and menu take up half the available vertical space if the phone is held in portrait mode and easily 3/4 of the vertical space if the phone is held in landscape mode.
I recommend that you change your About page from a gallery to a page. Right now it shows "gallery is empty" at the bottom of the page. It also shows your text in a dark gray box against a black background. Either make the colors match or change the text background to something that appears to be a deliberate color choice.
--- Denise
Musings & ramblings at https://denisegoldberg.blogspot.com
Denise - Thanks so much for your input. Indeed I have no idea why I didn't do my logo as site-wide in the header. I think it was just how I started messing with things when in sandbox mode and never went back to fix it thinking I could mess things up and it would be a lot of trouble (to take care of "one day"). Because it could be the source of some of my issues, I just went back in and fixed it to be a site-wide fix -- wasn't actually that big of a deal.
As for my "about" page -- I thought I had fixed that page, but must have missed a "site wide change" and you were looking at my old one. I had updated that page just a couple days ago. If you refresh and go to it again, it should be good now (let me know if you see otherwise).
As for your small device comment -- I totally agree with your observations. On my computer, my main menu is horizontal. On a small device, my main menu is vertical and takes up way too much space. On the legacy version, it displayed the same on both types of devices. Do you know how to get my menu to display horizontally on a small device? That would restore a lot of real estate!!!
On the menu for a small device, I recommend that you set Collapse for Mobile to on. That will collapse your menu into 1 item, clicking on it will expand it. That setting is on the basic tab of your menu. (If you want to see how the collapsed menu behaves before setting it for your site, take a look at my site on a phone.)
--- Denise
Musings & ramblings at https://denisegoldberg.blogspot.com
Thanks for the "collapse" tip for mobile. I just set that, and it does look better/provide more room for other stuff!
I have two other customization questions -- I'm not sure if I should continue in this thread or start another since I'm a newbie poster -- I'll put them here and then let me know if you think I should start afresh
1) on Mobile devices, with the SmugMug gallery style, when I display a gallery, I lose my "big picture" -- it's all just thumbnails displayed. On the legacy version, I used to still see both. Is it possible to still generate that big picture on a mobile device? (Here's my example link: http://www.arleenpiperphotography.com/Galleries/Gallery-1/
2) When displaying a gallery that displays the filename of the big picture (SmugMug Gallery style) as in this one:
http://www.arleenpiperphotography.com/Portraits/Arleen-Piper-Photography/2015-0703-Hunter/n-WfS2kR/i-Xbfm2Hj
-- the filename is way out to the left of the picture. I really want it centered under the picture (e.g., directly under the picture left/right arrows). I never display comments, titles, or any other information under the picture. I believe that the filename is displayed via the "caption" property...
I've seen various CSS lines/blogs/discussions that I thought might work and nothing I try even moves over the filename display in the slightest. Any insights?
My Website index | My Blog
.sm-gallery-image-container .sm-tile-info {
text-align:center;
max-width: none;
}
My Website index | My Blog
THANK YOU!!!!!!!!!
Exactly what I was looking for !!! (for weeks!)
I've been close a few times in the many things I tried, but never had the exact correct combo for any encouraging results. Again thank you bunches!!!!
At this point, I'm still having problems fitting the content, but I now know more about it --
This is what I've figured out: The problem looks to be a "proportion" issue. Smugmug can only display the entire vertical window contents (from the top of your header/logo down through the footer info) if it works proportionally with the user-specified width of the window. If the window is too wide compared to the height, it chops off the bottom (adds scroll bars) because it doesn't work out to the correct proportion. With today's widescreen monitors, this means that it doesn't display correctly the majority of the time on a desktop monitor. This also explains why making the browser window full screen makes the problem worse.
To see this, try this: http://www.arleenpiperphotography.com/Portraits/Arleen-Piper-Photography/2015-0703-Hunter/n-WfS2kR
If you display it pretty close to "square" (1:1 proportion width/height) -- everything displays just fine. Then, if you leave the height the same, and start dragging out the width, then you'll see that once you go beyond some magic "limit", that it starts cutting off the logo and footer.
I feel that the current behavior is not professional looking when I'm trying to show clients their picture galleries and can't see the entire page contents when we are sitting in front of a large monitor.
I asked the support heroes about this earlier today and asked if there was a way to customize the display so it would display correctly beyond the current limitations and the response was: "SmugMug designs are responsive, and as such, they will vary based on the browser size/resolution. When users add their own customizations (such as you’ve done), it modifies the base design, and these things need to be dynamically changed depending on the browser resolution. The whole page will not necessarily load if you’ve added your own customizations (including the top header). It’s possible we’ll change how our sites load in the future, but for the time being, this behavior is normal."
So, my question to you all is if you know of any CSS or other ways to tweak this?
Thanks!
/* This code hides the SM site header on all pages to which it applies.*/ .sm-page-layout-region-header { display:none; }You could either put that in the CSS attached to the new theme or create a CSS content block on the gallery template. I'd probably do the former, simply because I'd be more likely to find it later. This worked in a cobbled-together Preview mode test on my site, but since I don't have a site-wide header normally, I haven't tested in fully live.Alternatively, you can just opt for sidebars everywhere. That's the approach I've taken on my site.
From what you wrote, it doesn't sound like the Heroes were at their best on this. Your customization doesn't seem all that exotic to me. All you did was create a sitewide header -- which many of the canned designs have -- inserted a big logo and a menu, and opted for SmugMug style galleries. There's no special CSS. The SmugMug gallery design inherently likes lots of vertical space so I guess it's not too out-of-line to build the responsive layout assuming the whole vertical space, or at least most of it, is available. But, given one of SmugMug's claims-to-fame is user customization beyond basic templates, the Heroes might have done better by focusing on that design assumption/limitation rather than putting the onus on your straightforward additions. The facts were all there but the tone and emphasis seemed off.
Thanks so much for your reply (and accompanying CSS!). I'll play with that on a private gallery and see how that behaves and see if I like the logo and menu position switch.
Ultimately, as you mentioned, I feel that what I desired shouldn't have been that out-of-the-ordinary and not be possible with a top header/menu!! Oh well..!