NAVIGATION
This is an old revision of the document!
Table of Contents
One thumb - several largesize
The problem:
In CP images special only the first thumb of all is to be displayed. All large pictures should be visible in the LightBox using (next/prev).
Frontend:
Only the first thumb is visible, all other are hidden.
Solution V1:
The Thumbs is laid on top of each other simply with positon: absolute;.
- The Thumbs is laid on top of each other simply with positon: absolute;.
- Now still a index (z-index) is missing, so that really the first Thumb stands above.
- In addition a small CP-trigger can be used.
Solution V2:
(Preset in CP-Trigger)
- The thumbs are marked with display: none; to hidden.
- Using a small CP-trigger we display: block; to the first Thumb.
Solution V3:
Since version 1.4.6 r402 with all patches, see download docu ”DEV - Versionen im ZIP Format”.
Forum: Bilder einfügen mit nur 1 Vorschaubild
Place in template from the CP in the surrounding container into a style statement:
[PHP]if ('{FIRST}' == '') echo 'display: none;';[/PHP]
“display: none” is set for all <div> enclosing container, except the first.
E.g. in a “Images special” 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//-->
The number of columns in BE must be at least as large as the number of images, since the ID (FIRST) = <!-- First Image --> will be placed on a column top.
There are no more scripts needed.
Backend:
Template V1:
Create the file /template/inc_cntpart/imagespecial/one_thumb_several_largesize.tmpl and put into the code below.
- After a reload of the CP this template will appear in the select list and you can selectable.
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:
Create the file /template/inc_cntpart/imagespecial/one_thumb_several_largesize.tmpl and put into the code below.
- After a renewed call to the CP this template will appear in the select list and you can selectable.
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
Create the file /template/inc_Script/frontend_init/cp_trig_images_special.php and put into the code below.
Please comment out the appropriate line, depending on the version (V1/V2). Version 2 is preset (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'); ?>
