Date: 2007-05-14 10:12
Posted By: Elijah Lofgren (elijahlofgren)

Sounds good. I'll try to do this for Album 0.9.2 which I plan to release today
after adding the "Album List Template" option back.
      

Date: 2007-05-14 10:16
Posted By: Elijah Lofgren (elijahlofgren)

Note to self, somehow let people know that they can switch between images with
the "<" and ">" keys:
"# Moved the next and previous keyboard functionality for the gallery images to
the left < key (previous) and right > key (next). By doing this it fixes a known
issue with safari and the arrow keys. This also allows sites design to be
scrolled horizontally to use the arrow keys accordingly."
      

Date: 2007-05-14 10:23
Posted By: Russ Baldwin (russ)

Ref your note to yourself ;-) - I incorported it into a sightly different
thickboxnext-previous template (see below) - although we may want to give it a
different name. It contains the info you were after and also it a bit more
structured for accessibility. You may want to check it over though.

Hope this helps,

Russ
//revised template for use with thickbox.
{if !$album}
<h3>Click on an Album to view its contents</h3>
<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}" /></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>

{else}

{* Photo List *}
<p><span class="noprint">Click on a thumbnail to view a larger image. Click
anywhere on the larger image or use the 'Esc' (escape) key to close it. Use the
'next' and 'previous' links or the '&lt;' or '&gt;' (more than/less than keys)
to navigate the larger images. <br/>{if $returnlink}<a
href="{$returnlink}">Return to the album index page</a>{/if}</span></p>

	{if $pagecount>1}
	<p class="albumnav">
		<a href="{$link.page.first}" title="first page">&lt;&lt;&nbsp;</a>
{if $link.page.previous}<a href="{$link.page.previous}" title="previous
page">&lt;&nbsp;</a>{/if}
		page {$pagenumber}/{$pagecount}
{if $link.page.next}<a href="{$link.page.next}" title="next
page">&nbsp;&gt;</a>{/if}
		<a href="{$link.page.last}" title="last page">&nbsp;&gt;&gt;</a>
	</p>
	{/if}
<h3>{$album->name}<em> - {$album->comment}</em></h3>
<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}" /></a>
   	   </li>

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

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

{if $picture->id>0}
{/if}
<div style="clear: left"> </div>
      

Date: 2007-05-14 10:25
Posted By: Russ Baldwin (russ)

Ref your note to yourself ;-) - I incorported it into a sightly different
thickboxnext-previous template (see below) - although we may want to give it a
different name. It contains the info you were after and also it a bit more
structured for accessibility. You may want to check it over though.

Hope this helps,

Russ
//revised template for use with thickbox.
{if !$album}
<h3>Click on an Album to view its contents</h3>
<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}" /></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>

{else}

{* Photo List *}
<p><span class="noprint">Click on a thumbnail to view a larger image. Click
anywhere on the larger image or use the 'Esc' (escape) key to close it. Use the
'next' and 'previous' links or the '&lt;' or '&gt;' (more than/less than keys)
to navigate the larger images. <br/>{if $returnlink}<a
href="{$returnlink}">Return to the album index page</a>{/if}</span></p>

	{if $pagecount>1}
	<p class="albumnav">
		<a href="{$link.page.first}" title="first page">&lt;&lt;&nbsp;</a>
{if $link.page.previous}<a href="{$link.page.previous}" title="previous
page">&lt;&nbsp;</a>{/if}
		page {$pagenumber}/{$pagecount}
{if $link.page.next}<a href="{$link.page.next}" title="next
page">&nbsp;&gt;</a>{/if}
		<a href="{$link.page.last}" title="last page">&nbsp;&gt;&gt;</a>
	</p>
	{/if}
<h3>{$album->name}<em> - {$album->comment}</em></h3>
<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}" /></a>
   	   </li>

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

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

{if $picture->id>0}
{/if}
<div style="clear: left"> </div>
      

Date: 2007-05-14 17:37
Posted By: Elijah Lofgren (elijahlofgren)

Fixed: http://viewsvn.cmsmadesimple.org/viewsvn?rev=313&root=album&view=rev
http://viewsvn.cmsmadesimple.org/viewsvn?rev=314&root=album&view=rev

Thanks Russ.

Closing.
      

Date: 2007-05-15 09:45
Posted By: Russ Baldwin (russ)

HI Elijah, for some reason I attached an old template - sorry. Here is the
correct one (See Below), although I have not yet tested it in Internet Explorer
- it should eb fine - but maybe you would like to give it a go first.

It is more accessible and uses CSS better. It also removes comment from list (on
album or photo) if there are none.

Still acouple of issues
1. No place for Comment 2 or Comment 3 - we could add this but it is going to
cause problems else where. Also where to put it in Thickbox js?

2. If users enter html for comments / title it will cause invalid code - but to
be exepected and has always been the same. We are putting code in the 'title'
element of a link and an image which doesn't not allow html. Don't know if we
could strip htlentities? But this would make a mockery of the nice editors. I'd
like to be able to try and get more information in the picture - perhaps through
some sort of image description stuff??

{if !$album}
<h3>Click on an Album to view its contents</h3>
<ul class="albumlist">
	{foreach from=$albums item=album}
	<li class="thumb">
 	<a href="{$album->link}">
<img src="{$album->thumbnail}" alt="{$album->name}" 
{if $album->comment}
title="{$album->name} - {$album->comment}"/>
{else}
title="{$album->name}" />
{/if}</a>
<p class="albumname">{$album->name}
{if $album->comment}<br /><span
class="albumcomment">{$album->comment}</span>{/if}
<br /><span class="albumpicturecount">({$album->picturecount} images)</span></p>
</li>
	{/foreach}
</ul>
<div style="clear: left"> </div>
{else}

{* Photo List *}
<p class="instructiontext"><span class="noprint">Click on a thumbnail to view a
larger image. Click anywhere on the larger image or use the 'Esc' (Escape) key
to close it. Use the 'next' and 'previous' links or the '&lt;' or '&gt;' (more
than/less than keys) to navigate through the larger images. </span></p>

	{if $pagecount>1}
	<p class="albumnav">
		<a href="{$link.page.first}" title="first page">&lt;&lt;&nbsp;</a>
{if $link.page.previous}<a href="{$link.page.previous}" title="previous
page">&lt;&nbsp;</a>{/if}
		page {$pagenumber}/{$pagecount}
{if $link.page.next}<a href="{$link.page.next}" title="next
page">&nbsp;&gt;</a>{/if}
		<a href="{$link.page.last}" title="last page">&nbsp;&gt;&gt;</a>
	</p>
	{/if}
	
<h3>{$album->name}{if $onepicture->comment}<em> {$album->comment}</em>{/if}</h3>
<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"
	{if $onepicture->comment}
title="{$onepicture->name} -  {$onepicture->comment}"> <img
src="{$onepicture->thumbnail}" alt="{$onepicture->name} {$onepicture->comment}"
title="{$onepicture->name} - {$onepicture->comment}" /></a>
{else}
title="{$onepicture->name}"> <img src="{$onepicture->thumbnail}"
alt="{$onepicture->name}" title="{$onepicture->name}" /></a>
{/if}
</li>
{if ($onepicture->number==$picturenumber and !$picture)}{assign
var=picture value=$onepicture}{/if}
	    {/foreach}
	{/foreach}
</ul>
<div style="clear: left"><br/></div>
{if $returnlink}<a href="{$returnlink}">Return to the album index page</a>{/if}
{if $picturecount==0}No image{/if}
{/if}

{if $picture->id>0}
{/if}

      

Date: 2007-05-15 12:20
Posted By: Elijah Lofgren (elijahlofgren)

Reopening.

Hi Russ,

Thanks for the new template. No problem. ;)

I'll hopefully include this in the next release of Album.

For now, I'm going to get started on my Google Summer of Code project, so I
don't plan on doing too much CMSMS work for a while.

Thanks,

Elijah
      

Date: 2007-08-16 03:16
Posted By: Russ Baldwin (russ)

There are now even newer version of jQuery and Thickbox and I have an even newer
template - let me know when you want them.

I've solved the problems of html stuff in the 'alt' and 'title' by stripping
them - mostly a problem for the first comment - also ability (would be nice to
make an option when calling album) to show title and first comment under
individual photos.

Russ
      

Date: 2007-08-16 13:27
Posted By: Elijah Lofgren (elijahlofgren)

Hi Russ,

Thanks for letting me know.

It'd be great if you could "Upload & Attach File" to post the template since
pasting it here messes up the formatting.

I'm planning to try and do a new Album release sometime this weekend (I'll be
done with my summer job them) and I can try and include your template along with
updated jQuery and Thickbox.

Also, I just realized that I should have added you to the Album project long
ago! I've added you to the project so if you wouldn't mind, it'd be great if you
could commit your changes directly to the Album SVN! :)

You can easily use http://tortoisesvn.tigris.org/ to svn checkout
http://svn.cmsmadesimple.org/svn/album/trunk and simply change and add templates
in templates/db

Thanks for your help with Album,

Elijah