Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

Algaris
Member
From: England
Registered: 2006-01-27
Posts: 535

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)

Offline

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

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,578
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

Offline

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

Algaris
Member
From: England
Registered: 2006-01-27
Posts: 535

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.

Offline

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

Algaris
Member
From: England
Registered: 2006-01-27
Posts: 535

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>

Offline

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

Offline

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

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,578
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

Offline

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

Algaris
Member
From: England
Registered: 2006-01-27
Posts: 535

Re: Aligning thumbnails next to each other

Thank you so much. That did just the trick.

Offline

Board footer

Powered by FluxBB