Size of Pop-Up Photos, Etc.

[jethro]

Hi, I've recently setup a Pro account and am customizing it to match my existing site. I'm getting a lot of it so far, just haven't started digging DEEP yet.

I've got a custom header and background that makes the site 'fit' into a 785 pixel wide area. This works well with most galleries, but some will 'break' the width (some gallery styles push the navigation a bit wider than others).

So I have a few questions that I'm hoping I can at least get direction on. I'm willing to dig deeper if there are possibilities, so simple answers are fine for now. I can look for more detailed info on 'how-to' if necessary.

1) I ended up 'forcing' a SmugMug Small style to ensure the layout worked with my site width. Are there ways to get ALL gallery styles to fit a certain width (785 px) so I can give folks options?

2) If I force people to use the SmugMug Small style, is there a way to have the default 'pop-up' photo be set to 'Large'? (ie, when someone clicks the larger right-side photo, not the thumbnail. Right now it defaults to Medium size).

3) Any way to turn off the 'other sizes' options under the right-side photo, but still keep the 'save photo' option? (when I click a different size, the navigation can 'break' width and there is no intuitive way back to the thumbnails)

4) Is it possible to hide or edit the info that is listed next to Category or Sub-Category thumbnails individually (ie, main Categories/Home page would be different than Sub-Category listings page)?

5) Is there a way to make the 'box' behind the Category, Sub-Category and Gallery thumbnails more consistent in size (& the thumbnails themselves more consistent in size)? Right now the Gallery thumbnails are bigger than Category/Sub-Category thumbs, and the space around them is not even (too much bottom).


I think this is enough to get me started. Any help or direction would be most appreciated. I'm sure I could spend days trying to figure out if this stuff is even possible, let alone how to carry it out. But I do have some background with HTML and CSS, so just point me the right way.

THANKS!

[Mike Lane]

Hi, I've recently setup a Pro account and am customizing it to match my existing site. I'm getting a lot of it so far, just haven't started digging DEEP yet.

I've got a custom header and background that makes the site 'fit' into a 785 pixel wide area. This works well with most galleries, but some will 'break' the width (some gallery styles push the navigation a bit wider than others).

So I have a few questions that I'm hoping I can at least get direction on. I'm willing to dig deeper if there are possibilities, so simple answers are fine for now. I can look for more detailed info on 'how-to' if necessary.

1) I ended up 'forcing' a SmugMug Small style to ensure the layout worked with my site width. Are there ways to get ALL gallery styles to fit a certain width (785 px) so I can give folks options? Not easily. Smugmug small, all thumbs, traditional, journal, slideshow small & med, filmstip small & med, and single image small & med are already designed to be 750 px wide. Large images are 800px wide so the filmstrip large, slideshow large, and single image large obviously won't be able to be scaled down to 785px wide. Smugmug & critique are designed to be 960 px wide. The smugmug style uses a 600px wide image so if you didn't use any other margins, padding, or borders you would only have 185px more to work with. It can be done I suppose but it won't be easy to get good looking results.

2) If I force people to use the SmugMug Small style, is there a way to have the default 'pop-up' photo be set to 'Large'? (ie, when someone clicks the larger right-side photo, not the thumbnail. Right now it defaults to Medium size).It will default to your preferred size. Maybe the javascripters couldd do something about that, I don't know.

3) Any way to turn off the 'other sizes' options under the right-side photo, but still keep the 'save photo' option? (when I click a different size, the navigation can 'break' width and there is no intuitive way back to the thumbnails)Sounds like you'll have to disable the larges if you don't want to go wider than 785px. That way L wouldn't be an option.

4) Is it possible to hide or edit the info that is listed next to Category or Sub-Category thumbnails individually (ie, main Categories/Home page would be different than Sub-Category listings page)?Not sure what you mean here.

5) Is there a way to make the 'box' behind the Category, Sub-Category and Gallery thumbnails more consistent in size (& the thumbnails themselves more consistent in size)? Right now the Gallery thumbnails are bigger than Category/Sub-Category thumbs, and the space around them is not even (too much bottom).If you have greater than 6 galleries the thumbs will get smaller automatically. You can affect the margins independantly, however.

I think this is enough to get me started. Any help or direction would be most appreciated. I'm sure I could spend days trying to figure out if this stuff is even possible, let alone how to carry it out. But I do have some background with HTML and CSS, so just point me the right way.

THANKS!My suggrstion would be to include wider designs in your pages. You can have 785px on most pages, and say 820 or so for pages that use large size images, and 980 or so for critique and smugmug style pages.

[jethro]

Cool, thanks for the tips. I think I'll try to stick with using SmugMug Small only and try to make it work.

- Anyone else have some suggestions on the other questions, especially questions 2, 3 & 5?

I'm really struggling now to get the Category/Sub-Category/Gallery pages looking nice and consistent. I'd prefer them all to be 4 across, with the text underneath, and not too much space between rows. I'll try to feature only horizontal picks so that size will be the same. And I prefer the size of the thumbnails you see when you are in a Sub-Category section (looking at Gallery choices). Not sure why the thumbs on the home page (Categories) and Sub-Categories pages look smaller than these. They should all look the same.

Anybody???

THANKS!

[Mike Lane]

Cool, thanks for the tips. I think I'll try to stick with using SmugMug Small only and try to make it work.

- Anyone else have some suggestions on the other questions, especially questions 2, 3 & 5?

I'm really struggling now to get the Category/Sub-Category/Gallery pages looking nice and consistent. I'd prefer them all to be 4 across, with the text underneath, and not too much space between rows.

FAQ #28 (http://www.dgrin.com/showthread.php?p=300387#post300387) will get you 4 across.

I'll try to feature only horizontal picks so that size will be the same. And I prefer the size of the thumbnails you see when you are in a Sub-Category section (looking at Gallery choices). Not sure why the thumbs on the home page (Categories) and Sub-Categories pages look smaller than these. They should all look the same.

Anybody???

THANKS!Again, like I said above if you have greater than 6 galleries the thumbnails will revert to the smaller size. If you have 6 or fewer galleries then you will get the larger size. :deal

[jethro]

[/URL][URL="http://www.dgrin.com/showthread.php?p=300387#post300387"]FAQ #28 (http://www.dgrin.com/showthread.php?p=300387#post300387) will get you 4 across.

Thanks for the continued help. I did try pasting the code from there in, but it didn't work for me. I think it may have been close in Firefox, but Mozilla and IE were broken. If I remember correctly, they were 3 across with a large vertical space underneath the photos. I added borders to see what was happening.

I'll keep trying to figure it out. It's just tough for me to figure out the cascade that is happening and know what to affect.

- Does anyone know if there are any more screen-shots or helps like this one: http://cmac.smugmug.com/gallery/775819/1/34353759/Original ?

Those will probably help me with the gallery pages (since I use SmugMug Small only) and what appears to be the home page. But I would like to figure out the Category and Sub-Category pages as well, as they appear a bit different.

Thanks!

[Mike Lane]

Thanks for the continued help. I did try pasting the code from there in, but it didn't work for me. I think it may have been close in Firefox, but Mozilla and IE were broken. If I remember correctly, they were 3 across with a large vertical space underneath the photos. I added borders to see what was happening.All you have to do is to adjust the margins and the heights for the .miniBox and the .albumLarge parts. So for example where you see margin:0 28px; just change that to margin:0 20px; and if that's too small (meaning they are all the same line but they aren't centered) then use margin:0 21px;. If they still aren't centered, use margin:0 22px; and so on until you get to a point where they are all on the same line and centered. GOTCHA: The borders that you put on there will add to the overall width of the boxes and will cause them to drop down sooner than you would like. :deal

For the height, just mess with the height of the .miniBox and .albumLarge parts. I would not mess with the min-height parts or heights of 1% as these are making it so you can see all the content when you are logged in. I intentionally made a lot of space below the images because most people wanted it that way. However, if you look at my site you'll see that I have my thumbnails stacked in rows of 4 that are quite close together vertically as well. I'm using the very same method as I gave in FAQ 28, I've just adjusted the elements the same way I'm showing you how to do in this response.

I'll keep trying to figure it out. It's just tough for me to figure out the cascade that is happening and know what to affect.

- Does anyone know if there are any more screen-shots or helps like this one: http://cmac.smugmug.com/gallery/775819/1/34353759/Original ?
Why try to find a screenshot when you can have the real thing? Download firefox 2.0 (http://www.mozilla.com/) and the webdeveloper extension v1.1 beta (http://www.chrispederick.com/work/webdeveloper/beta/). What you see in that screenshot was done using the webdeveloper extension. :wink

Those will probably help me with the gallery pages (since I use SmugMug Small only) and what appears to be the home page. But I would like to figure out the Category and Sub-Category pages as well, as they appear a bit different.

Thanks!
Even if you didn't have the webdev extension, you'd still be able to see the structure of the page by viewing the source. :deal

[jethro]

Hey Mike, thanks for the continued help! I believe the link for the code you left last post (for FAQ 28) was different than what I was getting from the root of the forums.

When I pasted THIS code, it did seem to work. I think I got it all worked out now. THANKS AGAIN!

The problem with even using Firefox's Web Developer interface (which I do use) is that this site has VERY HEAVY cascading of styles. So it is just very difficult to see exactly what class or ID needs to be addressed to make a change. Many parents, many children for most styles. The samples that were done up make it a bit clearer to see. But it's still a challenge!

I'll keep plugging away for now, though.

[Mike Lane]

Hey Mike, thanks for the continued help! I believe the link for the code you left last post (for FAQ 28) was different than what I was getting from the root of the forums.

When I pasted THIS code, it did seem to work. I think I got it all worked out now. THANKS AGAIN!

The problem with even using Firefox's Web Developer interface (which I do use) is that this site has VERY HEAVY cascading of styles. So it is just very difficult to see exactly what class or ID needs to be addressed to make a change. Many parents, many children for most styles. The samples that were done up make it a bit clearer to see. But it's still a challenge!

I'll keep plugging away for now, though.In the webdev tool go to the information drop-down and select "display element information". That will give you a box that will display the full cascade (all ancestors and direct children) of any element on the page. If that's not good enough for you (and sometimes it isn't for me) you can use the DOM inspector. The catch is you have to have selected the custom install of firefox way back when you installed it for the DOM inspector to work. If you did, just hit ctrl-shift-i (cmd-shift-i for macs) and then in the window that pops up click on the inspect button at the top right. Then you can either find the element in the tree to the top left or you can click on the circle with the pointer arrow in it at the top left and then click on the element in question at the bottom of the page to isolate it. Then go up to the down arrow next to the words Object - DOM Node and select the CSS Style Rules to find out exactly what CSS styles are affecting that element in order of specificity. :thumb