[Theme]: vertical filmstrip (filmstrip_vert)

[bighairy]

I was looking at themes this weekend and though it looks like I could build one myself, if something like what I want exists it would be nice to know.

I'm looking for a theme that has the thumbnails (film strip) arranged vertically to the left or right of the main image instead of below.

Anybody here know of such a thing?

Thanks,
graeme

[DaMysterious]

I was looking at themes this weekend and though it looks like I could build one myself, if something like what I want exists it would be nice to know.

I'm looking for a theme that has the thumbnails (film strip) arranged vertically to the left or right of the main image instead of below.

Anybody here know of such a thing?

Thanks,
graeme

As far as I know, not. Likes to be a challenge to me.

[bighairy]

Thanks for that. I may try to have a go. I just think that when viewing an image there is too much spare space on the sides but not enough top to bottom. That makes the pages have scroll bars that I want to avoid.

Just to kick me off in the right direction, am I right in thinking that I will need to make most of the changes in the theme.php file? I guess I need to find the php that draws the film strip (theme.php?) and then re-organise the gallery page somehow.

Just a quick question: I tried yesterday to move the {GAL_NAME} and {GAL_DESCRIPTION} bits in the classic template (actually the complete table that holds them) to the bottom of the page. This didn't work for some reason as those two tags stopped being expanded. Everything else on the page worked. Any ideas?

Graeme

[DaMysterious]

Thanks for that. I may try to have a go. I just think that when viewing an image there is too much spare space on the sides but not enough top to bottom. That makes the pages have scroll bars that I want to avoid.

Just to kick me off in the right direction, am I right in thinking that I will need to make most of the changes in the theme.php file? I guess I need to find the php that draws the film strip (theme.php?) and then re-organise the gallery page somehow.

Search for this code in theme.php and change to your needs. It may be that other tables also be involved so be carefully (backup theme.php).

Code Select Expand


// HTML template for filmstrip display
$template_film_strip = <<<EOT

       <tr>
        <td valign="top" background='themes/classic/images/tile.gif' align="center" height='30'>&nbsp;</td>
       </tr>
       <tr>
       <td valign="bottom" class="thumbnails" align="center">
         {THUMB_STRIP}
       </td>
       </tr>
       <tr>
        <td valign="top" background='themes/classic/images/tile.gif' align="center" height='30'>&nbsp;</td>
       </tr>
<!-- BEGIN thumb_cell -->


Just a quick question: I tried yesterday to move the {GAL_NAME} and {GAL_DESCRIPTION} bits in the classic template (actually the complete table that holds them) to the bottom of the page. This didn't work for some reason as those two tags stopped being expanded. Everything else on the page worked. Any ideas?

Graeme

To remove the header in classic from within template.html safely change/remove these lines (you'r maybe did remove {MAIN_MENU} to, that have to be in this table) below:

Code Select Expand


  <td><a href="index.php"><img src="themes/classic/images/site_logo.png" alt="" border="0" /><br /></a></td>


  <h1>{GAL_NAME}</h1>
  <h3>{GAL_DESCRIPTION}</h3><br />


[Joachim Müller]

take a look at http://coppermine.sourceforge.net/oldboard/viewtopic.php?t=1825 , there's an issue with the order of tags in curly braces.

GauGau

[bighairy]

Well I've done it :-). I don't have a public gallery but if anyone wants to take the theme from me and test it a little that would be nice. It has the vertical filmstrip to the left of the main image. I think it results in a much better screen for viewing photos.

You can pick up the theme from:

http://www.thegadgetdoctor.com/dpreview/filmstrip_vert.zip

Graeme

[DaMysterious]

Well I've done it :-). I don't have a public gallery but if anyone wants to take the theme from me and test it a little that would be nice. It has the vertical filmstrip to the left of the main image. I think it results in a much better screen for viewing photos.

You can pick up the theme from:

http://www.thegadgetdoctor.com/dpreview/filmstrip_vert.zip

Graeme

Thanks for your contribution.

I did made some changes to your code as I had problems to include this hack into some of my themes doe to the given layout. I did add a table and some cosmetical thingies to fit completly.

Changed code in theme.php:

1)

Code Select Expand


// HTML template for filmstrip display
$template_film_strip = <<<EOT
<tr><td>
<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#000000">
<tr>
<td valign="top" background="themes/filmstrip_vert/images/tile.gif" align="center" width="20">&nbsp;</td>
<td>
          {THUMB_STRIP}
</td>
<td valign="top" background="themes/filmstrip_vert/images/tile.gif" align="center" width="20">&nbsp;</td>                                    
       </tr>
</table>
</td></tr>

<!-- BEGIN thumb_cell -->
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="bottom">
                                       <a href="{LINK_TGT}">{THUMB}</a>&nbsp;
                                   </td>
</tr>
</table>
                                       {CAPTION}
                                       {ADMIN_MENU}
<!-- END thumb_cell -->
<!-- BEGIN empty_cell -->
               <td valign="top" align="center">&nbsp;</td>
<!-- END empty_cell -->

EOT;


2)

Code Select Expand


function theme_display_image($nav_menu, $picture, $votes, $pic_info, $comments, $film_strip)
{
   global $HTTP_COOKIE_VARS, $CONFIG;

   starttable();
   echo $nav_menu;
   endtable();

starttable();
   if ($CONFIG['display_film_strip'] == 1) {
echo "<table width=\"90%\" class=\"tableb\"><td width=\"200\" class=\"tableb\" valign=\"middle\" align=\"center\">";
       echo $film_strip;
echo "</td>";
   }
   echo $picture;
echo "</table>";
   endtable();

   starttable();
    echo $votes;
   endtable();

   $picinfo = isset($HTTP_COOKIE_VARS['picinfo']) ? $HTTP_COOKIE_VARS['picinfo'] : ($CONFIG['display_pic_info'] ? 'block' : 'none');
   echo "<div id=\"picinfo\" style=\"display: $picinfo;\">\n";
   starttable();
   echo $pic_info;
   endtable();
   echo "</div>\n";

   starttable();
   echo $comments;
   endtable();
}


I've made a theme with that hack named Classic FilmLeft. Release should happen in Themes from DaMysterious soon, credits goes to you.

[Joachim Müller]

The theme "filmstrip_vert": Demo - Download

GauGau

[Justttt]

  Thanks for puttin an online demo of this

[Hein Traag]

Right third edit in a row

Not exactly sure what went wrong but i now have the filmstrip in a table above
the table containing the picture.

http://pictures.scoutlink.net/displayimage.php?album=1&pos=3

Where do i change that ?

[Casper]

You can't usually just take the theme.php from one theme and put it with the template of another, without at least some changes to the code.  This is especially true of filmstrip_vert, which is more of a concept theme than a ready to use one. 

You should use most of the theme.php from fruity,but replace the filmstrip and image display templates, and you may need to replace the functions in the theme.php as well.

[Hein Traag]

Right. I did what you saud. Took the theme.php from the rainy_day theme that i am using at http://pictures.scoutlink.net/displayimage.php?album=1&pos=0

I then continued by copying the pieces of code, as provided by DaMysterious, into my theme.php. Replacing the sections indicated.

I now get a whole different look on my site Take a look. The filmstrip is where it is supposed to be. But the whole picture is below it and to the right.

Anyone got a tip/hint or code to point me in the right direction ?

I copied the following into my theme.php

Code Select Expand

// HTML template for filmstrip display
$template_film_strip = <<<EOT
<tr><td>
<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#000000">
<tr>
<td valign="top" background="themes/rainy_day/images/tile.gif" align="center" width="20">&nbsp;</td>
<td>
          {THUMB_STRIP}
</td>
<td valign="top" background="themes/rainy_day/images/tile.gif" align="center" width="20">&nbsp;</td>                                    
       </tr>
</table>
</td></tr>

<!-- BEGIN thumb_cell -->
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="bottom">
                                       <a href="{LINK_TGT}">{THUMB}</a>&nbsp;
                                   </td>
</tr>
</table>
                                       {CAPTION}
                                       {ADMIN_MENU}
<!-- END thumb_cell -->
<!-- BEGIN empty_cell -->
               <td valign="top" align="center">&nbsp;</td>
<!-- END empty_cell -->

EOT;


and

Code Select Expand

function theme_display_image($nav_menu, $picture, $votes, $pic_info, $comments, $film_strip)
{
   global $HTTP_COOKIE_VARS, $CONFIG;

   starttable();
   echo $nav_menu;
   endtable();

starttable();
   if ($CONFIG['display_film_strip'] == 1) {
echo "<table width=\"90%\" class=\"tableb\"><td width=\"200\" class=\"tableb\" valign=\"middle\" align=\"center\">";
       echo $film_strip;
echo "</td>";
   }
   echo $picture;
echo "</table>";
   endtable();

   starttable();
    echo $votes;
   endtable();

   $picinfo = isset($HTTP_COOKIE_VARS['picinfo']) ? $HTTP_COOKIE_VARS['picinfo'] : ($CONFIG['display_pic_info'] ? 'block' : 'none');
   echo "<div id=\"picinfo\" style=\"display: $picinfo;\">\n";
   starttable();
   echo $pic_info;
   endtable();
   echo "</div>\n";

   starttable();
   echo $comments;
   endtable();
}


[Casper]

The function you show for image display is not the same as the one in my download of the theme.

You have;

Code Select Expand

function theme_display_image($nav_menu, $picture, $votes, $pic_info, $comments, $film_strip)
{
    global $HTTP_COOKIE_VARS, $CONFIG;

    starttable();
    echo $nav_menu;
    endtable();

starttable();
    if ($CONFIG['display_film_strip'] == 1) {
echo "<table width=\"90%\" class=\"tableb\"><td width=\"200\" class=\"tableb\" valign=\"middle\" align=\"center\">";
        echo $film_strip;
echo "</td>";
    }
    echo $picture;
echo "</table>";
    endtable();

   

Try this;

Code Select Expand

function theme_display_image($nav_menu, $picture, $votes, $pic_info, $comments, $film_strip)
{
    global $HTTP_COOKIE_VARS, $CONFIG;

    starttable();
    echo $nav_menu;
    endtable();

starttable();
    if ($CONFIG['display_film_strip'] == 1) {
echo "<tr><td width='200' class='tableb'><!-- gb before film_strip -->";
        echo $film_strip;
echo "</td>";
    }
// End Graeme Edited
echo "";
    echo $picture;
echo "</tr>";
    endtable();


EDIT,  make sure you copy the html template for image display across as well.

[Hein Traag]

*wipes the sweat of his forehead*

I did don't know how i did it. But i did. With a little from DaMysterious and bighairy's work and some code demolitio on my own.

Thanks for the support!

edit: almost forgot to thank Casper . Thanks!