[X_treme Theme] - Information on Right/Left side of Thumbnail - SOLVED

Phrak79

Joined: 2009-05-15
Posts: 8
Posted: Tue, 2009-07-07 08:36

/PHP n00b alert - Gallery is my first foray into PHP coding, and I'm not very good!

First of all, thanks Pedro for a fantastic theme. I love the ability to change my theme preferences online. For a gallery first-timer, it really made configuration very very easy.

So anyway, I've spent countless hours trying to get the the item information like title and description to show on the right hand side of my thumbnail in the album view. Finally, I've got the gallery *almost* showing things how I want them.

Basically, I ended up creating a new table within the giItemCell class, with two cells. One cell for the thumbnail and another cell for the information. The item actions, ratings, comments, etc remain below the thumbnail.

If you're interested in how I've done it, here's what I've done:

Copy gallery2\themes\x_treme\templates\album.tpl to gallery2\themes\x_treme\templates\local\album.tpl

Some precursor locations in the file
---------------
The giItemCell class starts on line 654.

The Image Thumbnail cell START around line 722, (<div class="opacityT")
The Image Thumbnail cell ENDS around line 733

The item Title cell STARTS around line 1015 (<p class="giTitle">) (now 1052 after copy)
The item Title cell ENDS around line line 1028

The Action Items cell STARTS around line 1386
---------------

Now for the changes:

Enter <table> and <td> above <div style=.....> on line 724
Close </td> below </div> on line 736
Enter <td valign=top> on next line, 737
Copy the giTitle block (including the if !empty($child.title) statement) from ~line 1016-1029 to line 738
Close </td> and </table> after </p> from what you've just pasted
Comment out ({* and *}) the old giTitle block from lines 1017-1028 (now on/about line 1035 after the changes above)

Rinse and repeat if you also want the item summary or description fields. These sections are below the original giTitle block at the bottom of the page.

Original album.tpl, lines 722-733:
Original line 722-733:

<div style="width:{$child.thumbnail.width}px"class="opacityT">
<a href="{$linkUrl}" class="opacityT"
{if !empty($theme.params.Iinfo) && !empty($theme.params.IinfoLink)}onmouseover="toggleLyr('infoI{$child.id}');"{/if}>
{if $child.canContainChildren || $child.entityType == 'GalleryLinkItem'}
{g->image id="%ID%" item=$child image=$child.thumbnail class="%CLASS% giThumbnail" title="Album - `$child.title`"}
{else}
{g->image id="%ID%" item=$child image=$child.thumbnail class="%CLASS% giThumbnail" title=$child.title}
{/if}
</a>
</div>

Changed to:

{*Create Table for item information on the right of the thumbnail *}
<table>
{*Create cell for item thumbnail *}				  
	<td><div style="width:{$child.thumbnail.width}px"class="opacityT">
	<a href="{$linkUrl}" class="opacityT"
	  {if !empty($theme.params.Iinfo) && !empty($theme.params.IinfoLink)}onmouseover="toggleLyr('infoI{$child.id}');"{/if}>
	  {if $child.canContainChildren || $child.entityType == 'GalleryLinkItem'}
	{g->image id="%ID%" item=$child image=$child.thumbnail class="%CLASS% giThumbnail" 
		title="Album - `$child.title`"}
	  {else}
	{g->image id="%ID%" item=$child image=$child.thumbnail class="%CLASS% giThumbnail" 
		title=$child.title}
	  {/if}
	</a>
	</div>
	</td>
{*Create cell for item information *}
	<td valign=top>
{* Populate Item Title *}
		{if !empty($child.title) && ($theme.params.ITitle == 'both' || ($theme.params.ITitle == 'albums' && ($child.canContainChildren || $child.entityType == 'GalleryLinkItem')) || ($theme.params.ITitle == 'photos' && !$child.canContainChildren))}
			<P class="giTitle">
				<a href="{$linkUrl}">
				{if $child.canContainChildren || $child.entityType == 'GalleryLinkItem'}
								  {g->text text="&#9642;"}
				{/if}
								{$child.title|markup}
				{if $child.canContainChildren || $child.entityType == 'GalleryLinkItem'}
								  {g->text text="&#9642;"}
				{/if}

				</a>
			</P>
		{/if}

{* Populate Item Description *}						
{if !empty($child.description) && ($theme.params.IDesc == 'both' || ($theme.params.IDesc == 'albums' && ($child.canContainChildren || $child.entityType == 'GalleryLinkItem')) || ($theme.params.IDesc == 'photos' && !$child.canContainChildren))}
				  <p class="giDescription">
					{$child.description|markup|entitytruncate:256}
				  </p>{assign var='Tline' value=1}
	{/if}
	{if !empty($child.summary) && ($theme.params.ISum == 'both' || ($theme.params.ISum == 'albums' && ($child.canContainChildren || $child.entityType == 'GalleryLinkItem')) || ($theme.params.ISum == 'photos' && !$child.canContainChildren))}
				  <p class="giDescription">
					{$child.summary|markup|entitytruncate:256}
				  </p>{assign var='Tline' value=1}
{/if}
{if !empty($Tline)}<br/>{/if}
	</td>
</table>
{* End Table for information on the right *}

Comment out or delete the lines from 1052 to 1076 to prevent the image title and description from showing up again in their original locations under the thumbnail.

---------------
If you want the giItemCell to be aligned to the top or bottom of the table (so all the titles, etc line up) change line 652 (starting with: <td class="{if $child.canContainChildren}giAlbumCell) from valign="top" to "bottom"
---------------
If you want the thumbnails and information text to be left aligned in the giItemCell, (*I made a change somewhere but can't find what I did. To be ammended*)
---------------
These changes above are dependant on the theme admin settings as you've defined them in the [ALBUM :: Items] section of the online theme config.
---------------

I hope this helps someone else :)

Regards,
Tim

 
Phrak79

Joined: 2009-05-15
Posts: 8
Posted: Tue, 2009-07-07 08:37

With all that finally done, what I'd love to know is how I can make the information display next to the thumbnail ONLY for photo items and not for albums. I can't quite get my head around exactly what all if statements are capable of.

Is anyone able to help please?

Tim