Text between rows of fotoalbum

[fooBar]

hey,
I have a fotoablum on my page via the fotoalbum module.
I insert the foto album via a tag like that:

Code: Select all

{cms_module module='album' albums='22'}

is it now possible to insert text between rows of the images (e.g. 2 images, below them a little text, than the next two images, than again a small text and so on ...)?

thanks

[Vin]

You can do it via comments. Just wrap it something like that: {if $onepicture->comment!=''}{$onepicture->comment}{/if}, possibly wrap it with some HTML tags and fill in the comment of the second (even) image. Be sure you've placed the tags under the images in the template.
Possibly some CSS tweaks. (I myself made dl/dt/dd gallery, where dts have the similar function).

[fooBar]

ah I understand. thanks for the idea, I'll try it out

[Caspar]

Hi Vin, hi fooBar,

@Vin: Thank you for pointing me here, this post has been so useful!
By the way: What exactly do you mean by

dl/dt/dd

? Just being curious...

@fooBar: I guess I've been up to something similar, only my comments should be displayed in an extra table cell on the left. In case it helps here's the Album template I came up with:

Code: Select all

{* This template lists thumbnails in a table and the full size versions are shown in a popup *}
{* Modified version providing an additional table cell with picture comment in case there is one *}

{* Open image table *}
 <table class="pictable" summary="{sitename}, {$album->name}" cellspacing="0" cellpadding="0">

	{foreach from=$pictures item=picturesrow}
		<tr class="picrow">
		
		{foreach from=$picturesrow item=onepicture}
{* Add comment only if that picture does have a comment *}		
			<td class="commentcell">
			{if $onepicture->comment!=''}{$onepicture->comment}{/if}
			</td>
			
{* Add thumbnail pics *}
			<td class="piccell">
				<a href="javascript:PopupPic('{$onepicture->picture}','{$onepicture->name|replace:'\'':'\\\''}','{$onepicture->width}','{$onepicture->height}')"> <img src="{$onepicture->thumbnail}" alt="{$onepicture->name}" /></a>
			</td>
{* Close down image table *}
			{if ($onepicture->number==$picturenumber and !$picture)}{assign var=picture value=$onepicture}{/if}
		{/foreach}
		</tr>
	{/foreach}
 </table>
 
{* Notifier in case of no images *}
{if $picturecount==0}No images.<br/>Keine Bilder.{/if}

And that's the CSS for it:

Code: Select all

/* POPUP TABLE GALLERY */
/* NOTE: These css styles go for thumbnails with either
a height or a width of 150px. Less should be okay, for
larger thumbs you'd need some adjustments.*/

table.pictable {
 border:0;
}
tr.picrow {
 height:150px; /* change to your thumbnail height */
 vertical-align:middle;
}
td.piccell {
 width:150px; /* change to your thumbnail width */
 text-align:center;
}
td.commentcell {
 text-align:left;
 vertical-align:top;
 padding-right:20px; /* some air to the thumbnails */
 font-size:xx-small; /* small font-size, change if you want it larger */
}
/* END POPUP TABLE GALLERY */

All the best!
Caspar

[Vin]

dl/dt/dd

Oh, the semantics in the web...
Well, a table is probably the first thing which would come to your mind when trying to make an imagegallery in (X)HTML. I myself hand-coded it in tables, but I had to care about every 5 images in the row. And when I wanted more images, it became a frustration, because I didn't know much scripting in my editor, just macros. So I've come up with another solution - definition lists. This bunch of tags just fit my needs - see link http://www.maxdesign.com.au/presentation/definition/. But, instead of using the 'definition term' as an image, I used it as a common comment for the group of images, which are 'definition descriptions'. The semantics is IMHO correct, as the images are the segments of the meaning of the term. However, there are more visible advantages - since you don't have the images hard coded in rows, you can have flexible image list. And since Internet Explorers (at least under 7) render the table only after loading the contents of the entire table, it's even better for IE users (so are the ul/li and div galleries). But you've got to be good at CSS and with the style turned off it doesn't look so good...