Thumbs to display in rows and columns

bpetruzzo

I'm working on putting together my own theme and it's going fairly smoothly, but one thing that I can't seem to figure out is how to make the images display in rows and columns. I'm almost certain that there must be something in the css, but I can't find it.

I studied the default theme carefully, both the album.php file and the css files and I can't find anything that should be throwing it off.

I started my theme based on the simple+ theme. In that theme, the while statements have some extra code that I've been trying to decipher what exactly it does but can't figure it out.

The code looks like this.

`

<?php $x++; endwhile; ?>

<?php $x = 0; while (next_image(false, $firstPageImages)): ?>

" title="<?php echo getImageTitle();?>">

<?php printImageThumb(getImageTitle()); ?>

<? if ($x == 2) { ?>

<?php $x = 0;} ?>

<?php $x++; endwhile; ?>

`

The extra code is in the while statements, as well as before and after the clear div. Now, when I add this code to my own theme, it DOES start to separate into columns and rows, but not in a discernible pattern.

I suspect my question is answered in some fairly simple CSS, but I think I reached a gap in my knowledge and I'm not exactly sure what questions to ask to find the answer.

Can someone help?

bpetruzzo

Also, how to do you add the nice green background to your code quote? As you can see, I botched it nicely. brackets, perhaps?

acrylian

You have to use backticks to get the green code.

The css works with float. You put all images within a div that floats left. If then all images are the same size, there will be as many images in a row as the space you set with the site's css surounding them allows. If there is no more space it starts the next row. So technically these are only rows.

Very simple example:
`

`
This should give you 5 images in a row. If you want to know more about float and css please try a google search.

bpetruzzo

Yeah, see that's what I thought. But It wasn't acting at all as expected. If I were to write the code in like that, it works. But, if I rely on the "while" statements to write the code, it displays in one column straight down the page.

It seemed like maybe there was something else to take into consideration.

trisweb

It's because you've got the `

` *inside* your while loop. It needs to be outside it, so there's one 'images' div and many 'imagethumb' divs. Like so:

`

<?php $x = 0; while (next_image(false, $firstPageImages)): ?>

<?php printImageThumb(getImageTitle()); ?>

<?php if ($x == 2) { ?>

<?php $x = 0; } ?>

<?php $x++; endwhile; ?>

`

You also shouldn't need to do this fooling around with $x, it should just flow naturally as long as you have `float: left;` set as Acrylian said.

bpetruzzo

My div structure mirrors the default theme. Where in the default theme the "albums" div sits just outside the while statement, then there is another div containing thumbs, title and description.

This is the way my exact index.php file looks:

`

<?php while (next_album()): ?>

" title="<?php echo getAlbumTitle();?>">

<?php printAlbumThumbImage(getAlbumTitle()); ?>

" title="<?php echo getAlbumTitle();?>">

<?php printAlbumTitle(true); ?>

<?php printAlbumDesc(true); ?>

<?php endwhile; ?>

`

Unless I'm missing something that's almost a perfect mirror of the div structure in the default theme.

This is my CSS for those divs. Most of which was stolen from the default theme:

`#zpcontent {

width:780px;

float:left;

padding-top:20px;

padding-bottom:20px;

background-color:#91DBDD;

}

#album {

width:235px;

height:95px;

float:left;

margin: 0 25px 25px 0;

background-color:#D9FFA0;

}

.albumthumb {

float: left;

width: 95px;

cursor: pointer;

background-color:#4C48A8;

}

.albumtitle {

width:140px;

float:left;

background-color:#A3B2CC;

}

.albumdesc {

width:140px;

float:left;

background-color:#7B869A;

}`

Honestly, I have no idea what $x does, but it was in the simple+ theme and adding it produced a change, although I could never quite figure out what exactly it was.

I'm sorry if I'm being dim here, but I really really appreciate the help. I absolutely love the zenphoto software and really want to get this figured out.

acrylian

So again an example for the main structure (of course it's float: left not right..):

`

Put here what you want to print

`

bpetruzzo

That's exactly the structure I'm using.

`

`

When I study the default theme, that's the same structure it's using. I also stripped out all CSS unrelated to these specific divs and it still just sends the images straight down the screen.