Album list shown horizontally rather than vertically

[Charmie]

Hi,

I am hoping this is a simple problem.
I am using the 'Table template' with the Album module as I prefer to thave the large image view in the page rather then floating.

The only thing is the list of album thumbnails are shown one under another i n a column, as can be seen here:
http://cms.goju-karate.co.uk/Gallery.html

Is there a way I can get it to view the album list in two rows:

I know this is the code that creates the table.
As I am limited to only 8 albums I would like to have two rows of for album thumbnails.

===========================
{* Table for the album list page: categories *}
{if !$album}

{foreach from=$albums item=album}

{For each needed here to produce only 4 }

link}">thumbnail}" alt="{$album->name|escape:'html'}" />
{*$album->name*}
{end of forech}


{$album->name}
{*$album->comment*}


{/foreach}

===========================
I am unsure what to write, can anyone help?

[Charmie]

Hi,

I have changed the code slightly and the images now appear in a row.

===============================
{* Table for the album list page: categories *}
{if !$album}

{*foreach from=$albums item=album*}

{foreach from=$albums item=album}

link}">thumbnail}" alt="{$album->name|escape:'html'}" />
{$album->name}
{/foreach}


{*$album->name*}
{*$album->comment*}
-->

{*/foreach*}

===============================
Unfortunately they all appear in one row rather then over two.
At the moment they all fit but this will cause problems if I add another album.
I would love the table to break at 4 albums, so they are listed in rows of fours.

Anyone know what I can add to my code so that it creates a new after 4 albums have been displayed?

[Charmie]

Hi All,

Iam wondering if anyone knows of a way I can write something into the JavaScript that would achieve this?

I know that the photo list takes the number of images to place in a row from an option in the Album preference.
Does anyone know if it would be possible to add another preference to the JavaScript to create the numbers of albums displayed on the album list page?

Charmie 

[Dr.CSS]

You really want to use div for this...

[Charmie]

Hi Dr CSS,

How would a DIV be better?
Not sure what you mean.....?

[Dr.CSS]

Using a div to wrap your images you could control the width of it and float the image left, between the width of div and size of images and margin padding of images you would be able to control the whole thing a lot easier...

A table is a fixed thing not fluid or very changeable with just CSS...

Sorry I just think there are only a few things that should be put in tables, a gallery of images is not one if them...

[Charmie]

Thanks for that Dr Css,

Would it be possible to show me an example.
I have used DIV tags before but only simply so am unsure how to do this...is there an attribute I can use that will wrap the images or will just setting a restricted width cause the images to wrap and start a new line...?

For example is I had something like this:
(where the width of each image was set to 100px with 10px padding)

Could you correct my mistakes, please?

{foreach from=$albums item=album*}
 
{foreach from=$albums item=album}
       
link}">thumbnail}" alt="{$album->name|escape:'html'}" />
{$album->name}
      {/foreach}

  {/foreach}

[Dr.CSS]

First instance of album is going to use the default album list template showing 1 image per album the template you choose for the album itself will determine what the images are in...

I never use div around the images themselves most times it's an UL LI inside a DIV...

Depending on how you want to display your images, lightbox, greybox, etc., copy one of the available templates and work from there, the style sheet has CSS for all the different ones...

http://multiintech.com/galleries.html  is a bunch of Albums I've made to show some of the new templates I made for Album, that page is using a custom made album list template, it is just for the list of albums...

Called album list...


{foreach from=$albums item=album}

{$album->name}
link}">
thumbnail}" alt="{$album->name}" title="{$album->name} - {$album->comment}"{$album->autothumbnailsize} />
({$album->picturecount} images)
{$album->comment|truncate:75} 

{/foreach}