NAVIGATION
Table of Contents
Ein Thumb - mehrere Großansichten
Problemstellung:
Der CP Bilder spezial soll nur vom ersten Bild eine Vorschau (Thumb) anzeigen. Alle großen Bilder sollen jedoch in der LightBox mit - next/prev - sichbar sein.
Frontend:
Nur das erste Vorschaubild wird angezeigt, alle anderen Thumbs sind nicht sichbar.
Lösung V1:
Bis Version 1.4.5 r401
- Die Thumbs werden einfach mit positon: absolute; übereinandergelegt.
- Nun feht noch ein Index (z-index), damit wirklich das erste Thumb über allen anderen liegt.
- Dazu kann ein kleiner CP-Trigger verwendet werden.
Lösung V2:
Bis Version 1.4.5 r401
(Voreingestellt im CP-Trigger)
- Die Thumbs werden mit display: none; versteckt.
- Dem ersten Thumb wird nun mit einem kleinen CP-Trigger display: block; zugeordnet.
Lösung V3:
Ab Version 1.4.6 r402 mit allem Patches, download siehe docu ”DEV - Versionen im ZIP Format”.
Forum: Bilder einfügen mit nur 1 Vorschaubild
Platziere im Template zu dem CP im umschließenden Container in einer style-Anweisung:
[PHP]if ('{FIRST}' == '') echo 'display: none;';[/PHP]
“display: none” wird für alle umschließenden <div> Container gesetzt, außer dem ersten.
Z.B. in deinem “Bilder spezial” Template:
<!--IMAGES_ENTRY_START//--> <div id="img{IMGID}" class="imageEntry" style="float:left;padding:5px;border:1px solid #CCCCCC;margin:{SPACE}px {SPACE}px 0 0; [PHP]if ('{FIRST}' == '') echo 'display: none;';[/PHP]"> {IMAGE} [CAPTION]<p>{CAPTION}</p>[/CAPTION][CAPTION_ELSE]<p>{IMGNAME}</p>[/CAPTION_ELSE] [INFOTEXT] <!-- auto <p>info text</p> text --> {INFOTEXT} [/INFOTEXT] [INFOHTML] <!-- pure HTML info text --> {INFOHTML} [/INFOHTML] </div> <!--IMAGES_ENTRY_END//-->
Die Anzahl der Spalten im BE muss mindestens so groß sein wie die Anzahl der Bilder, da die Kennung {FIRST} = <!-- First Image --> immer an einem Spaltenanfang gesetzt wird.
Es sind keine weiteren Scripte notwendig.
Backend:
Template V1:
Bis Version 1.4.5 r401
/template/inc_cntpart/imagespecial/one_thumb_several_largesize.tmpl anlegen und den unten stehen Code dort ablegen.
- Nach einem neuerlichen Aufruf des CPs erscheint dieses Template in der Auswahlliste und wird selektiert.
one_thumb_several_largesize.tmpl
<!--IMAGES_HEADER_START//--> <!-- ImagesSpecial01 //--> [TITLE]<h1>{TITLE}</h1>[/TITLE] [SUBTITLE]<h2>{SUBTITLE}</h2>[/SUBTITLE] [TEXT]{TEXT}[/TEXT] <div style="height:{THUMB_HEIGHT_MAX}px;" class="images" id="images{ID}"> <!--IMAGES_HEADER_END//--> <!--IMAGES_ENTRY_START//--> <div style="z-index:55{IMGID}; position: absolute;" class="imageEntry" id="img{IMGID}"> {IMAGE} </div> <!--IMAGES_ENTRY_END//--> <!--IMAGES_FOOTER_START//--> <div style="clear:both;"><!-- clear //--></div> </div> <!--IMAGES_FOOTER_END//-->
Template V2:
Bis Version 1.4.5 r401
/template/inc_cntpart/imagespecial/one_thumb_several_largesize.tmpl anlegen und den unten stehen code dort ablegen.
- Nach einem neuerlichen Aufruf des CPs erscheint dieses Template in der Auswahlliste und wird selektiert.
one_thumb_several_largesize.tmpl
<!--IMAGES_HEADER_START//--> <!-- ImagesSpecial01 //--> [TITLE]<h1>{TITLE}</h1>[/TITLE] [SUBTITLE]<h2>{SUBTITLE}</h2>[/SUBTITLE] [TEXT]{TEXT}[/TEXT] <div class="images" id="images{ID}"> <!--IMAGES_HEADER_END//--> <!--IMAGES_ENTRY_START//--> <div style="display:none;" id="img{IMGID}"; class="imageEntry"> {IMAGE} </div> <!--IMAGES_ENTRY_END//--> <!--IMAGES_FOOTER_START//--> <div style="clear:both;"><!-- clear //--></div> </div> <!--IMAGES_FOOTER_END//-->
CP-Trigger
Bis Version 1.4.5 r401
Die Datei /template/inc_Script/frontend_init/cp_trig_images_special.php erstellen und den unten stehenden Code dort hineinkopieren.
Bitte kommentieren Sie je nach verwendeter Version (V1/V2) die entsprechende Zeile aus. Voreingestellt ist die Version 2 (V2).
<?php // http://forum.phpwcms.org/viewtopic.php?p=107107#p107107 /* ------------------------------------------------------------------ function cp_trigger_function_name($param1, & $param2) { if($param2['acontent_type'] == 14) { // 14 is CP WYSIWYG $param1 = do_this_or_that($param2['acontent_id']); } return $param1; } * cp_trigger_function_name - the unique function name * $param1 - holds the content part html source on which you can parse or do custom processing * $param2 - is a reference to an array which holds content part values like ID, dates and other values - see db table phpwcms_articlecontent * * Always return $param1; */ // ------------------------------------------------------------------ // obligate check for phpwcms constants if (!defined('PHPWCMS_ROOT')) { die("You Cannot Access This Script Directly, Have a Nice Day."); } // ------------------------------------------------------------------ /** * * KH: 30.12.09 * Sucht im CP Images Special nach %%style="display:none;" id="img0%% * und erstzt durch %%style="display:block;" id="img0%% * *Verwendet wird hier eine Laufzeitoptimierte Version, die str_replace mit einer Funktion verwendet *anstatt preg_replace * ':none;" id="img0' -> ':block;" id="img0' */ /* Only the first occurence is replaced ----------- */ function str_replace_once($needle , $replace , $haystack){ // Looks for the first occurence of $needle in $haystack // and replaces it with $replace. $pos = strpos($haystack, $needle); if ($pos === false) { // Nothing found return $haystack; } return substr_replace($haystack, $replace, $pos, strlen($needle)); } // V1: Sucht im CP Image Special nach 'z-index:550' und ersetzt durch 'z-index:999' // V2: Sucht im CP Image Special nach 'style="display:none;" id="img0' // und ersetzt mit 'style="display:block;" id="img0' // -------------------------------------------------------------------------------- function CP_IMAGES_SPECIAL($text, & $data) { if( ($data['acontent_type'] == 31) AND // 31 is CP imgagesspecial (strpos($text, '<!-- ImagesSpecial01 //-->') != false) ) // Ist es das richtige Template? { // $text = str_replace('z-index:550','z-index:999', $text); // V1 $text = str_replace_once(':none;" id="img0' , ':block;" id="img0' , $text); // V2 } return $text; } register_cp_trigger('CP_IMAGES_SPECIAL'); ?>
