[SOLVED] How do you style photo album page content type ?

[Gillian.Hesse]

Hi there,

Sorry if you've already read this.  I moved it from the General Help discussions.

I have just created a new page with page content set to  Photo Album.  The thumb nails are displayed in a single column, which really wastes space and doesn't look too good.  I would like the album thumb nails arranged side by side like the thumbnails inside each album.

I am using the default template and a copy of default album css file.

After much searching I think I found the bits of interest.  From the template

The album thumbnails are placed as li elements within an unordered list with a class called albumlist.

Code: Select all

{* Album List *}
{if !$album}
<ul class="albumlist">
	{foreach from=$albums item=album}
	<li class="thumb">
 	<a href="{$album->link}">
<img src="{$album->thumbnail}" alt="{$album->name}" title="{$album->name} - {$album->comment}"{$album->autothumbnailsize} /></a>

<p class="albumname">{$album->name}<br />
<span class="albumpicturecount">({$album->picturecount} images)</span><br />
<span class="albumcomment">{$album->comment}</span></p>
</li>
	{/foreach}

</ul>

The photo thumbnails are also placed as li elements within an unordered list with a class called picturelist.

Code: Select all

<ul class="picturelist">
	{foreach from=$pictures item=picturesrow}
	    {foreach from=$picturesrow item=onepicture}
	    <li class="thumb"><a href="{$onepicture->picture}" rel="{$album->name}" class="thickbox" title="{$onepicture->name} - {$onepicture->comment}"> <img src="{$onepicture->thumbnail}" alt="{$onepicture->name} - {$onepicture->comment}" title="{$onepicture->name} - {$onepicture->comment}"{$onepicture->autothumbnailsize} /></a>
   	   </li>

      {if ($onepicture->number==$picturenumber and !$picture)}{assign var=picture value=$onepicture}{/if}
	    {/foreach}
	{/foreach}
</ul>

The picturelist is implemented over two for loops rather than one, but I don't see anything that would force a new line at the end of the nested loop to explain the difference in display.

The relevent part of the css code appears to be

Code: Select all

/* Album List UL */
.albumlist
{
	margin-left:0;
	padding-left:0;
	float:left; 
 }


/* Picture List UL */
.picturelist
{
	margin-left:0;
	padding-left:0;
}

/* Album and Picture Lists */
.thumb
{
	padding:0;
	width:150px;
	margin:0 0.5em 0.5em 0;

/* Thumbnail spacing */
	text-decoration:none;
	line-height:normal;
	list-style-type:none;
	text-align:center;
	float:left;

}

The only difference between the css for  albumlist and picturelist is a float:left, but removing it doesn't seem to change anything

Any ideas.  The code snippets are from the defaults, I haven't changed anything.

Thanks

Gill

[Gillian.Hesse]

Hi there,

A colleague suggested using the firebug addon for firefox.  It worked a treat.  I now know what the problem is, but can not understand why the template is working the way it is.  The code snippet below is the album list part of the template, indented the make it clearer and some text labels inserted at the start of the ul and li sections.  My interpretation is that there should be one ul generated and then the for loop generates an li for each album with it's thumbnail inside.

Code: Select all

{* Album List *}
{if !$album}
<ul class="albumlist">
	<p>start ul class albumlist</p>
	
	{foreach from=$albums item=album}
	<li class="thumb">
		<p>start li class thumb</p>
 		<a href="{$album->link}">
			<img src="{$album->thumbnail}" alt="{$album->name}" title="{$album->name} - 				{$album->comment}"{$album->autothumbnailsize} /></a>

		<p class="albumname">{$album->name}<br />
		<span class="albumpicturecount">({$album->picturecount} images)</span><br />
		<span class="albumcomment">{$album->comment}</span></p>
		<p>end li class thumb</p>
	</li>
	{/foreach}

	<p>end ul class albumlist</p>
</ul>

But if you look at the attached screen shot you'll see that there is an ul and li section for each album, and the li parts aren't even inside the ul section.

I am really at a loss....

Any ideas?

Thanks

Gill

[Gillian.Hesse]

Hi again,

So I'm taking small steps.  It turns out that the template is being called once for each album, with a single thumbnail in the albumlist of each.

It seems the problem is in how the album content is generated when the page content is set to album page.  But it appears that this is done automatically.  My page template doesn't have anything about album page formatting in it.

It just seems like very strange "default" behaviour.

Gill

[Gillian.Hesse]

So I think I have solved it.

I changed the page back to normal content type and added an album tag with a list of albums like

Code: Select all

{cms_module module='album' albums='1,2,3,4'}

and got exactly the same layout problem.  So it was the module that is producing the strange layout, so I concentrated my search on the module help and admin.

In the Photo album admin there is a template tab.  The first item in the tab is a pull down menu that allows you to select the Album List Template.  This was still set to the default option : Automatic (use template assigned to each template).  As all my albums were set to the same template I didn't touch this.  But as soon as I changed it to the specific template of the albums the layout appeared as expected.

It took a while to find, and was very frustrating, but at least the solution was simple.  I was about to start hacking the module code.....

Gill