Album v. 0.8.2 Default Photo Albums Page Display Problem

[jimbabwe]

I'm working with Album 0.8.2. I've got the module running and 18 galleries in place. There is one problem: The main page housing all the galleries displays the galleries oddly. Instead of even rows, I get 7 gallery thumbs in the first row, 1 gallery thumb in the second row (all the way to the right), 7 gallery thumbs in the third row, 3 gallery thumbs in the fourth row (all the way to the right) and 1 gallery thumb in the last row (not quite all the way to the right).

I've looked at the default template for the main page, the source code of the displayed page and so on.
There is nothing obvious in the code (i.e., no tables, aligns, extry cells/rows, etc.)
There's probably something real simple I'm overlooking, but I can't figure it out.

I can't find anything that seems to be causing this. Is it possibly in the JavaScript files?

I've attached a minimal .gif screen capture of the page, since the site is on an internal development server.

Any ideas would be appreciated.



[gelöscht durch Administrator]

[Elijah Lofgren]

Hmm.... I've never tested with that many Albums.
I think it must be caused by the different lengths of captions
Maybe try using the "Tables" template for "Album List Template:".
See here for an example of it in use: http://www.elijahlofgren.com/pictures/

Hope this helps,

Elijah

[3dcandy]

I had that problem, it IS the captions. You need to keep the caption for the title of the albums fairly short otherwise it can bump the thumbnails across....

[jimbabwe]

Thanks for the quick response.

I will try shortening the captions. However, if I use the Tables template for my main gallery page (holding the 18 albums), shouldn't I be able to limit the number of columns?

I just deleted all but 6 albums as a test, then used the tables template with the restriction of 3 columns from the Admin Panel.

When I reloaded the page, it still displayed 6 items across.

I looked at the source code for the page and don't see a table wrapping the albums.

When Content >> Photo Albums is selected from the Admin Panel, and Tables is selected as the template, should a table wrap the albums?

Maybe I'm misunderstanding the correct steps.

Any further suggestions are appreciated.

[Elijah Lofgren]

When Content >> Photo Albums is selected from the Admin Panel, and Tables is selected as the template, should a table wrap the albums?

I guess not, I guess the col/row options were just for the Album thumbs themselves.

Try opening your tables template and replacing this code:

Code: Select all

{if !$album}
...
{else}

with this:

Code: Select all

{if !$album}
{assign var="num_cols" value="3"}
{assign var="counter" value="1"}
{assign var="show_it" value="0"}
<table>
	{foreach from=$albums item=album}
{if $counter > $num_cols}
<tr style="height:100px;vertical-align:middle">
{assign var="counter" value="1"}
{assign var="show_it" value="1"}
{else}
counter : {$counter} 
show_it : {$show_it}
num_cols : {$num_cols}
{/if}
{$counter++}
	
	<td style="border:1px solid #ECECEC;width:100px;text-align:center">
			<a href="{$album->link}"><img src="{$album->thumbnail}" alt="{$album->name}" /></a>
		</td>
		<td style="border:none;width:500px;text-align:left">
			{$album->name} <em>({$album->picturecount} images)</em><br />
			{$album->comment}
		</td>
{if $show_it == 1}
	</tr>
{assign var="show_it" value="0"}
{/if}
	{/foreach}
</table>


{else}

And then change {assign var="num_cols" value="3"} to something like {assign var="num_cols" value="6"} if you want six columns.

Hope this helps,

Elijah

[jimbabwe]

Thanks again for quick response.

I opened the Tables.tpl and made the change. I set the num_cols value to 3 as a test; all album thumbs now appear in a single column; not 3 columns.

I'm still new to php (an old Perl guy).

Is the if/else loop correct? Should the be placed differently, maybe?

[Elijah Lofgren]

Thanks again for quick response.

I opened the Tables.tpl and made the change. I set the num_cols value to 3 as a test; all album thumbs now appear in a single column; not 3 columns.

I'm still new to php (an old Perl guy).

Is the if/else loop correct? Should the be placed differently, maybe?

Make sure you edit the template in the database not Tables.tpl (it is only used to import the template into the Database)
Edit the template by going to: /admin/moduleinterface.php?mact=Album,m1_,edittemplate,0&m1_templatename=Tables

It works here. Please paste your entire Tables template if you still have problems.

Hope this helps,

Elijah

[jimbabwe]

Sorry; still having issues. I edited the Tables in the db (as instructed).

Now this is appearing above the gallery of albums:
counter : 1 show_it : 0 num_cols : 5 1 counter : 2 show_it : 0 num_cols : 5 2 counter : 3 show_it : 0 num_cols : 5 3 counter : 4 show_it : 0 num_cols : 5 4 counter : 5 show_it : 0 num_cols : 5 5 1 counter : 2 show_it : 0 num_cols : 5 2 counter : 3 show_it : 0 num_cols : 5 3 counter : 4 show_it : 0 num_cols : 5 4

Beneath this, the gallery of abums appears, but is breaking up the rows: 5 thumbs in 1st row, 1 thumb in 2nd and 2 thumbs in 3rd.

Maybe I should delete all albums and start again...

Here's the Tables.tpl (I am using the default with your changes pasted near the top):

{if $returnlink}Back{/if}
{if !$album}
{assign var="num_cols" value="5"}
{assign var="counter" value="1"}
{assign var="show_it" value="0"}

{foreach from=$albums item=album}
{if $counter > $num_cols}

{assign var="counter" value="1"}
{assign var="show_it" value="1"}
{else}
counter : {$counter}
show_it : {$show_it}
num_cols : {$num_cols}
{/if}
{$counter++}


link}">thumbnail}" alt="{$album->name}" />


{$album->name} ({$album->picturecount} images)

{$album->comment}

{if $show_it == 1}

{assign var="show_it" value="0"}
{/if}
{/foreach}


{else}
{if $album->comment}{$album->comment}{/if}

{if $pagecount>1}

<< 
{if $link.page.previous}< {/if}
page {$pagenumber}/{$pagecount}
{if $link.page.next} >{/if}
 >>

{/if}
{foreach from=$pictures item=picturesrow}

{foreach from=$picturesrow item=onepicture}

link}"> thumbnail}" alt="{$onepicture->thumbnail}" />

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

{/foreach}


{if $picturecount==0}No image{/if}
{/if}

{if $picture->id>0}


<< 
{if $link.picture.previous}< {/if}
picture {$picturenumber}/{$picturecount}
{if $link.picture.next} >{/if}
 >>


picture}" alt="{$picture->name}" />
{$picture->name}
{$picture->comment}
{/if}

[Elijah Lofgren]

Maybe I should delete all albums and start again...

Don't delete the Albums, templates don't affect them.
I'll try testing with more than 4 Albums.
Delete the following to get rid of the debug output:

Code: Select all

{else}
counter : {$counter}
show_it : {$show_it}
num_cols : {$num_cols}

[Elijah Lofgren]

This should work (sorry, I didn't test the other version good enough):

Code: Select all

{if $returnlink}<p><a href="{$returnlink}">Back</a></p>{/if}
{if !$album}
{assign var="num_cols" value="3"}
{assign var="counter" value="0"}
{assign var="opened_it" value="0"}
<table>
   {foreach from=$albums item=album}
{if $counter == $num_cols}
{if $opened_it == 1}
   </tr>
{else}
<tr style="height:100px;vertical-align:middle">
{assign var="counter" value="0"}
{assign var="opened_it" value="1"}
{/if}
{/if}
{$counter++}
   
   <td style="border:1px solid #ECECEC;width:100px;text-align:center">
         <a href="{$album->link}"><img src="{$album->thumbnail}" alt="{$album->name}" /></a>
      </td>
      <td style="border:none;width:500px;text-align:left">
         {$album->name} <em>({$album->picturecount} images)</em><br />
         {$album->comment}
      </td>
   {/foreach}
</tr>
</table>

{else}
{if $album->comment}<p>{$album->comment}</p>{/if}
<table>
   {if $pagecount>1}
   <caption style="text-align:center">
      <a href="{$link.page.first}" title="first page"><< </a>
      {if $link.page.previous}<a href="{$link.page.previous}" title="previous page">< </a>{/if}
      page {$pagenumber}/{$pagecount}
      {if $link.page.next}<a href="{$link.page.next}" title="next page"> ></a>{/if}
      <a href="{$link.page.last}" title="last page"> >></a>
   </caption>
   {/if}
   {foreach from=$pictures item=picturesrow}
   <tr style="height:100px;vertical-align:middle">
      {foreach from=$picturesrow item=onepicture}
      <td style="border:1px solid #ECECEC;width:100px;text-align:center">
         <a href="{$onepicture->link}"> <img src="{$onepicture->thumbnail}" alt="{$onepicture->thumbnail}" /> </a>
      </td>
      {if ($onepicture->number==$picturenumber and !$picture)}{assign var=picture value=$onepicture}{/if}
      {/foreach}
   </tr>
   {/foreach}
</table>

{if $picturecount==0}No image{/if}
{/if}

 {if $picture->id>0}
<br />
<a href="{$link.picture.first}" title="first picture"><< </a>
{if $link.picture.previous}<a href="{$link.picture.previous}" title="previous picture">< </a>{/if}
picture {$picturenumber}/{$picturecount}
{if $link.picture.next}<a href="{$link.picture.next}" title="{$next_picture}"> ></a>{/if}
<a href="{$link.picture.last}" title="last picture"> >></a>
<br />
<img src="{$picture->picture}" alt="{$picture->name}" />
<h3>{$picture->name}</h3>
<div>{$picture->comment}</div>
{/if}

Only problem is that {$counter++} increases the counter but also prints it. I don't know how to increment without increasing. I'll have to look that up....

[Elijah Lofgren]

Ok, using smarty's {counter} function, this should work:

Code: Select all

{if $returnlink}<p><a href="{$returnlink}">Back</a></p>{/if}
{if !$album}
{assign var="num_cols" value="5"}
{counter start=0 assign="counter"}
{assign var="opened_it" value="0"}
<table>
   {foreach from=$albums item=album}
{if $counter == $num_cols}
{if $opened_it == 1}
   </tr>
{else}
<tr style="height:100px;vertical-align:middle">
{counter start=0 assign="counter"}
{assign var="opened_it" value="1"}
{/if}
{/if}
{counter print=0}
   
   <td style="border:1px solid #ECECEC;width:100px;text-align:center">
         <a href="{$album->link}"><img src="{$album->thumbnail}" alt="{$album->name}" /></a>
      </td>
      <td style="border:none;width:500px;text-align:left">
         {$album->name} <em>({$album->picturecount} images)</em><br />
         {$album->comment}
      </td>
   {/foreach}
</tr>
</table>

{else}
{if $album->comment}<p>{$album->comment}</p>{/if}
<table>
   {if $pagecount>1}
   <caption style="text-align:center">
      <a href="{$link.page.first}" title="first page"><< </a>
      {if $link.page.previous}<a href="{$link.page.previous}" title="previous page">< </a>{/if}
      page {$pagenumber}/{$pagecount}
      {if $link.page.next}<a href="{$link.page.next}" title="next page"> ></a>{/if}
      <a href="{$link.page.last}" title="last page"> >></a>
   </caption>
   {/if}
   {foreach from=$pictures item=picturesrow}
   <tr style="height:100px;vertical-align:middle">
      {foreach from=$picturesrow item=onepicture}
      <td style="border:1px solid #ECECEC;width:100px;text-align:center">
         <a href="{$onepicture->link}"> <img src="{$onepicture->thumbnail}" alt="{$onepicture->thumbnail}" /> </a>
      </td>
      {if ($onepicture->number==$picturenumber and !$picture)}{assign var=picture value=$onepicture}{/if}
      {/foreach}
   </tr>
   {/foreach}
</table>

{if $picturecount==0}No image{/if}
{/if}

 {if $picture->id>0}
<br />
<a href="{$link.picture.first}" title="first picture"><< </a>
{if $link.picture.previous}<a href="{$link.picture.previous}" title="previous picture">< </a>{/if}
picture {$picturenumber}/{$picturecount}
{if $link.picture.next}<a href="{$link.picture.next}" title="{$next_picture}"> ></a>{/if}
<a href="{$link.picture.last}" title="last picture"> >></a>
<br />
<img src="{$picture->picture}" alt="{$picture->name}" />
<h3>{$picture->name}</h3>
<div>{$picture->comment}</div>
{/if}

Hope this helps,

Elijah Lofgren

[jimbabwe]

Looks like the last changes "using smarty's {counter} function" works like a champ.

I'll submit a final comment when I'm done working this site (again, it's on a dev server) to re-confirm that all went well with the fix.

Thanks!

[jimbabwe]

The fix worked fine.  Thanks.

[Elijah Lofgren]

The fix worked fine.  Thanks.

You're welcome. Glad I could help.