thumbnail layout on thumbnail pages

[froggy]

the thumbnail layout on thumbnail pages appears very awkward-

if there are both horizontal- and vertical-oriented pictures on the page, the thumbnail images appear spread out incorrectly instead of organized into the correct rows and columns.

(whitespace instead of thumbnail(s) appear in various rows)

v1.0 RC1

[kimparsell]

Froggy:

This issue could be caused for any number of reasons, including your choice of thumbnail size and any modifications you may have made to the theme since you installed Plogger. All 3 themes that ship with Plogger work properly out of the box.

Can you please provide us with a link so we can see what the problem is exactly?

[froggy]

Replying to kimparsell:

Froggy:

This issue could be caused for any number of reasons, including your choice of thumbnail size and any modifications you may have made to the theme since you installed Plogger. All 3 themes that ship with Plogger work properly out of the box.

Can you please provide us with a link so we can see what the problem is exactly?

thumbnail size, theme and other defaults were unchanged, standard out of the box.

only options changed were: number of thumbnails per page and sort order.

[sidtheduck]

Another thought could be long captions causing layout issues. A link would be helpful so we can see the code and help you figure it out.

[froggy]

Replying to sidtheduck:

Another thought could be long captions causing layout issues. A link would be helpful so we can see the code and help you figure it out.

no captions or comments.

oops, sorry, forgot link above. i can share the info, but don't want link posted online. can i submit it privately?

[sidtheduck]

Replying to froggy:

no captions or comments.

oops, sorry, forgot link above. i can share the info, but don't want link posted online. can i submit it privately?

Sure, just email it to plog-dev AT lists DOT plogger.org

[kimparsell]

Couple of other things:

1. What browser are you using when you see these issues?

2. What view are you referring to, i.e., collections, collection, or album view?

I checked the forum to see if you had posted to request help with this issue, and was unable to find one. Did you post this issue in the forum before submitting a ticket?

[froggy]

1. Safari (webkit nightly build from nightly.webkit.org)

2. thumbnails of images (is that album view?)

3. did not post in forum.

[froggy]

emailed link and screenshot

[sidtheduck]

froggy,

I did not receive a copy of your email. Please resend or email me directly at sidtheduck AT gmail DOT com and I can forward to the rest of the dev team.

[froggy]

re-sent to your address and dev address from above

(note fyi no error or bounce received from previous msg to dev address, mail was sent from hotmail account with subject containing "#242 (thumbnail layout on thumbnail pages)" )

thx

[mrzippy]

I just filed this as a bug too....

Example image:

Tested in Safari / IE / Firefox and all look the same.

[mrzippy]

Try again:

[mrzippy]

URL for code:

My Fix code (not ie6/i67)  http://climaterealists.com/test/index.php

RC1 Code  http://climaterealists.com/test/index.php

[mrzippy]

Having a bad day!

URL for code:

My Fix code (not ie6/i67)  http://climaterealists.com/test/index.php

RC1 Code  http://climaterealists.com/test/index2.php

[sidtheduck]

Replying to mrzippy:

I just filed this as a bug too....

Please try to only create 1 ticket for any issues you may come across (I know ... it happens sometimes). I closed ticket #245 as it's a duplicate to this issue as well.

Moving on, there are 2 possible outcomes that I have come up with.

1. Change your Admin -> Options to size the Small Thumbnails by height. You still keep portrait and landscape shaped photos, but they are aligned nicely on the page (something that will never happen with a combination of portrait and landscape photos of differing heights, it will always look "choppy"). Also, this was how beta3 resized it's thumbnails, so this is a new option with this release.

2. Building off of mrzippy's posted CSS, we could change the CSS in gallery.css like so (please test on your own system and report back with any issues):

   .slides li { /* this is the individual thumbnail container in collection/album view */
   	display: -moz-inline-stack; /* for FireFox 2 as it does not support inline-block */
   	display: inline-block; /* changed from display: block */
   	/* float: left; : you can remove this whole line*/
   	vertical-align: top;
   	margin: 0 10px 10px 0; /* 2nd number controls the distance between thumbnails */
   	padding: 0;
   }
   
   .tag { /* this controls the text under a thumbnail in collection/album view with caption/download checkbox */
   	text-align: center;
   	white-space: normal;
   	overflow: hidden; /* added for long, overflowing descriptions */
   }
   

Then, in head.php add this conditional comment CSS code to the top but after the link to gallery.css to make IE6/7 work correctly:

	<!--[if lt IE 8]><style>
	.slides li { /* this is a workaround for IE6/7 because they do not support inline-block correctly */
		zoom: 1;
		display: inline;
	}
	</style>
	<![endif]-->

[sidtheduck]

Also, you can see this in action on my development gallery ->  http://www.sidtheduck.com/plogger/index.php?level=album&id=2

[mrzippy]

Firstly sorry about the duplicate bug, I didn't find this one until after I posted.

I'm glad you found a solution to the lack of inline-block support on a block element in IE6/IE7, I was so tired when I looked at this I couldn't find anything in Google about it... Yet today I find several articles!

I have tested with the conditional if and it seems be all be good :)

 http://mrzippy.org.uk/sarah/

Browsers tested:
Safari 4.0.4 (Mac)
Firefox 3.6 (Mac)
Opera 10.10 (Mac)
Internet Explorer 6 (PC)
Internet Explorer 7 (static via  http://ipinfo.info/netrenderer)[[BR]] Internet Explorer 8 (PC)

Assuming no-one finds any bugs with this I move to integrate this into the next release.

All tests done on the default theme, I imagine it affects all themes.

To be clear this is how the style sheet reads with the changes:

.slides li { /* this is the individual thumbnail container in collection/album view */
	display: -moz-inline-stack; /* for FireFox 2 as it does not support inline-block */
	display: inline-block;
	vertical-align: top;
	margin: 0 10px 10px 0; /* 2nd number controls the distance between thumbnails */
	padding: 0;
}

.tag { /* this controls the text under a thumbnail in collection/album view with caption/download checkbox */
	text-align: center;
	white-space: normal;
	overflow: hidden; /* added for long, overflowing descriptions */
}

With this is appened to head.php:

	<!--[if lt IE 8]>
	<style>
	.slides li { /* this is a workaround for IE6/7 because they do not support inline-block correctly */
		zoom: 1;
		display: inline;
	}
	</style>
	<![endif]-->

A quick check on Firefox 2.x and 3.5 and if all OK I think is resolves this bug.

Thanks.

[mrzippy]

Important Addition

I noticed that it looks a little odd with the rows being left aligned as some can be considerably shorter!

But there is a simple solution by justifying the content!

Add this to ul.slides

	text-align: justify;

Works in all the browsers tested above excepted IE6/IE7 which remain left aligned, maybe there is another workaround for those browsers, but a least most viewers see the nicely justified content.

[mrzippy]

Above code is on my test site.

 http://mrzippy.org.uk/sarah/

[kimparsell]

Replying to sidtheduck:

I've tested the fix you posted. It works fine, and should be included in the next commit.

mrzippy: I've tested your suggestion of text-align: justify, and I recommend that we not include that - reasons follow.

While your suggestion does spread out full rows of thumbnails, any partial row will not be justified, causing those thumbnails not to line up with the ones above it. That throws the visual grid out of whack.

The eye naturally travels left to right in a straight line, as well as up and down. Having to zigzag across a row is difficult enough without having to do the same thing down the page. I've attached a screenshot of your gallery with the thumbnail divs outlined in blue and red grid lines (horizontal and vertical) to demonstrate the "eye travel" lines I'm referring to.

Most users, after installing, will customize the size of their thumbnails and whether they are sized by width, height, long side or square, and the possibilities for text-align: justify to mess up their gallery layouts multiplies dramatically.

I realize you like the way it works since you are displaying both portrait and landscape thumbnails, but a large number of our users could be upset about it.

It would be better for you to add that as a customization to your own theme, than for us to have to tell other users that they now need to remove that line from their stylesheet to fix their issues.

[kimparsell]

mrzippy's gallery w/grid lines

[mrzippy]

Sounds cool to me.

[tazmanboo]

I am having the same problem on Firefox. I checked the CSS folder and it does not have a gallery.css. I have the following CSS files: lightbox.css, login.css, & admin.css. I had trouble getting Plogger to run on my site. The tech support guys from www.fatcow.com were able to get it up and running. I don't know if they changed the names. This is my link  http://photosurety.com/plogger-folder/index.php?level=album&id=3

[kimparsell]

Replying to tazmanboo:

I am having the same problem on Firefox. I checked the CSS folder and it does not have a gallery.css. I have the following CSS files: lightbox.css, login.css, & admin.css. I had trouble getting Plogger to run on my site. The tech support guys from www.fatcow.com were able to get it up and running. I don't know if they changed the names. This is my link  http://photosurety.com/plogger-folder/index.php?level=album&id=3

You are looking in the wrong folder. The 3 files you listed are for the admin section, not for your theme.

Themes reside in the plog-content/themes folder. There are 3 folders inside that: air, default, and lucid. All 3 of those folders have a gallery.css file in them. Check those please.

The fix listed above is only for the default theme. You are currently running the Air theme. Try making the above changes to the default theme and switch your gallery to that one to see if the issue goes away.

[tazmanboo]

I tried adding the code and I really messed it up. I get this message at the top of the page: Notice: Use of undefined constant �theme_functions - assumed '�theme_functions' in /hermes/web01/b2684/moo.mrherrera/plogger-folder/plog-content/themes/default/header.php on line 1

Notice: Use of undefined constant php� - assumed 'php�' in /hermes/web01/b2684/moo.mrherrera/plogger-folder/plog-content/themes/default/header.php on line 1

Warning: include(�theme_functionsphp�) [function.include]: failed to open stream: No such file or directory in /hermes/web01/b2684/moo.mrherrera/plogger-folder/plog-content/themes/default/header.php on line 1

Warning: include() [function.include]: Failed opening '�theme_functionsphp�' for inclusion (include_path='.:/usr/local/lib/php-5.2.12/lib/php') in /hermes/web01/b2684/moo.mrherrera/plogger-folder/plog-content/themes/default/header.php on line 1

I am just putting it back to air, since I did not copy the original file.