Member
Member
os07   08-06-2012, 20:30
#1

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.

Member
Member
os07   08-06-2012, 21:31
#2

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,

``

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.

Member
Member
sbillard   08-06-2012, 22:19
#3

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

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

Administrator
Administrator
acrylian   09-06-2012, 08:12
#4

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.

Member
Member
os07   11-06-2012, 14:16
#5

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?

Administrator
Administrator
acrylian   11-06-2012, 15:22
#6

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

Member
Member
os07   13-06-2012, 21:02
#7

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

Member
Member
egrigson   25-06-2012, 06:50
#8

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.

Administrator
Administrator
acrylian   25-06-2012, 08:54
#9

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

Member
Member
egrigson   26-06-2012, 21:30
#10

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

Administrator
Administrator
acrylian   27-06-2012, 09:37
#11

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.

Member
Member
risottto   27-06-2012, 14:21
#12

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 [i]background[/i] URL which is easily centered (and scaled if you so desire) code I used in album.php image loop is:

`

                " style="background:url() center center no-repeat;">

`

Administrator
Administrator
acrylian   27-06-2012, 14:56
#13

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.

Unregistered
Unregistered
Guest   28-06-2012, 11:38
#14

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.

Member
Member
egrigson   29-06-2012, 13:23
#15

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

  
Powered By MyBB, © 2002-2026 MyBB Group.
Made with by Curves UI.