{define_derivative name='Large' type='large'}
{define_derivative name='small' type='small'}

	
		<div id="tf_loading" class="tf_loading"></div>
		
		
<div id="tf_bg" class="tf_bg">
	{foreach from=$category_thumbnails item=cat name=cat_loop}

					<img src="{$pwg->derivative_url($Large, $cat.representative.src_image)}" alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '|@strip_tags:false} - {'display this album'|@translate}" longdesc="{$pwg->derivative_url($small, $cat.representative.src_image)}" link="{$cat.URL}" Z="cat">
	{/foreach}
	<div id="tf_pattern" class="pattern visible"></div>
</div>

			
<div id="tf_content_wrapper" class="tf_content_wrapper">
	{foreach from=$category_thumbnails item=cat name=cat_loop}
		<div class="tf_content" {if $smarty.foreach.cat_loop.first}style="display:block;"{/if}>
			<h2>
				<a href="{$cat.URL}">{$cat.NAME}</a>
				{if !empty($cat.icon_ts)}
				<img title="{$cat.icon_ts.TITLE}" src="{$ROOT_URL}{$themeconf.icon_dir}/recent{if $cat.icon_ts.IS_CHILD_DATE}_by_child{/if}.png" alt="(!)">
				{/if}
			</h2>
			<div class="infor">
			{if isset($cat.INFO_DATES) }
			{$cat.INFO_DATES}
			<br>{/if}
			{$cat.CAPTION_NB_IMAGES}<br>
			{if not empty($cat.DESCRIPTION)}
			{$cat.DESCRIPTION}
			{/if}
			</div>
		</div>
	{/foreach}
</div>
					


		<div id="tf_thumbs" class="tf_thumbs">
		<span id="tf_zoom" class="tf_zoom cat"></span>
		{foreach from=$category_thumbnails item=cat name=cat_loop}
			{if $smarty.foreach.cat_loop.first}<a href="{$cat.URL}">{if $smarty.foreach.cat_loop.first}<img src="{$pwg->derivative_url($small, $cat.representative.src_image)}">{/if}</a>{/if}
		{/foreach}
		</div>
				
		
		<div id="tf_next" class="tf_next"></div>
		<div id="tf_prev" class="tf_prev"></div>


</div>