Thread

I’m wondering if it’s possible to make entries be in two rows. I know how to make it in two columns with this thread: http://ellislab.com/forums/viewthread/5106/ But I was wondering if anyone knows of any solutions for how to make two rows.

I would like to have a list of photos, but be displayed horizontally as this:

img1
img2
img3
img4
img5
img6

to be this

img1 img3 img5
img2 img4 img6

is this possible?

The only way I can see to do this would be through the use of relative positioning drive by some php scripting, since what you desire requires you to operate outside the normal flow of data retrieval and html flows.  You would actually have columns with two rows.  Column 1 would have row 1 image1, then row 2 image2, then new column with row 1 image3, then row 2 image 4, and so on.  Then number of rows would be dependent on the integer of the number of images divided by 2.  The use of positioning will give you the ability to force the images to line up as if they were actually just held in 2 rows.

You could use CSS3 selectors for this. Here is an example: http://christianhomes.com/index.php/brag-book

I made boxes for my images with a margin-right but used…

div:nth-of-type(3n) { margin-right: 0; }

...to take the margin off of the last image on each row. You could do this without the extra divs too by just adding a class to the images. In that case it would be something like:

img:nth-of-type(3n) { margin-right: 0; }

Advanced selectors do not work in Internet Explorer but this script will take care of that: http://gandrweb.com/home/ie_scripts

Couldn’t you just use CSS to set a fixed width for each image in that container and float all of them left (or right)? You could do something like:

#divname img {
float: left;
width: 200px;
margin-right:20px;
}

And as each of them appears they will be floated left and the subsequent one will appear to the right of it. When you run out of space they will fall into a next row.

EDIT: My idea is is the same thing Gareth is saying, but his will take care of that extra right margin on the third image of each row.

Couldn’t you just use CSS to set a fixed width for each image in that container and float all of them left (or right)? You could do something like:

That won’t position the entries in the way c_k wants…

I think you’re better off using a combo of PHP magic and some good ol’ CSS. Set the PHP parsing to output:

<div class="container">
  {exp:weblog:entries limit='6'}
<?= if(({count})%2 == 1) : ?>
    <div class="column">
<?php endif; ?>
      <div class="row">{image}</div>
<?= if(({count})%2 == 0) : ?>
    </div>
<?php endif; ?>
  {/exp:weblog:entries}
</div>

Then you would just set the width of the columns and float it (like in TonyGeer’s example).

If your images are different heights and you still want them to line up properly you could always use [shame] tables [/shame].

As long as CSS3 isn’t widely supported yet (read: everyone does except the good people at Microsoft) CSS3 is not the way to go. Not for something as vital as positioning at least.

Greetz,
Wouter

Wouter, you’re right I misread the numbering on his img’s.

Thanks for these solutions! I’ll have to spend some time fiddling around.

Actually it doesn’t matter the order the images appear in the rows, just as long as the entries are listed in two separate rows.

If that’s the case I would definitely go with TonyGeer’s solution. Less code is always better..

TonyGeer’s solution only allows me to put it into two columns not rows.

I tried the php solution but wasn’t able to get it to work. I’m new with using php, is there more to placing it within the code?

How many photos are there in total? You can limit it to two rows if you want by reducing the widths of the images, that way you’d get more columns but limit it to two rows.

Great thanks! I got it working.

However the div tags and php that I’m using is conflicting with another script on the page. I’m trying to have the images scrollable with javascript. I’m just wondering if there is a way to program the same two rows but instead make it in a table. Is this also possible?

Hey CK

Look up the EE Switch option. That should help you do the table rows.