Horizontal & vertical thumbnail spacing problems

os07

I am working on an album with both horizontal and vertical thumbnails, Zenpage theme. On pages containing only horizontal or only vertical images, the thumbs line up and space just fine.

But on pages that have both types, what happens is I get a white space where a horizontal thumbnail would fit, followed by more thumbnails, then verticals, etc. It seems that if there is even one vertical at the end of a page of thumbnails, it somehow prevents the horizontal thumbnails from occupying what is instead seen as white space.

os07

The problem is that the thumbnails that are being generated are not all the same size. I have set in the Zenpage theme options for the thumb size set to 230px.

But if I go and have a look at, say, the horizontal thumbnails, I see that their height varies between 136px - 153px. This throws off good alignment on some album pages, and leaves big empty spaces here and there where thumbs of greater height push too far down the page - or don't occupy enough space, vertically.

Where/how does one set a fixed thumbnail height? I was looking at the code on the album.php file,

`<?php printImageThumb(getBareImageTitle()); ?>`

I know there were some MaxSize or MaxSpace functions here that addressed this, but I am unable to find the correct references in the documentation.

sbillard

http://www.zenphoto.org/documentation/

click on the index and then on the letter that starts the function you are querying.

acrylian

We have also a handy article with some direct links:
http://www.zenphoto.org/news/functions-documentation
You are looking for the set of maxspace image functions.

os07

Thanks. I have looked in all of the obvious places, but still don't see those functions. Are they under Image functions? Template functions?

Also, how does one have the code distinguish between horizontal and vertical images?

acrylian

Click on http://www.zenphoto.org/documentation/elementindex.html and you will see a long list will all functions and methods. Then use the browser built in page search for "maxspace".
These are template functions.

The sense of the maxspace function is to define a width x height size that the image then does not exceed. The function takes care about landscape or portrait itself and resizes accordingly.

If you want to do it yourself there is also a function to check for landscape (search for that term on the functions).

os07

Thanks so much! I don't know why I failed to find these references before.

egrigson

I'm working on a theme with exactly the same requirement, to have a mixture of vertical and horizontal thumbnails (to mimic www.thefunkysite.com). Can you share the code you're using os07?

Thanks.

acrylian

Look at the theming tutorial first please and then search the documentation and search for the maxspace functions as mentioned above.

egrigson

I've been through the theme tutorial and I've started familiarizing myself with the available functions, I just figured if someone's 'been there, done that' I could get a jumpstart. :-)

acrylian

Sure, that's what this forum is for but we try to help to help yourself... So use the set of maxspace functions. In general this is a html/css layout issue which is just not directly Zenphoto specific.

risottto

Easy fix is to set a fixed height and width to square on your image thumbnail in the CSS, .imagethumb I think. Also if you want to easily center all your thumbnails vertically (which is a pain in CSS sometimes) you can use PHP to call the thumbnail images into the background URL which is easily centered (and scaled if you so desire) code I used in album.php image loop is:

`

" title="<?php echo getBareImageTitle();?>" style="background:url(<?php echo html_encode(getImageThumb()) ?>) center center no-repeat;">

`

acrylian

You can center vertically if you use a browser capable of CSS3 and use `display: block-table` as tables are the only elements capable of that actually.

I think his problem was uncropped thumbs and for that within a fixed w x h you need to use the maxspace image functions.

Unknown

Its a good idea! i would appreciate if we are giving more options to the users. The space utilization is the idea that we can use very efficiently.

egrigson

Thanks for the tips everyone, using the MaxSpace functions was very easy and I've got my thumbnails displaying nicely. Thanks!