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 1 year 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 1 year ago #

  3. Zenphoto development team
    sbillard

    Chief Developer
    Joined: May '07
    Posts: 9,818

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

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

    Don't forget to read the Forum rules and usage resources
    Posted 1 year ago #

  4. Zenphoto development team
    acrylian

    Developer
    Joined: Jul '07
    Posts: 13,495

    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 1 year 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 1 year ago #

  6. Zenphoto development team
    acrylian

    Developer
    Joined: Jul '07
    Posts: 13,495

    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 1 year 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 1 year 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 11 months ago #

  9. Zenphoto development team
    acrylian

    Developer
    Joined: Jul '07
    Posts: 13,495

    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 11 months 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 11 months ago #

  11. Zenphoto development team
    acrylian

    Developer
    Joined: Jul '07
    Posts: 13,495

    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 11 months 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 11 months ago #

  13. Zenphoto development team
    acrylian

    Developer
    Joined: Jul '07
    Posts: 13,495

    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 11 months 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 11 months 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 11 months ago #

RSS feed for this topic

Reply

You must log in to post.