Centering / alignment of thumnails

[alphabono]

I was wondering if it's possible to center the thumbnails on the index page and in the gallery display when you view many photos at once having a mixture of landscape and portrait layout? Basically, what I want to do is to imagine that every photo (landscape or portrait) occupies the same dimensions defined by the longest side. That way, the spacing between photos when you have both landscape and portrait will be more even. Anyone know if this is an option or if not, what code and where I would have make changes?

Cheers,

Ranken

[Taligent]

Hi Ranken,

I played around with the same alignment through CSS, though didn't end up using it. In /pagetemplates/list/default.php look for:
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr>

<?php print $filler_td_html; ?>
<td width="100%">
<?php print $list_html; ?>
</td>
<?php print $filler_td_html; ?>

</tr></table>$list_html prints out the thumbs - to center these, each of the <img> tags need to be set to "vertical-align: middle". So start by giving the container table a class to target it in CSS:

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="centerthumbs"><tr>

<?php print $filler_td_html; ?>
<td width="100%">
<?php print $list_html; ?>
</td>
<?php print $filler_td_html; ?>

</tr></table>
Now for the CSS - open up /styles/whatever-style-is-being-used.php. Look for:

$stylesheet = "<style type=\"text/css\" media=\"screen\"> <!--
SAMP {
font-style: normal;
}

..and add an entry for vertical centering:

$stylesheet = "<style type=\"text/css\" media=\"screen\"> <!--
.centerthumbs img {
vertical-align: middle;
}
SAMP {
font-style: normal;
}
That's it for the list.php thumbnail output. To do the same for the index pages, open up /indexstyles/1.php (or whatever index style is being used) and look for:
// print out microthumbs in selected order style
ee_printoutmicrothumbs();



ee_bestrated_microthumbs ($e,"3");

print "<br><br>";...and replace with:
// print out microthumbs in selected order style
print "<div class=\"centerthumbs\">";
ee_printoutmicrothumbs();



ee_bestrated_microthumbs ($e,"3");

print "</div><br><br>";
If you're using groups, you'll also need to edit /indexstyles/groupindex.php:
print "<table align=\"right\" width=\"{$thumbplacebo}\" cellpadding=\"3\" border=\"0\"><tr><td>";
print "<table cellpadding=\"0\" border=\"0\"><tr><td valign=\"top\">";
get_group_thumbs($groupthumbs_style,$groupid2,$s_g roupthumbs_amount,$s_groupthumbs_amount,$groupthum bs_size);

...and replace with:

print "<table align=\"right\" width=\"{$thumbplacebo}\" cellpadding=\"3\" border=\"0\"><tr><td>";
print "<table cellpadding=\"0\" border=\"0\" class=\"centerthumbs\"><tr><td valign=\"top\">";
get_group_thumbs($groupthumbs_style,$groupid2,$s_g roupthumbs_amount,$s_groupthumbs_amount,$groupthum bs_size);

Despite appearances it's a simple fix - should take no more than 2 minutes.

-Nikhil

[ArtM]

I'm not sure this what you are looking for, but have you seen the 'Fit in a box' option in EE editors Settings-Resize methods?

- Art

[alphabono]

Thanks Nikhil, I applied the changes you suggest and it does almost everything I was trying to accomplish!

The other thing I wanted to do was to maintain the spacing between every image, regardless of orientation. As it stands now, 5 portrait images will occupy less horizontal space on the screen compared to 5 landscape images. What I want is to make it so that those 5 portrait images will be centered to align with the 5 landscape images (i.e. some blank space between the portraits so that the dimensions are equal to that of the landscape images). Another way to think of it would be that every image, regardless of orientation has it's own square in which it is centered. The squares always line up, as all sides of the square are equal.

Anyone know how to accomplish this?

Cheers,

Ranken

[Taligent]

This was more involved than it should have been - the problem is that we'd like to see the thumbs displayed inline with a set width to create a grid of thumbs, but inline elements cannot have a set width (no idea what the rationale is for this). The workaround is to set the individual thumbs in <div>'s, set a width to the <div>'s, and then float all of the <div>'s so the thumbs will fall in line. The extra code is for vertical centering and is better explained here (http://www.jakpsatweb.cz/css/css-vertical-center-solution.html).

Open up /outputstyles/thumbs.php and look for:

print "<a class=\"zero\" href=\"photo.php?photo=";
print $all_array[$y]["id"];
Replace with this code to set up the <div>'s needed for inline display and vertical centering:

print "<div class=\"thumbgrid1\"><div class=\"thumbgrid2\"><div class=\"thumbgrid3\"><a href=\"photo.php?photo=";
print $all_array[$y]["id"];

Also look for:

print $goodlink;
print "</a>";
...and replace with:
print $goodlink;
print "</a></div></div></div>";

Now open up /styles/whatever-style-in-use.php and use the following code (this includes the code for vertically centering thumbs on the index pages):
$stylesheet = "<style type=\"text/css\" media=\"screen\"> <!--
div.thumbgrid1 {
display: table;
width: 130px;
height: 130px;
_position: relative;
float: left;
overflow: hidden;
}
div.thumbgrid2 {
display: table-cell;
_position: absolute;
_top: 50%;
vertical-align: middle;
}
div.thumbgrid3 {
width: 130px;
_position: relative;
_top: -50%;
text-align: center;
}
.centerthumbs img {
vertical-align: middle;
}
SAMP {
font-style: normal;
}
This produces a grid-like thumbnail display - along the lines of the output from Gallery (http://gallery.menalto.com), except in a flexible (that is, non-stupid) way. Gallery uses a table, which requires a set number of columns so users with a 1920x1440 display resolution will see the same number of thumbs per row as a user with an 800x600 display. The grid method here will place as many thumbs as possible per row within a given window size.

The downside is that the grid squares have hardcoded height/width - in the above code, 130px, but this can be set to any desired dimension (just change all three instances of the height/width).

Ideally, EE would determine the longest dimension of a thumb and set that in a variable, which could then be used in the above CSS code to make the thumb grid dimensioning completely automatic - though I haven't looked into it. Perhaps Pekka will have some thoughts on the matter, though having a hardcoded size isn't much of pain as galleries usually keep to a single thumb size.

-Nikhil

[alphabono]

I didn't see the fit in a box option. It doesn't seem to change anything when I use it though. I would expect it to either do what I want (add blank space to either side of the image), crop the image, or redimension the image to have equal sides. As far as I can tell it does none of the above, and it seems to behave the same as choosing the longest side.

Anyone have any insight into the fit in a box option?

I'll now try to implement Nikhil's excellently explained second set of code changes . . . wish me luck.

Cheers,

Ranken

[alphabono]

Nikhil - Amazing work! It does exactly what I had in mind! Thanks so much!

Cheers,

Ranken