Browse page: how can I place each thumb in a 'container' of uniform size?

[owen-b]

Hi again folks!

I've decided I want my thumbs to display the entire photo, maintaining the original aspect ratio. This makes for a messy looking 'browse' page. I know how I want it to look but am unsure how to achieve it.

I want each thumbnail on the page to appear in a square bounding box, so that the boxes tile the way the square thumbnails used to. Within the box each thumbnail should sit vertically and horizontally centred.

In the CSS for the browse page I can alter the .thumbnails class but setting the width or height to the height I want for the boxes inevitably stretches the thumbnail instead - I can't work out what alterations/additions I need to make to the HTML or the CSS to achieve what I want.

Can anyone help?

Many thanks.

[owen-b]

Does anyone have ANY idea? :(

[Dennis]

only set a width and let the browser determine the height. Perhaps add a margin-top and bottom to even things out.

[owen-b]

Cheers, Dennis, but setting a width on the .thumbnails class for the Browse page just stretches out any thumbnails that aren't already that size - specifically, the portrait orientation ones. That is the problem I had in the first place which prompted me to ask here how I can code the page so that the content that the <THUMBNAILS> tag calls all sits centred in their own square box.

I'm using the Delicious theme and although the front page is heavily hacked, the Browse page is untouched. Would it help if I posted the relevant HTML and CSS that relates to the problem? The <THUMBNAILS> tag sits in a 'browse_thumbnails' div which is a set width and floated left, which itself sits in a 'browse' div that's a slightly wider width to accomodate the Categories column on the right. I need to work out how to get the content of <THUMBNAILS> into their own individual square boxes, rather than just being dumped into the 'browse_thumbnails' div and left to work their positioning out for themselves.

Because this solution I am looking for needs a box for each thumbnail, and because each thumbnail is being called collectively by one tag, I suspect perhaps I need to create that box at a much more core level, so that it's called when the thumbnails themselves are called. I have no idea how I'd create a new tag, though, and want to be careful not to alter <THUMBNAILS> itself as I think it is used elsewhere in the template.

[jaywilliams]

Yea if you wrap each thumbnail in a div tag, you can set the width/height on the div tag to a large enough square, and then float them to the left. That's probably the best way.

As to achieve it, the easiest way to simply do a little hack with the <THUMBNAILS> tag, but if you don't want to worry about an upgrade un-doing your hack, you'll have to write your own little addon.

[Dennis]

Did we add a class to the thumbnails itself so you can set the width and the height directly?

[owen-b]

Jay: yes, wrapping each thumbnail in a div is what I would do if the HTML allowed me, but because all the thumbnails are called at the same time by a single <THUMBNAILS> tag this is where I'm falling flat. I don't have the skills to go poking around in the PP core, nor do I know where to start when it comes to writing an add-on!

I'd have thought, though, that creating a new tag just for this purpose, copying the <THUMBNAILS> tag into it and tweaking it accordingly would be the simplest thing to do, but not knowing how complex the PP core is I don't know if that's the case.

Dennis: I'm going to post the HTML and the CSS appropriate to my page so that you can see what I'm talking about! :)

[owen-b]

Here's the HTML that comes after the header div has closed:

<div id="browse_box">

<div id="browse_thumbs">
<THUMBNAILS>
</div> <!-- browse_thumbs -->

<div id="browse_categories">
You are now viewing ::<br />
<span class="viewing">"<CATEGORY_OR_DATE_NAME_PAGED_ARCHIVE>"</span><br /><br />
Choose another category ::<br />
<CATEGORY_LINKS_AS_LIST>
</div> <!-- browse_categories -->

<div style="clear:both;"></div>

</div> <!-- browse_box -->

And here's the CSS that pertains to this specific part of the site:

#browse_wrapper {
position:relative;
width:712px;
margin-right:auto;
margin-left:auto;
}

#browse_box {
text-align:center;
position:absolute;
top:60px;
}

#browse_thumbs {
width:540px;
float:left;
text-align:left;
margin-right:2px;
}

#browse_thumbs .thumbnails {
border:none;
margin:0 2px 4px 2px;
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}
#browse_thumbs .thumbnails:hover {
border:none;
margin:0 2px 4px 2px;
filter:alpha(opacity=50);
-moz-opacity:.5;
opacity:.5;

}
#browse_categories {
width:150px;
float:right;
text-align:left;
background:#222;
padding:10px;
height:100%;
}

.viewing {
font-size:14px;
font-weight:bold;
color:white;
}