Layout - template_display_media - classical vertical filmstripe Layout - template_display_media - classical vertical filmstripe
 

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Main Menu

Layout - template_display_media - classical vertical filmstripe

Started by Kugelblitz, February 03, 2006, 11:52:23 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Print
Go Down Pages1
User actions

Kugelblitz

February 03, 2006, 11:52:23 AM
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
<?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

#1
February 03, 2006, 01:17:12 PM
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
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
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

#2
February 03, 2006, 10:27:22 PM
Hey Frank,
Vielen Dank für Deine Antwort! Tausend Dank ;D 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

<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

#3
February 04, 2006, 01:08:12 PM
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

#4
February 05, 2006, 09:16:42 AM
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

#5
February 06, 2006, 01:57:51 AM
ah ok, ich dachte Du meinst das allgemeine Coppermine-Menü. Du meinst die "image navigation bar". Bearbeite theme.php, suche
Code Select
// HTML template for the image navigation barund bearbeite das Teil.

Kugelblitz

#6
February 07, 2006, 03:05:46 AM
Quote from: GauGau on February 06, 2006, 01:57:51 AM
ah ok, ich dachte Du meinst das allgemeine Coppermine-Menü. Du meinst die "image navigation bar". Bearbeite theme.php, suche
Code Select
// 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

#7
February 07, 2006, 04:47:27 AM
Code Select
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

#8
February 07, 2006, 07:01:31 AM
Code Select
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

#9
February 07, 2006, 07:52:15 AM Last Edit: February 07, 2006, 07:57:47 AM by 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

<?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

#10
February 07, 2006, 08:05:47 AM
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

#11
February 07, 2006, 08:12:50 AM Last Edit: February 07, 2006, 08:20:10 AM by 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

#12
February 16, 2006, 10:28:10 PM
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.
Print
Go Up Pages1
User actions