Smugmug style gallery bug?

JohnnyJr

Hi all,
I'm stumped on this one. I've got this gallery set to Smugmug style (not smug small) -- when I view it (firefox mac) I see 15 thumbnails per page. When my wife views it (also firefox mac) she gets 9 per page:

http://www.sissonphotography.com/gallery/2937816#158539776

How many is everyone else seeing? I'd like to find a way to make sure it's 15 per page. I was about to start a complete site overhaul based on the Smugmug gallery style but don't want to waste my time if there are issues. Thoughts anyone?

Thanks so much!
John

Allen

JohnnyJr wrote:

Hi all,
I'm stumped on this one. I've got this gallery set to Smugmug style (not smug small) -- when I view it (firefox mac) I see 15 thumbnails per page. When my wife views it (also firefox mac) she gets 9 per page:

http://www.sissonphotography.com/gallery/2937816#158539776

How many is everyone else seeing? I'd like to find a way to make sure it's 15 per page. I was about to start a complete site overhaul based on the Smugmug gallery style but don't want to waste my time if there are issues. Thoughts anyone?

Thanks so much!
John

I see 15 until I stretch my browser narrower then see 9. I don't think you
can force Smugmug, only small. If someone has a low resolution browser
thay'll see 9 and it'll be full page just like you're seeing with 15. Forcing 15 and
they would have to scoll way to the right.

JohnnyJr

Hey Allen,
First, thanks for your help this week with this and other issues. Much appreciated.

You are right, it appears to be a viewport/monotor size issue. I have a 15" screen, wife has a 13" (duh.) Guess I didn't notice before, but when I'm seeing 15 thumbnails the whole gallery is shifted to the right of may page header & navbar so that it appears uncentered. :puke1

Any thoughts on keeping the gallery centered under the width of my header & navbar if the browser viewpoirt changes? I assume I'd have the same issue with Smugmug Small. If so, I'll need to rethink my site redesign based on those 2 gallery styles.

Thanks again!

Allen

JohnnyJr wrote:

Hey Allen,
First, thanks for your help this week with this and other issues. Much appreciated.

You are right, it appears to be a viewport/monotor size issue. I have a 15" screen, wife has a 13" (duh.) Guess I didn't notice before, but when I'm seeing 15 thumbnails the whole gallery is shifted to the right of may page header & navbar so that it appears uncentered. :puke1

Any thoughts on keeping the gallery centered under the width of my header & navbar if the browser viewpoirt changes? I assume I'd have the same issue with Smugmug Small. If so, I'll need to rethink my site redesign based on those 2 gallery styles.

Thanks again!

I can not see why you're having a problem, you have every gallery set to traditional.

You have a link to a Smugmug style gallery?

JohnnyJr

That's just the thing -- the link I sent previously would serve as the template for the rest of my site. I'd like to revise it based on the Smugmug / Smugmug Small style rather than Traditional.

But if there's going to be centering issues, etc., I'll have to look at doing it another way. However, I'd prefer to use smugmug style if I can center the galleries under my header/navbar using that style.

It would also be great to get 12 thumbs on the page even for those viewing on a smaller screen. Perhaps there's a way to view 4 thumbnails per row in Smug Small style?

Allen

JohnnyJr wrote:

That's just the thing -- the link I sent previously would serve as the template for the rest of my site. I'd like to revise it based on the Smugmug / Smugmug Small style rather than Traditional.

But if there's going to be centering issues, etc., I'll have to look at doing it another way. However, I'd prefer to use smugmug style if I can center the galleries under my header/navbar using that style.

It would also be great to get 12 thumbs on the page even for those viewing on a smaller screen. Perhaps there's a way to view 4 thumbnails per row in Smug Small style?

Used your link above and everything looks centered here in Firefox. Banner,
nav, body, footer, both in Smugmug and small.

JohnnyJr

Hmmm. I'm getting the first vertical row of thumbnails in Smugmug style shifted to the left of my navbar...

JohnnyJr

Oh, I should say it's shifted left when more than 9 thumbnails are showing in Smugmug style. 9 thumbnail or less and it's fine, but I deally I'd like to ohave more thumbs than 9 showing per page.

Allen

JohnnyJr wrote:

Hmmm. I'm getting the first vertical row of thumbnails in Smugmug style shifted to the left of my navbar...

Select a landscape, the portrait does make it all look to the left. But with a
landscape every things centered.

BTW, add the .menu in front of this. It's messes with tables without.

/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

JohnnyJr

Thanks for the css update, I've added that code!

What I get in that test gallery is this:
-- With 9 thumbnails showing the gallery is centered regardless of landscape or portrait.
-- With more than 9 thumbnails showing the gallery is shifted left regardless of landscape or portrait.

If I'm going to use either of the Smug styles I'd like to have at least 12 thumbs per page and to be sure all viewers (or as many as possible) will see everything centered.

If in theory it may be shifting left for some viewers is there some bit of magic css to keep everything aligned to the navbar/header? Maybe I can force this to work in Smug Small?

Allen

JohnnyJr wrote:

Thanks for the css update, I've added that code!

What I get in that test gallery is this:
-- With 9 thumbnails showing the gallery is centered regardless of landscape or portrait.
-- With more than 9 thumbnails showing the gallery is shifted left regardless of landscape or portrait.

If I'm going to use either of the Smug styles I'd like to have at least 12 thumbs per page and to be sure all viewers (or as many as possible) will see everything centered.

If in theory it may be shifting left for some viewers is there some bit of magic css to keep everything aligned to the navbar/header? Maybe I can force this to work in Smug Small?

Landscape is ok. Just need to right justify the portrait photos to balance the page maybe? Not sure how though.

Add this temporarily and see what you have.

.gallery_2937816 #photos {border: 1px solid red !important;}

JohnnyJr

I'm thinking INSIDE the box!
I just realized there's another way to approach this issue of centering under the navbar/header:

http://awais.smugmug.com/gallery/978270#135509879

I like the way Awais has the horizontal lies between gallery and navbar. This would be an easy solution to the whole centering issue. Seems to me those lines came free of charge and I disabled them ages ago because they were dashed and green. Yup, here they are:

.right_border, .left_border { border: 0px; } /* removes the vertical dashed lines */
.top_border, .bottom_border { border: 0px; } /* removes the horizontal dashed lines ? */

So, any code for solid lines perhaps? And a way to make them a color of my choice?

Thanks!!

Allen

JohnnyJr wrote:

I just realized there's another way to approach this issue of centering under the navbar/header:

http://awais.smugmug.com/gallery/978270#135509879

I like the way Awais has the horizontal lies between gallery and navbar. This would be an easy solution to the whole centering issue. Seems to me those lines came free of charge and I disabled them ages ago because they were dashed and green. Yup, here they are:

.right_border, .left_border { border: 0px; } /* removes the vertical dashed lines */
.top_border, .bottom_border { border: 0px; } /* removes the horizontal dashed lines ? */

So, any code for solid lines perhaps? And a way to make them a color of my choice?

Thanks!!

============ horizonal line ================================
footer or header

<hr id="line1">

css section:

#line1 {
background-color: white;
width: 750px;
height: 1px;}

#line1 {display:none;}

.gallery_2467128 #line1 {
display: block;
background-color: #444444;
width: 750px;
height: 1px;}

JohnnyJr

Okay, taking what you've suggested and working from what I've seen on Awais's site, I've added this code and it seems to be working nicely with the Smugmug gallery style:

/* lines */
.gallery_2937816 .top_border {
border-top: solid 1px #666666;
}
.gallery_2937816 .bottom_border {
border-bottom: solid 1px #666666;
}
.gallery_2937816 .right_border {
border-right: solid 1px #666666;
}
.gallery_2937816 .left_border {
border-left: solid 1px #666666;
}

.gallery_2937816 .customizeGallery .boxBottom {
padding-bottom: 20px;
}

So, no centering issue now because the horizontal lines makes everything appear centered in the browser window. But on some screens, depending on the size, there will be 9 thumbnails per page & on others there will be 15... I'd really like to have only 1 page per gallery.

Ideally, if there's a way to force the Smugmug Small style to display 4x thumbnails per row I'd have 12 per page. That would be perfect! Do you think there's a way to get there?

Also, do I assume correctly that adding this would give me the lines in ALL galleries or not?

.gallery .top_border {
border-top: solid 1px #666666;
}

I'll try and see what happens...

Allen

JohnnyJr wrote:

Okay, taking what you've suggested and working from what I've seen on Awais's site, I've added this code and it seems to be working nicely with the Smugmug gallery style:

...

So, no centering issue now because the horizontal lines makes everything appear centered in the browser window. But on some screens, depending on the size, there will be 9 thumbnails per page & on others there will be 15... I'd really like to have only 1 page per gallery.

Ideally, if there's a way to force the Smugmug Small style to display 4x thumbnails per row I'd have 12 per page. That would be perfect! Do you think there's a way to get there?

Also, do I assume correctly that adding this would give me the lines in ALL galleries or not?

.gallery .top_border {
border-top: solid 1px #666666;
}

I'll try and see what happens...

Try this

.galleryPage .top_border {
border-top: solid 1px #666666;
}

Smugmug has 15
Smugmug small has 9
no changing that.

You can force small under gallery customization.

JohnnyJr

PERFECT! Thanks for that bit of code, you saved me an hour or 2 of combing Dgrin to find that! The 15 & 9 info for the smug styles is very helpful and I'll plan accordingly.

Thanks much & have a great evening, Allen!

Allen wrote:

Try this

.galleryPage .top_border {
border-top: solid 1px #666666;
}

Smugmug has 15
Smugmug small has 9
no changing that.

You can force small under gallery customization.

Sheaf

Allen wrote:

I don't think you
can force Smugmug, only small.

SM.SmugMug.config.size = 'resizeable';

where 'resizeable' can be either that, or 'small' or 'large'.

Haven't actually tried it myself, but I found it here: http://www.dgrin.com/showthread.php?t=52107

JohnnyJr

Coooool. On my list to play with tomorrow. Thanks, Sheaf!

JohnnyJr

Hi Allen,
After a couple of long days, I've completely updated my navigation based on Smugmug style.

Everything is great except: I'm not seeing easy sharing any longer as I was in Journal style. I suspect I have it supressed somehow because I have in enabled in my gallery control panel. I'd like to bring it back for all of my new smugmug style galleries and have it appear centered below the large view on the right side.

Do you have a general CSS code mod for that? I've done some searching but couldn't find code in the forums.

Thanks!
John

Allen wrote:

Try this

.galleryPage .top_border {
border-top: solid 1px #666666;
}

Smugmug has 15
Smugmug small has 9
no changing that.

You can force small under gallery customization.

rainforest1155

JohnnyJr wrote:

Everything is great except: I'm not seeing easy sharing any longer as I was in Journal style.

John,
I see it both in FireFox and Opera. I attached you a screenshot.

Sebastian

JohnnyJr

Hi Sebastian,
Thanks for looking into this fo me... however, that's actually not my site. I posted a link to that page because I wanted to replicate the horizontal & vertical lines, which I've successfully done. Here's my site:

http://sisson.smugmug.com/gallery/2937816#158539776

The share button is not appearing, although it is turned on in the gallery customization. I'd like to have the share button appear below the photo in all of my Sumgmug Style gallery.

ivar

JohnnyJr wrote:

Hi Sebastian,
Thanks for looking into this fo me... however, that's actually not my site. I posted a link to that page because I wanted to replicate the horizontal & vertical lines, which I've successfully done. Here's my site:

http://sisson.smugmug.com/gallery/2937816#158539776

The share button is not appearing, although it is turned on in the gallery customization. I'd like to have the share button appear below the photo in all of my Sumgmug Style gallery.

It shows fine in that gallery? It's above the image though. Did you fix it?

rainforest1155

ivar wrote:

It shows fine in that gallery? It's above the image though. Did you fix it?

I don't see it neither in IE6, FF nor Opera 9.

Sebastian

JohnnyJr

I'm also not seeing it in FF or safari...

ivar

rainforest1155 wrote:

I don't see it neither in IE6, FF nor Opera 9.

Sebastian

Ah, sorry, my bad. I had CSS blocked. It is removed by CSS.

#breadcrumb{ display:none }

is causing the problem.

rainforest1155

ivar wrote:

Ah, sorry, my bad. I had CSS blocked. It is removed by CSS.

#breadcrumb{ display:none }

is causing the problem.

Yes, but I can't figure out how to just hide the breadcrumb navigation without the buttons. Well, gotta go now - going to sneak preview in the cinema now.

Good luck,
Sebastian

Allen

rainforest1155 wrote:

Yes, but I can't figure out how to just hide the breadcrumb navigation without the buttons. Well, gotta go now - going to sneak preview in the cinema now.

Good luck,
Sebastian

Try this

#breadcrumb {visibility: hidden;}
.share_button {visibility: visible;}

JohnnyJr

Ok, removed #breadcrumb{ display:none } and that works but then I get the full album navigation breadcrumb along with the share button above the photo. I'd like to get only the share button portion of the breadcrumb and have it appear someplace below the photo.

Or, at least get it appear on the same line as the gallery navigation like this:
Page 1of 1 | 1 of 15 Next > Share

I hope that makes sense...



Next

JohnnyJr

Dang, you're fast Allen, I was still typing my reply!

Allen wrote:

Try this

#breadcrumb {visibility: hidden;}
.share_button {visibility: visible;}

Yes, this does indeed work beautifully, I only get the share button portion of the breadcrumb. Now, if I can just get it to appear below the photo or on the same line as the gallery navigation...

Allen

JohnnyJr wrote:

Ok, removed #breadcrumb{ display:none } and that works but then I get the full album navigation breadcrumb along with the share button above the photo. I'd like to get only the share button portion of the breadcrumb and have it appear someplace below the photo.

Or, at least get it appear on the same line as the gallery navigation like this:
Page 1of 1 | 1 of 15 Next > Share

I hope that makes sense...
Next

This looks like it works for smugmug and smug small styles.

.share_button {
visibility: visible;
position: relative;
top:100px;
}

Edit: Only with a gallery description though. Either 100 or 65 without a gallery description

Putting it above nav works for either.

.share_button {
visibility: visible;
position: relative;
top:-60px;
}

JohnnyJr

Than does indeed move the button, but it's floating around the page depending on how many lines of text are in the gallery description. Here's examples from 3 different galleries:

http://sisson.smugmug.com/gallery/2937816#158539776

http://sisson.smugmug.com/gallery/2435397#134822206

http://sisson.smugmug.com/gallery/2724456#147220598

Allen wrote:

This looks like it works for smugmug and smug small styles.

.share_button {
visibility: visible;
position: relative;
top:100px;
}

Edit: With a gallery description though. Either 100 or 65 without a gallery description