zenphoto forums » Usage Support

Horizontal & vertical thumbnail spacing problems

(15 posts)
  1. os07

    Contributor
    Joined: Oct '07
    Posts: 114

    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.

    Posted 2 years ago #
  2. os07

    Contributor
    Joined: Oct '07
    Posts: 114

    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.

    Posted 2 years ago #
  3. sbillard

    Contributor
    Joined: May '07
    Posts: 10,427

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

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

    Posted 2 years ago #
  4. Zenphoto development team
    acrylian

    Developer
    Joined: Jul '07
    Posts: 15,037

    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.

    Don't forget to read the Forum rules and usage resources
    Posted 2 years ago #
  5. os07

    Contributor
    Joined: Oct '07
    Posts: 114

    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?

    Posted 2 years ago #
  6. Zenphoto development team
    acrylian

    Developer
    Joined: Jul '07
    Posts: 15,037

    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).

    Don't forget to read the Forum rules and usage resources
    Posted 2 years ago #
  7. os07

    Contributor
    Joined: Oct '07
    Posts: 114

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

    Posted 2 years ago #
  8. egrigson

    Member
    Joined: Jun '12
    Posts: 18

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

    Thanks.

    Posted 2 years ago #
  9. Zenphoto development team
    acrylian

    Developer
    Joined: Jul '07
    Posts: 15,037

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

    Don't forget to read the Forum rules and usage resources
    Posted 2 years ago #
  10. egrigson

    Member
    Joined: Jun '12
    Posts: 18

    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. :-)

    Posted 2 years ago #
  11. Zenphoto development team
    acrylian

    Developer
    Joined: Jul '07
    Posts: 15,037

    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.

    Don't forget to read the Forum rules and usage resources
    Posted 2 years ago #
  12. risottto

    Member
    Joined: Jun '12
    Posts: 24

    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:

    <div class="image">
    					<div class="imagethumb"><a href="<?php echo html_encode(getImageLinkURL());?>" title="<?php echo getBareImageTitle();?>" style="background:url(<?php echo html_encode(getImageThumb()) ?>) center center no-repeat;"></a></div>
    				</div>
    Posted 2 years ago #
  13. Zenphoto development team
    acrylian

    Developer
    Joined: Jul '07
    Posts: 15,037

    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.

    Don't forget to read the Forum rules and usage resources
    Posted 2 years ago #
  14. Anonymous

    Unregistered

    Posts: 2

    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.

    Posted 2 years ago #
  15. egrigson

    Member
    Joined: Jun '12
    Posts: 18

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

    Posted 2 years ago #

RSS feed for this topic

Reply

You must log in to post.