Layout - template_display_media - classical vertical filmstripe

[Kugelblitz]

Hallo,
ich möchte das classical vertical filmstripe Theme ändern.
Der Filmstreifen soll an der rechten Seite entlanglaufen.
auf der Linken seite ist die Navigation, darunter die Bilder und darunter die Kommentare.
Habe 2 Grafiken zur veranschaulichung angehängt.
Meine schwierigkeit liegt in der Anordnung der PHP-Blöcke (template_film_strip | template_display_media | etc..)

meine theme.php

Code Select Expand

<?php 

/************************* Coppermine Photo Gallery ************************ 
Copyright (c) 2003-2005 Coppermine Dev Team 
v1.1 originally written by Gregory DEMAR 
This program is free software; you can redistribute it and/or modify 
it under the terms of the GNU General Public License as published by 
the Free Software Foundation; either version 2 of the License, or 
(at your option) any later version. 
******************************************** 
Coppermine version: 1.4.3 
Theme class_vert_strip upgraded from 1.3 to 1.4
dec 2005
Very small changes by HarryS
vertical filmstrip, at the left of the intermediate picture
**********************************************/

define('THEME_HAS_FILM_STRIP_GRAPHIC', 1); 

// HTML template for filmstrip display
$template_film_strip = <<<EOT
<tr>
<td>
<div id="filmstripe">
       {THUMB_STRIP}
        </div>
</td>
</tr>

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

EOT;


// HTML template for intermediate image display - HS: valign
$template_display_media = <<<EOT
                <td align="left" valign="top" class="display_media" height="{CELL_HEIGHT}" style="white-space: nowrap; padding: 0px;">
                        <table cellspacing="2" cellpadding="0" class="imageborder">
                               <tr>
                                        <td align="left">
                                                {IMAGE}
                                                {ADMIN_MENU}
                                        </td>
                               </tr>
                        </table>
<!-- BEGIN img_desc -->
                        <table cellpadding="0" cellspacing="0" class="tableb">
<!-- BEGIN title -->
                                <tr>
                                        <td class="tableb"><b>
                                                {TITLE}
                                        </b></td>
                                </tr>
<!-- END title -->
<!-- BEGIN caption -->
                                <tr>
                                        <td class="tableb">
                                                {CAPTION}
                                        </td>
                                </tr>
<!-- END caption -->
                        </table>
<!-- END img_desc -->
                </td>
EOT;

// Added to display film_strip
function theme_display_film_strip(&$thumb_list, $nbThumb, $album_name, $aid, $cat, $pos, $sort_options, $mode = 'thumb')
{
    global $CONFIG, $THEME_DIR;
    global $template_film_strip, $lang_film_strip;

    static $template = '';
    static $thumb_cell = '';
    static $empty_cell = '';
    static $spacer = '';

    if ((!$template)) {
        $template = $template_film_strip;
        $thumb_cell = template_extract_block($template, 'thumb_cell');
        $empty_cell = template_extract_block($template, 'empty_cell');
    }

    $cat_link = is_numeric($aid) ? '' : '&cat=' . $cat;

    $thumbcols = $CONFIG['thumbcols'];
    $cell_width = ceil(100 / $CONFIG['max_film_strip_items']) . '%';

    $i = 0;
    $thumb_strip = '';
    foreach($thumb_list as $thumb) {
        $i++;
        if ($mode == 'thumb') {
            $params = array('{CELL_WIDTH}' => $cell_width,
                '{LINK_TGT}' => "displayimage.php?album=$aid$cat_link&pos={$thumb['pos']}",
                '{THUMB}' => $thumb['image'],
                '{CAPTION}' => '',
                '{ADMIN_MENU}' => ''
                );
        } else {
            $params = array('{CELL_WIDTH}' => $cell_width,
                '{LINK_TGT}' => "index.php?cat={$thumb['cat']}",
                '{THUMB}' => $thumb['image'],
                '{CAPTION}' => '',
                '{ADMIN_MENU}' => ''
                );
        }
        $thumb_strip .= template_eval($thumb_cell, $params);
    }

    if (defined('THEME_HAS_FILM_STRIP_GRAPHICS')) {
        $tile1 = $THEME_DIR . 'images/tile1.gif';
        $tile2 = $THEME_DIR . 'images/tile2.gif';
    } elseif (defined('THEME_HAS_FILM_STRIP_GRAPHIC')) {
        $tile1=$tile2=$THEME_DIR . 'images/tile.gif';
    } else {
        $tile1=$tile2= 'images/tile.gif';
    }

    $params = array('{THUMB_STRIP}' => $thumb_strip,
        '{COLS}' => $i,
        '{TILE1}' => $tile1,
        '{TILE2}' => $tile2,
        );

    ob_start();
    starttable('');
      echo template_eval($template, $params);
    endtable();
    $film_strip = ob_get_contents();
    ob_end_clean();

    return $film_strip;
}

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' valign='middle' ><!-- gb before film_strip -->";
        echo $film_strip;
echo "</td><!-- gb after film_strip -->";
    }
echo "<!-- gb before picture -->";
    echo $picture;
    echo "</tr><!-- gb after picture -->";
    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();
}










  // HTML template for template sys_menu spacer
  $template_sys_menu_spacer ="|";




?>

[fwe77]

Hallo Kugelblitz,

ich hoffe das ich Dich richtig verstanden habe - der Filmstreifen soll von links nach rechts?!

Okay, ich gehe von der Original theme.php (template_film_strip) aus - suche nach folgenden Code:

Code Select Expand

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


und tausche ihn mit diesen aus:

Code Select Expand

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


Ich hoffe damit konnte ich Dir weiterhelfen! Ansonsten weißt Du, wo wir zu finden sind! 

Gruß. Frank.

[Kugelblitz]

Hey Frank,
Vielen Dank für Deine Antwort! Tausend Dank Klappt Juhuuuu...

Richtig Klasse wäre es wenn jetzt noch Navigation, Bild und Kommentar in einer Spalte und der Filmstreifen einer anderen rechts daneben ist.
Damit der Filmstreifen möglichst lang werden kann. Und die Kommentarte nur unter dem Bild und nicht unter dem Filmstreifen stehen.


So in der art

Code Select Expand


<table width="760" border="1">
    <tr>
        <td>navigation</td>
        <td width="200" rowspan="3">filmstrip</td>
    </tr>
<tr>
    <td height="360">picture</td>
    </tr>
    <tr>
        <td>comments</td>
    </tr>
</table>


[Joachim Müller]

sollte leicht möglich sein durch Anpassung von template.html
Schau Dir mal die Themes in der Demo an, da gibt es schon welche mit vertikalem Menü, z.B. http://coppermine-gallery.net/demo/cpg14x/index.php?theme=digital_red oder http://coppermine-gallery.net/demo/cpg14x/index.php?theme=fruity
Das liese sich leicht mit dem vertikalen Filmstrip kombinieren. Allerdings läufst Du früher oder später Gefahr, dass Besucher mit geringen Monitorauflösungen oder nicht voll aufgezogenem Browserfenster Probleme oder "verbürstelte" Seiten sehen, abhängig von der Grösse Deiner intermediate files (Bilder in Zwischengrösse).

[Kugelblitz]

Ist die template.html nicht für das komplette aussehen der Seite zuständig?
Ändern möchte ich nur die template_display_media Ansicht

siehe
http://groups.kisd.de/sydney_06/swaptv

[Joachim Müller]

ah ok, ich dachte Du meinst das allgemeine Coppermine-Menü. Du meinst die "image navigation bar". Bearbeite theme.php, suche

Code Select Expand

// HTML template for the image navigation barund bearbeite das Teil.

[Kugelblitz]

ah ok, ich dachte Du meinst das allgemeine Coppermine-Menü. Du meinst die "image navigation bar". Bearbeite theme.php, suche

Code Select Expand

// HTML template for the image navigation barund bearbeite das Teil.

Darin kann ich die Anordnung der Buttons in der Image Navigation Bar ändern
aber wo fängt denn die Tabelle an? ich seh nur die Zeilen und Spalten <tr> <td>

[Kugelblitz]

Code Select Expand

theme_display_image($nav_menu, $picture, $votes, $pic_info, $comments, $film_strip);

wenn ich die reihenfolge der Elemente ändere zerreist es mir das layout.

es sollte $picture, $nav_menu, $votes, $comments ,$pic_info sein.
der $film_strip soll dabei rechts neben allen zuvor genannten Elementen stehen.

[Joachim Müller]

Code Select Expand

theme_display_image($nav_menu, $picture, $votes, $pic_info, $comments, $film_strip); darfst Du nicht ändern, sondern die Anordnung der Elemente. Poste mal Deine Änderungen.

[Kugelblitz]

Habs noch nicht vernünftig umstellen können. Habe ich mich denn mittlerweile klar genug ausgedrückt?
Ansonsten wirf einen Blick auf die angehängent Bilder meines ersten postings in diesem Thread.
Danke für Deine Mühe! Finde ich klasse!

Auszug aus der theme.php

Code Select Expand


<?php 

/************************* Coppermine Photo Gallery ************************ 
Copyright (c) 2003-2005 Coppermine Dev Team 
v1.1 originally written by Gregory DEMAR 
This program is free software; you can redistribute it and/or modify 
it under the terms of the GNU General Public License as published by 
the Free Software Foundation; either version 2 of the License, or 
(at your option) any later version. 
******************************************** 
Coppermine version: 1.4.3 
Theme class_vert_strip upgraded from 1.3 to 1.4
dec 2005
Very small changes by HarryS
vertical filmstrip, at the left of the intermediate picture
**********************************************/

define('THEME_HAS_FILM_STRIP_GRAPHIC', 1); 

// HTML template for filmstrip display
$template_film_strip = <<<EOT
<tr>
<td>
<form method="post" action="thumbnails.php" name="searchcpg">
<input type="text"   name="search" style="width: 160px"  maxlength="100" class="textinput" value="search..." onBlur="if(this.value=='') this.value='search...';" onFocus="if(this.value=='search...') this.value='';" />
<input type="submit" value="go" class="button" />
<input type="hidden" name="album" value="search" />
<input type="hidden" name="title" id="title" class="hidden" checked="checked" />
<input type="hidden" name="caption" id="caption" class="hidden" checked="checked" />
<input type="hidden" name="keywords" id="keywords" class="hidden" checked="checked" />
<input type="hidden" name="owner_name" id="owner_name" class="hidden" checked="checked" />

<!--
<select name="type" class="listbox">
<option value="AND" selected="selected">Match all words (AND)</option>
<option value="OR">Match any words (OR)</option></select>
-->

<input type="hidden" name="filename" id="filename" class="hidden" checked="checked" />
<input type="hidden" name="pic_raw_ip" class="hidden" checked="checked" id="pic_raw_ip" />
</form>
<div id="filmstripe">
       {THUMB_STRIP}
        </div>
</td>
</tr>
<!-- BEGIN thumb_cell -->
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="bottom">
<a href="{LINK_TGT}">{THUMB}</a>
                {CAPTION}
                {ADMIN_MENU}
</td>
</tr>
</table>
<!-- END thumb_cell -->
<!-- BEGIN empty_cell -->
                <td valign="top" align="left">&nbsp;</td>
<!-- END empty_cell -->

EOT;


// HTML template for intermediate image display - HS: valign
$template_display_media = <<<EOT
                <td align="left" valign="top" class="display_media" height="{CELL_HEIGHT}" style="white-space: nowrap; padding: 0px;">
                        <table cellspacing="2" cellpadding="0" class="imageborder">
                               <tr>
                                        <td align="left">
                                                {IMAGE}
                                                {ADMIN_MENU}
                                        </td>
                               </tr>
                        </table>
<!-- BEGIN img_desc -->
                        <table cellpadding="0" cellspacing="0" class="tableb">
<!-- BEGIN title -->
                                <tr>
                                        <td class="tableb"><b>
                                                {TITLE}
                                        </b></td>
                                </tr>
<!-- END title -->
<!-- BEGIN caption -->
                                <tr>
                                        <td class="tableb">
                                                {CAPTION}
                                        </td>
                                </tr>
<!-- END caption -->
                        </table>
<!-- END img_desc -->
                </td>
EOT;

// Added to display film_strip
function theme_display_film_strip(&$thumb_list, $nbThumb, $album_name, $aid, $cat, $pos, $sort_options, $mode = 'thumb')
{
    global $CONFIG, $THEME_DIR;
    global $template_film_strip, $lang_film_strip;

    static $template = '';
    static $thumb_cell = '';
    static $empty_cell = '';
    static $spacer = '';

    if ((!$template)) {
        $template = $template_film_strip;
        $thumb_cell = template_extract_block($template, 'thumb_cell');
        $empty_cell = template_extract_block($template, 'empty_cell');
    }

    $cat_link = is_numeric($aid) ? '' : '&cat=' . $cat;

    $thumbcols = $CONFIG['thumbcols'];
    $cell_width = ceil(100 / $CONFIG['max_film_strip_items']) . '%';

    $i = 0;
    $thumb_strip = '';
    foreach($thumb_list as $thumb) {
        $i++;
        if ($mode == 'thumb') {
            $params = array('{CELL_WIDTH}' => $cell_width,
                '{LINK_TGT}' => "displayimage.php?album=$aid$cat_link&pos={$thumb['pos']}",
                '{THUMB}' => $thumb['image'],
                '{CAPTION}' => '',
                '{ADMIN_MENU}' => ''
                );
        } else {
            $params = array('{CELL_WIDTH}' => $cell_width,
                '{LINK_TGT}' => "index.php?cat={$thumb['cat']}",
                '{THUMB}' => $thumb['image'],
                '{CAPTION}' => '',
                '{ADMIN_MENU}' => ''
                );
        }
        $thumb_strip .= template_eval($thumb_cell, $params);
    }

    if (defined('THEME_HAS_FILM_STRIP_GRAPHICS')) {
        $tile1 = $THEME_DIR . 'images/tile1.gif';
        $tile2 = $THEME_DIR . 'images/tile2.gif';
    } elseif (defined('THEME_HAS_FILM_STRIP_GRAPHIC')) {
        $tile1=$tile2=$THEME_DIR . 'images/tile.gif';
    } else {
        $tile1=$tile2= 'images/tile.gif';
    }

    $params = array('{THUMB_STRIP}' => $thumb_strip,
        '{COLS}' => $i,
        '{TILE1}' => $tile1,
        '{TILE2}' => $tile2,
        );

    ob_start();
    starttable('');
      echo template_eval($template, $params);
    endtable();
    $film_strip = ob_get_contents();
    ob_end_clean();

    return $film_strip;
}

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> ";
                echo $picture;
                echo "<td width='200' class='tableb' valign='middle' ><!-- gb before film_strip -->";
                echo $film_strip;
                echo "</td><!-- gb after film_strip -->";
    }
                echo "<!-- gb before picture -->";
    echo "</tr><!-- gb after picture -->";
    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();
}

?>


[Joachim Müller]

ist die Modifikation auf http://groups.kisd.de/sydney_06/swaptv/displayimage.php?album=2&pos=2 zu sehen oder benutzt Du ein temporäres Theme zum Basteln?

[Kugelblitz]

Hey GauGau
Jo das ist der aktuelle Stand der Dinge...Ist die Modifikation und daran soll herrumgeschraubt werden.

To Do's..
- den Filmstreifen rechts ganzdurchgänig machen ...der soll vom Header bis zum Footer reichen.
- Titel der Clips unter die Thumbnails im Filmstreifen

[Kugelblitz]

So der Filmstreifen ist jetzt durchgänig. Wäre Cool wenn die Höhe wächst jeh mehr kommentare geschrieben werden. Also das er vertikal immer 100% höhe hat aber nie höher ist als die Linke Spalte mit dem Filmen und Kommentaren.
Habs bisher noch nicht hinbekommen die Titel der Clips unter die Thumbnails im Filmstreifen zu setzen. Caption steht da wird aber nicht angezeigt.