MODIFICATION: Changing the photo layout on the viewlisting.tpl page.

[cwp]

There are currently 2 different ways that I know of to change the way the photos appear. Credit goes to spaceboy for example one, and for example two the credit goes to suzkaw. Just plug the code into your viewlisting.tpl template. Remember to have a backup on hand if you find out that you don't either of them.

Example 1:

{* This the image display portion *}
<script type="text/javascript" language="javascript">
{literal}
function showPic (whichpic) {
 if (document.getElementById) {
  document.getElementById('placeholder').src = whichpic.href;
  return false;
 } else {
  return true;
 }
}
{/literal}
</script>
                 {if $viewphotos=="Y"}
                     {if $data<>""}
    <table width="375" height="350" border="0" align="center" cellpadding="0" cellspacing="0">
     <tr>
          <td width="350" height="300" align="center">
          {section name=image loop=$data max=1}
			<table border="1" align="center" cellpadding="5" cellspacing="0" bordercolor="#FFFBE7" bgcolor="#333333" style="border-collapse: collapse">
				<tr>
					<td>
					<p align="center">
					<img id="placeholder" src="photos/{$data[image].image}" alt="" class="imageborder" style="border-left:2px solid #999999; border-right:2px solid #999999; border-top:2px solid #999999; border-bottom:2px solid #999999; " width="350" />{/section}</p>					</td>
				</tr>
			</table></td>
     </tr>
     <tr>
          <td valign="top" height="60" align="center">
                <table border="0" cellpadding="10" cellspacing="0" bgcolor="#E3E4E6">
  <tr>
    <td height="10">
             {foreach from=$data item="entry"}
			<a onClick="return showPic(this)" href="photos/{$entry.image}">
			<img src="thumbs/small_{$entry.image}" hspace="0" vspace="0" border="0" class="imageborder" width="60" height="45" alt="" align="center" style="border: 2px solid #666666; "/></a>
                         {/foreach}    </td>
  </tr>
</table>
                    </div></td>
     </tr>
</table>
 {/if}
                 {/if}
                 {* This ends the image display portion *}

Example 2:

  {* This the image display portion *}
			     {if $viewphotos=="Y"}
				     {if $data<>""}
	<table width="100%"  border="0" cellspacing="0" cellpadding="0">
     <tr>
          <td width="80%">
		  {section name=image loop=$data max=1}
<p align="center"><img id="placeholder" src="photos/{$data[image].image}" alt="" class="imageborder" /></p>
			<strong><p align="center" id="desc">{$data[image].title}</p></strong>
			{/section}</td>
          <td>
		  <DIV STYLE="height:320px; width:180px;overflow:auto">
		       <div align="center">
					     {foreach from=$data item="entry"} <a onclick="return showPic(this)" href="photos/{$entry.image}" title="{$entry.title}"><img src="thumbs/small_{$entry.image}" hspace="5" vspace="5" border="0" class="imageborder" /></a>
					     {/foreach}
		            </div>
		  </div>
		  </td>
     </tr>
</table>
 {/if}
			     {/if}
			     {* This ends the image display portion *}

[crystal]

Excellent mod... thank you cwp! I am using the first one in the viewlisting2.tpl template (so the photos are on top). Also looks good with the photos on the right (in viewlisting.tpl).

Is there any way to add to the code so that if the user only has one photo the thumbnail does not appear? This would be an awesome addition.

[cwp]

Originally Posted by crystal

Excellent mod... thank you cwp! I am using the first one in the viewlisting2.tpl template (so the photos are on top). Also looks good with the photos on the right (in viewlisting.tpl).

Is there any way to add to the code so that if the user only has one photo the thumbnail does not appear? This would be an awesome addition.

I'm sure theres a way to do this with smarty, but I don't know how. I didn't even write the code that you see above, I just gathered it from the forums and put it here so people months or a year in the future would be able to find it easily.

[crystal]

Originally Posted by cwp

I'm sure theres a way to do this with smarty, but I don't know how. I didn't even write the code that you see above, I just gathered it from the forums and put it here so people months or a year in the future would be able to find it easily.

Right, well thank you spaceboy for the code and thanks cwp for the gathering of. If anyone could point me in the right direction of how to do an {if} statement on those thumbnails, that would be great!

[crystal]

Still working on trying to get the thumbnail to only appear when there are 2 or more photos. Any suggestions? I am also wondering how to show the title of the images and have them change when clicking a thumbnail.

In version 2 of the image changes that were posted, the title appears under the first photo, but it does not change when clicking different thumbs. How do I change the title with the photo? There is an error in the version 2 code that was posted... it does not work unless you add the javascript (the code between and including the <script> tags) from the first example.

Any help is always appreciated!