Textpattern CMS

#1 2011-09-11 16:15:07

Algaris

Member

From: England

Registered: 2006-01-27

Posts: 562

Aligning thumbnails next to each other

I’d like to have a series of thumbnails next to each other in a horizontal line with a sight padding and their caption underneath each thumbnail. The thumbnails need to wrap according to the width of the DIV they reside in (for example three images per row).

If I don’t float the images they appear underneath each other in a vertical line. If I do float the images they cascade diagonally from each other with the caption appearing at the top right of the thumbnail. I’m obviously doing something wrong but can’t see what it is.

This is the code I’m using

<txp:images category="art">
<txp:image class="float-left" />
<txp:image_info type="caption" />
</txp:images>

CSS
.fl { float: left; }

Last edited by Algaris (2011-09-11 16:15:23)

#2 2011-09-11 16:57:32

jakob

Admin

From: Germany

Registered: 2005-01-20

Posts: 4,752

Website

Re: Aligning thumbnails next to each other

Put the image and its caption in a wrapper:

<txp:images category="art">
  <div class="frame">
    <txp:image /> 
    <txp:image_info type="caption" /> 
  </div>
</txp:images>

Or in html5:

<txp:images category="art">
  <figure class="frame">
    <txp:image /> 
    <figcaption><txp:image_info type="caption" /></figcaption>
  </figure>
</txp:images>

p. CSS:

.frame { 
  float: left;
  padding: 0 20px 20px 0;
  }

(note: in your example your css and class attribute don’t match).

---

TXP Builders – finely-crafted code, design and txp

#3 2011-09-11 17:10:19

Algaris

Member

From: England

Registered: 2006-01-27

Posts: 562

Re: Aligning thumbnails next to each other

jakob wrote:

p. (note: in your example your css and class attribute don’t match).

Oops. That’s my fault a copy and paste error. They do match in my code. Thank you for your code. I’m trying it out now.

#4 2011-09-11 18:14:48

Algaris

Member

From: England

Registered: 2006-01-27

Posts: 562

Re: Aligning thumbnails next to each other

Hmmm. For some reason when I try just HTML it works fine.

<div class="frame">
    <img src="images/4t.jpg" />
    <img src="images/5t.jpg" />
    <img src="images/6t.jpg" />
    <img src="images/7t.jpg" />
</div>

But when I try to use TXP tags the images cascase diagonally instead of going in a straight line.

<txp:images category="art">
    <div class="frame">
        <txp:image /> 
        <txp:image_info type="caption" /> 
    </div>
</txp:images>

#5 2011-09-11 19:13:31

GugUser

Member

From: Quito (Ecuador)

Registered: 2007-12-16

Posts: 1,473

Re: Aligning thumbnails next to each other

Algaris schrieb:

But when I try to use TXP tags the images cascase diagonally instead of going in a straight line.

Look at the resulting HTML and style it with CSS.

#6 2011-09-11 19:44:16

jakob

Admin

From: Germany

Registered: 2005-01-20

Posts: 4,752

Website

Re: Aligning thumbnails next to each other

Two ideas:

Add the attribute break="" to txp:images (I’m always forgetting that):

<txp:images category="art" break="">
    <div class="frame">
        <txp:image /> 
        <txp:image_info type="caption" /> 
    </div>
</txp:images>

and / or, define your frame more explicitly with css:

.frame { 
  float: left;
  padding: 0 20px 20px 0;
  display: block;
  width: 200px; /* replace 200px with your image width */
  overflow:hidden;
  }

---

TXP Builders – finely-crafted code, design and txp

#7 2011-09-12 07:15:43

Algaris

Member

From: England

Registered: 2006-01-27

Posts: 562

Re: Aligning thumbnails next to each other

Thank you so much. That did just the trick.