New! SmugMug "Stretchy" -- Help, Questions here

wellman

I've done some more tinkering... Again, on my 1440x900 laptop, I see this...


I'd much rather see this...


The second result was obtained by pressing F11 (fullscreen). For the record, I can get the normal view to give me the larger main image by hiding the status bar and the bookmarks bar. I guess that gives the viewport just enough height to tell the algorithm to go "Large."

I know you guys are trying to serve lots of needs here. It looks like there's a faction of people who want everything on the page (headers and all) to show up on the screen with no vertical scrolling needed. Then you've got people like me who want every available vertical pixel of my widescreen monitor available for the main image. Some level of user-customization would be great. Maybe a user-specified "delta" from the defaults the image sizing algorithm uses to decide sizes?

Thanks again. Stretchy is what earned my Techie vote for SmugMug!

Andy

wellman wrote:

I've done some more tinkering...

Try losing a toolbar, keeping the tabs... see what happens?

wellman

Andy wrote:

Try losing a toolbar, keeping the tabs... see what happens?

I have to hide the Bookmarks toolbar, the Navigation toolbar, and the Status bar (bottom) to get the image to switch over to Large. Bringing back the Status bar (the thinnest of these three) causes the page to re-layout with Medium. Let me know if you need other info.

Andy

wellman wrote:

I have to hide the Bookmarks toolbar, the Navigation toolbar, and the Status bar (bottom) to get the image to switch over to Large. Bringing back the Status bar (the thinnest of these three) causes the page to re-layout with Medium. Let me know if you need other info.

What happens with the default theme (SmugMug Gradient)?

wellman

Andy wrote:

What happens with the default theme (SmugMug Gradient)?

Same story. Medium layout. Hiding both toolbars and the status bar toggles the display to Large layout. Bringing any of the three back toggle the display back to Medium layout.

For good measure, I also did the same test w/ my customizations turned off (i.e. straight-up SmugMug Gradient). Same story.

One other item of interest (but unrelated, I think)... With the Medium layout, SmugMug gradient gives 4x6=24 thumbnails. Carbonite gives 4x7=28. Not a concern, just FYI.

{JT}

So I made a few minor adjustments to the calculations and some of our css. I can make a large appear now if you hide the bookmarks toolbar and the status bar. If I force a large even with those put back, the picture goes below the fold (something we were told to avoid earlier in this thread).

I will keep tweaking things though and will consider adding a variable that you can tweak.

wellman wrote:

I have to hide the Bookmarks toolbar, the Navigation toolbar, and the Status bar (bottom) to get the image to switch over to Large. Bringing back the Status bar (the thinnest of these three) causes the page to re-layout with Medium. Let me know if you need other info.

wellman

{JT} wrote:

So I made a few minor adjustments to the calculations and some of our css. I can make a large appear now if you hide the bookmarks toolbar and the status bar. If I force a large even with those put back, the picture goes below the fold (something we were told to avoid earlier in this thread).

I will keep tweaking things though and will consider adding a variable that you can tweak.

Thanks. I'm all for the variable. You've got people who for good reason don't want photos below the fold, and you've got people who want bigger photos, knowing people will just have to scroll the one time. Thanks for taking a look.

wellman

{JT} wrote:

I will keep tweaking things though and will consider adding a variable that you can tweak.

As long as you're considering adding a variable, I'll chime in with a suggestion. My particular issue seems to center around the medium/large "trip point" in the layout algorithm. (I assume a viewport height value.) It seems plausible that others might have issues around one of the other trip points.

Perhaps users could have a few variables - one for each trip point. Then we could look at our sites on a few different resolutions and set the breaks just where we want them. As to whether those variables should be absolute numbers or deltas from your defaults is something I would leave to your discretion.

Thanks again for considering the issue.

Erick L

{JT} wrote:

There is a small calculation bug when you have 1024x768, a fix should be out shortly.

Any fix in the work? I still get 4 thumbs across and a small image at 1024*768. Half my visitors use that resolution. A full screenshot after pressing F11:

Andy

Erick L wrote:

Any fix in the work? I still get 4 thumbs across and a small image at 1024*768. Half my visitors use that resolution. A full screenshot after pressing F11:

This was fixed for the site already.

It's likely due to your footer being so high. Try a page without your custom footer and see.

Also, your relaventTitle hack is producing a javascript error (not related to Stretchy).

Erick L

I tried with no footer at all and still have a small image. What do you mean "footer too high"? It's this high because the picture is so small.

As for the JS... it's the only thing I found here that doesn't show "powered by Smugmug".

Andy

Erick L wrote:

As for the JS... it's the only thing I found here that doesn't show "powered by Smugmug".

Here is javascript error, as reported by Firebug....

Andy

Erick L wrote:

I tried with no footer at all and still have a small image. What do you mean "footer too high"? It's this high because the picture is so small.

I meant that your footer is "tall" it takes up a lot of pixels, not that it's high on the page.

Try taking out the 20px bottom margin in your body statement, make it 0px

EDIT: It's not your footer height at all Removing this:


#smugmug, .smugmug #header, .smugmug #footer {
margin-left: 50px;
margin-right: 50px;}

.smugmug #footer {
width: auto;
margin: 0 15px;
}

Makes it 12 thumbs and a medium main image on 1024x768

Bob_A

Help with inconsistent "stretchiness"
I'm using the Khaki theme as my default and have customized my site

bobanderson.smugmug.com

but the stretchy feature doesn't seem to work properly. I have two problems:

1. For all galleries you need to scroll down to see the "add comment" button and footer.

example: http://bobanderson.smugmug.com/gallery/942435#240322713


2. For all images in portrait you have to scroll down to see the caption.

example: same gallery, image 5.


3. For "portrait" oriented images that I uploaded over a year ago the image size is quite large requiring you to scroll down to see the entire image. If I re-upload the image this is corrected.

example: same gallery, image 2.


I couldn't find a list of themes where "stretchy" doesn't work, so have no idea if it's the theme or some other problem. If khaki is a "stretchy" theme does anyone have some thoughts about what I'm doing wrong?

Andy

Bob_A wrote:

1. For all galleries you need to scroll down to see the "add comment" button and footer

Expected.

2. For all images in portrait you have to scroll down to see the caption.

example: same gallery, image 5.

Depends on screen size

3. For "portrait" oriented images that I uploaded over a year ago the image size is quite large requiring you to scroll down to see the entire image. If I re-upload the image this is corrected.

example: same gallery, image 2.


I couldn't find a list of themes where "stretchy" doesn't work, so have no idea if it's the theme or some other problem. If khaki is a "stretchy" theme does anyone have some thoughts about what I'm doing wrong?

those portrait images were uploaded before we made a decision to make the -L portrait size 600px on the long side (used to be 800px).

Erick L

Ok thanks. I only had to reduce the margin to 25px:

#smugmug, .smugmug #header, .smugmug #footer {
margin-left: 25px;
margin-right: 25px;}

... and left the other part in place (I added this today to keep the SM footer centered).

As for the JS... I understand JS as much as chinese, which is not at all. It's something I copied/pasted on the forum. The SM option kept the "powered by Smugmug" part and I don't want it. I'd rather have an error that works.

Bob_A

Thanks Andy.

By "expected" so you mean that stretchy doesn't work for Khaki or you would expect this for any theme? If it would be this way for any theme is it because I have too much wasted space at the top? I have no idea how to fix this (just looked at your site and see that you use very little for your title and navbar).

For the older images it looks like the only way to make them smaller is to re-upload them. Thanks for the reply about this since I was pulling my hair out looking for the special "option" to make them resize

Andy

Bob_A wrote:

Thanks Andy.

By "expected" so you mean that stretchy doesn't work for Khaki or you would expect this for any theme? If it would be this way for any theme is it because I have too much wasted space at the top? I have no idea how to fix this (just looked at your site and see that you use very little for your title and navbar).

Yeah - try using a smaller font size for your header maybe...

Andy

Erick L wrote:

I'd rather have an error that works.

People don't like page errors, it makes them go crazy I'd fix it if I were you, post in the customizing forum and let the experts try and help.

Bob_A

Andy wrote:

Yeah - try using a smaller font size for your header maybe...

I'll mess around with it a bit. There seems to be a ton of space above the font though. I'll have to see if there is a br somewhere.

{JT}

Updates to Stretchy Height Calculation
When calculating how much height we have to show the main photo, I changed some of the reasoning and added a new variable for Pro's to play with.

I take the available screen height (that is the viewable area of the page - not the window, not your resolution, the actual area that you can scroll) and then I subtract where the top of the photo will start - if the top of that area is greater than 200px (you have a large album description or header) I cap it at 200px. The left over area is what I use to determine what size to show.

Now, power and pro customers can alter this value to be whatever they want. It is a relative change though so it is += whatever the value is that the "educated guess" ended up at. Here is what you can put in your javascript customizations:

SM.SmugMug.config.alterScreenHeight = -50;

This is what will happen if the site says you have 200px of space above the photo:

200 += -50; (150px is the result)

So if you had an available screen height of 750px, we would then subtract 150 - leaving 600px enough for a Large photo. If you did not subtract enough then you would only have enough for a medium size.

Make sense? Realize that by adjusting this value without any additional logic, that you are also adjusting that value for everyone visiting your site. If you wanted to do it only for you; I would put the following in your footer:


if (YD.hasClass(document.body,'loggedIn') {
SM.SmugMug.config.alterScreenHeight = -50;
}


(add script tags around the above)

Let me know if this makes sense, or if there can be any improvements.

wellman

{JT} wrote:

When calculating how much height we have to show the main photo, I changed some of the reasoning and added a new variable for Pro's to play with.

Works beautifully! Thank you so much. I am now totally satisfied with the look of my SmugMug pages. If only the photos were better.

Thanks again.

PBolchover

{JT} wrote:

Now, pros can alter this value to be whatever they want.

Sounds good, but why restrict it to pros? Smugmug has had a long-standing policy that Power Users can do unlimited customisation: the pro-only features relate to added-value for people who make a living from photography.

Andy

PBolchover wrote:

Sounds good, but why restrict it to pros? Smugmug has had a long-standing policy that Power Users can do unlimited customisation: the pro-only features relate to added-value for people who make a living from photography.

It is not restricted to pros - power and pro customers can use the new variable.

I fixed JT's post

thehikingdude

scwalter wrote:

First, let me say .

Second, mine didn't work at first because I had this:

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

in my javascript to force large style. Once removed, it's fine. Just an FYI in case anyone else had this hack.

-Scott

As usual this forum saves the day. Thanks!!!

MichaelKirk

My turn for some help
I just tried out the new (to me) stretchy feature and having some issues. On my laptop 1024x768 the main photo is being viewed as Small with 5x3 thumbs. How to I change it to show a medium main image and smaller thumbs - 3x5
Update - on my desktop (20")monitor - same issue - main photo is viewed as "Small"
How do I have the main image viewable as MEDIUM. To me - if you can't, the stretch feature is worthless (My Opinion) so I hope there is an easy work around.



Also another problem occurs when I shrink the browser window and then increase it back to full size - the gallery images stay small and I end up with a lot of dead space.



Screen print gallery
http://mlkimages.smugmug.com/gallery/4226650/1/247204204

sample gallery
http://mlkimages.smugmug.com/gallery/3449764#193795987

Michael

Andy

MichaelKirk wrote:

I just tried out the new (to me) stretchy feature and having some issues. On my laptop 1024x768 the main photo is being viewed as Small with 5x3 thumbs. How to I change it to show a medium main image and smaller thumbs - 3x5
Update - on my desktop (20")monitor - same issue - main photo is viewed as "Small"
How do I have the main image viewable as MEDIUM. To me - if you can't, the stretch feature is worthless (My Opinion) so I hope there is an easy work around.



Also another problem occurs when I shrink the browser window and then increase it back to full size - the gallery images stay small and I end up with a lot of dead space.



Screen print gallery
http://mlkimages.smugmug.com/gallery/4226650/1/247204204

sample gallery
http://mlkimages.smugmug.com/gallery/3449764#193795987

Michael

Hmmm... here's my 1024x768 on Windows XP:


I wonder if it's your double-high toolbar at the bottom that's causing this? Try making that just a single row height and see if that helps.

MichaelKirk

Not it!
Nope,
My desktop has a single bar at the bottom and I get the same thing. Small main image - thumbnains are 4 wide by 3 tall.....so a lot of dead space on my page.

MLK

Andy

MichaelKirk wrote:

Nope,
My desktop has a single bar at the bottom and I get the same thing. Small main image - thumbnains are 4 wide by 3 tall.....so a lot of dead space on my page.

MLK

See if this helps?

bwg

MichaelKirk wrote:

Nope,
My desktop has a single bar at the bottom and I get the same thing. Small main image - thumbnains are 4 wide by 3 tall.....so a lot of dead space on my page.

MLK

Your toolbars are causing the problem. Stretchy will attempt to give you the largest image it can fit in the viewport (the area in your browser where the page is) without vertical scrolling. You effectively have 5 toolbars (file, navigation, address, google and the status bar at the bottom) which are shrinking the viewport. You have a few options:

1) drag the address bar to be on the same line as the file, edit etc. bar.
2) use small icons for the navigation bar

Those will allow you to keep the same toolbars you currently have while increasing the viewport height.

As for the dead space when you shrink and resize, that shouldn't happen. We'll look into that.