{{indexmenu_n>760}} ====== FCKeditor: Images from filecenter ====== ====== FCK editor in article and CPs ====== ===== V1.0: Thumb cropping & LightBox ===== ##**Only for the FCK Editor available!!** (since V1.4.2 r308 (07.03.2009)## **Short description:** \\ Based on the new experimental function for using filecenter images with the fck wysiwyg editor using in CPs. The height/width image paramters from fck are injected into the used function image_resized.php and carry over into the function cmsimage.php. \\ **Have a look too:** \\ - [[english/other-enhancements/fck-filecenter]] \\ - [[english/phpwcms_replacer_rts/frontend_init/cp_trigger/wysiwyg-image-resize]] \\ * LightBox (System integrated) * Thumb cropping * A next/prev switch for LightBox * Picture positioning with mouse move in Text * Pucture resizing with mouse move * **V1.1 Update 25.10.2011:** * LightBox in editor partially off: Parameter "xnolight" * Cropping in editor partially off: Parameter "xnocrop" This technics is **only made for the FCK** and- doesn´t run in CK editor. \\ This technics is made for the FCK and- CK editor. And is **not made for** the production of **galleries**!! ---- \\ **Docu:** http://code.google.com/p/phpwcms/source/detail?r=308 \\ //"FCKEditor got support for phpwcms file browser. Use new setting $phpwcms['FCK_FileBrowser'] = 1 in conf.inc.php to enable it (thanks Markus Köhl for idea and code)."//\\ **Forum:** -- \\ **Author:** K.Heermann (flip-flop) http://planmatrix.de //2010/06/25 // \\ **CMS-Version:** >= V1.4.2 r308 (07.04.2009) \\ **Version:** V1.0 //2010/06/25// \\ **Update:** V1.1 //2011/10/25// \\ **Tag:** -- **Condition:** -> [[http://www.phpwcms-docu.de/conf_inc_php_en.phtml]] \\ * $phpwcms['allow_ext_render'] = 1; * $phpwcms['FCK_FileBrowser'] = 1; ---- ---- \\ ==== Switch setup direct in file fck_ximage_resize.php: ==== n the area **%%*** CUSTOM VAR ***%%** Around line 40: * **$quality = 85;** //%%// quality parameter from config or your own one%%// * **$cmsimage = 1;** //%%// simple image_resized = 0 <-> img/cmsimage = 1%%// * **$xcrop = 0;** //%%// [0|1] Image cropping%%// * **$xlightbox = true;** //%%// Using the LightBox generally = true%%// * **$xnextprev = true;** //%%// [true|false] Using next/prev switch generally, if more than one image is available%%// \\ ==== Switch setup in editor: ==== * **V1.1 Update 25.10.2011:** 2 Parameters in "Insert/Edit Image" -> "Advanced" -> "Stylesheet Classes" added [xnolight xnocrop] * LightBox in editor partially off: Parameter "xnolight" * Cropping in editor partially off: Parameter "xnocrop" \\ ==== Frontend output ==== Difference to the output with cmsimage.php //(New image is calculated)//. {{:deutsch:ersetzer_rts:frontend_render:wysiwyg_cmsimage_fe01_1.gif|}} \\ ==== Backend output ==== **Backend:** Picture properties\\ {{:deutsch:ersetzer_rts:frontend_render:wysiwyg_cmsimage_be01_1.gif|}} \\ **Update V1.1:** + In Picture properties: "xnolight" und "xnocrop" {{:deutsch:ersetzer_rts:frontend_render:fck_image_resize03_1.gif|}} \\ === PHP V1.0: === **Version:** V1.0 //2010/06/25// \\ **filename:** rt_wysiwyg_cmsimage.php \\ **folder:** template/inc_script/frontend_render/ \\ **Condition:** -> [[http://www.phpwcms-docu.de/conf_inc_php_en.phtml|/config/phpwcms/conf.inc.php]] \\ * %%$phpwcms['allow_ext_render'] = 1; // allow including of custom external scripts at frontend rendering%% * %%$phpwcms['FCK_FileBrowser'] = 1; // enable|disable phpwcms Filebrowser in FCKeditor instead of built-in FCK file bowser support%% \\ cmsimage.php_ V1.0 25.06.10 K.Heermann (flip-flop) http://planmatrix.de Since phpwcms V1.4.2 r308 (07.04.2009) Based on the new experimental function for using filecenter images with the fck wysiwyg editor. -> http://code.google.com/p/phpwcms/source/detail?r=308 "FCKEditor got support for phpwcms file browser. Use new setting $phpwcms['FCK_FileBrowser'] = 1 in conf.inc.php to enable it (thanks Markus Köhl for idea and code)." The height/widht paramters from fck are injected into the used function image_resized.php (with jpg quality declared in conf.inc.php) *********************************************************************************************/ // ------------------------------------------------------------------------------------------- // obligate check for phpwcms constants if (!defined('PHPWCMS_ROOT')) { die("You Cannot Access This Script Directly, Have a Nice Day."); } // ------------------------------------------------------------------------------------------- // ======================================================================== // Search for all image strings between "" $content['all'] = preg_replace_callback("//", "image_resize_to_cmsimage" , $content['all']); // ======================================================================== function image_resize_to_cmsimage($img_tag) { if (strpos($img_tag[1],'image_resized.php')) { // image_resized.php available? /********************** CUSTON VAR ************************************* Switches for own JPG quaility, generally function call and generally LightBox - simple image_resized without file storage (low rendered img qualitiy) - img/cmsimage with rendered file stored in content/images/* (better quality) **********************************************************************/ // Switch between quality parameter from config or your own one $quality = 85; // default // $my_quality = $GLOBALS['phpwcms']['jpg_quality']; // The image quality generated by image_resized is very crappy // Switch between simple image_resized = 0 <-> img/cmsimage = 1 $cmsimage = true; $xcrop = 0; // [0|1] crop the image // Using the LightBox generally $xlightbox = true; // [true|false] // Next / Prev in LightBox if there more than one image $xnextprev = true; // [true|false] // 1. Dimensions adjusted in fck image attributes: e.g. height="150" width="200" // 2. Dimensions adjusted direct using the computer mouse: e.g. style="width: 200px; height: 150px;" /**********************************************************************/ preg_match_all('/((height="|height: )(\d+)("|px))|((width="|width: )(\d+)("|px))|filearchive\/([a-fA-F0-9]{32}).([jJpPeEgGnNiIfF]{3,4})"/', $img_tag[1], $temp); // "fck height/width" search and save in $temp[3]/[7] = value // Set search- and replacer //kh Wird erwartet: //kh Alte Version: $search = '#image_resized\.php\?format\=(.*?)\&q\=(.*?)\&imgfile\=filearchive/(.*?)" #'; $search = '#image_resized\.php\?format\=(.*?)\&q\=(.*?)\&imgfile\=filearchive/([a-fA-F0-9]{32}).([jJpPeEgGnNiIfF]{3,4})"#'; $width = implode($temp[7]); // FCK image width $height = implode($temp[3]); // FCK image height $image[1] = implode($temp[9]); // Filecenter hash name $image[2] = implode($temp[10]); // Filecenter hash extend $img_wrap = array(); $temp = ''; if (empty($cmsimage)) { // using simple image_resized without stored files? $replace = 'image_resized.php?format=$1'.'&w='.$width.'&h='.$height.'&q='.$quality.'&imgfile=filearchive/$3.$4" '; } else { // ====== No,we uses cmsimage // and there we have some paramaters concealed in class names $title = preg_match('/title\="(.*?)"/i',$img_tag[1], $g) ? html_specialchars($g[1]) : '' ; // // ====== LIGHTBOX ?? Set if ($xlightbox) { $xnextprev = ($xnextprev) ? '[xyz]':''; $img_wrap['begin'] = ''; $img_wrap['end'] = ''; if (isset( $GLOBALS['phpwcms']['release_date']) AND $GLOBALS['phpwcms']['release_date'] > '2009/11/23') // V1.4.3 r380 initslimbox(); else initializeLightbox(); // start mootools and slimbox } // LightBox END ====== // ====== Thumb with width/height and crop from FCK //kh Wird erwatet: cmsimage.php/%WIDTH%x%HEIGHT%x%CROP%x%QUALITY%/%HASH%.%EXT% $replace = 'img/cmsimage.php/'.$width.'x'.$height.'x'.$xcrop.'x'.$quality.'/$3.$4" '; } // END cms_image $img_tag[0] = $img_wrap['begin'] . preg_replace($search, $replace, $img_tag[0]) . $img_wrap['end']; } // End function return $img_tag[0]; } ?> \\ === PHP V1.1: === **Version:** V1.1 //2011/10/25// \\ **filename:** rt_wysiwyg_cmsimage.php \\ **folder:** template/inc_script/frontend_render/ \\ **Condition:** -> [[http://www.phpwcms-docu.de/conf_inc_php_en.phtml|/config/phpwcms/conf.inc.php]] \\ * %%$phpwcms['allow_ext_render'] = 1; // allow including of custom external scripts at frontend rendering%% * %%$phpwcms['FCK_FileBrowser'] = 1; // enable|disable phpwcms Filebrowser in FCKeditor instead of built-in FCK file bowser support%% \\ cmsimage.php_ V1.0 25.06.10 K.Heermann (flip-flop) http://planmatrix.de Since phpwcms V1.4.2 r308 (07.04.2009) Based on the new experimental function for using filecenter images with the fck wysiwyg editor. -> http://code.google.com/p/phpwcms/source/detail?r=308 "FCKEditor got support for phpwcms file browser. Use new setting $phpwcms['FCK_FileBrowser'] = 1 in conf.inc.php to enable it (thanks Markus Köhl for idea and code)." The height/widht paramters from fck are injected into the used function image_resized.php (with jpg quality declared in conf.inc.php) V1.1 25.10.2011 KH: Update ********************************************************************** // FCK -> images -> enhanced -> style sheet class: // Classes separated with blanks // - xnolight = lightbox off (if set generally to on) // - xnocrop = crop thumb off (if set generally to on) // e.g. xnocrop xnolight -> using Thumb no cropping and no LightBox ********************************************************************** *********************************************************************************************/ // ------------------------------------------------------------------------------------------- // obligate check for phpwcms constants if (!defined('PHPWCMS_ROOT')) { die("You Cannot Access This Script Directly, Have a Nice Day."); } // ------------------------------------------------------------------------------------------- // ======================================================================== // Search for all image strings between "" $content['all'] = preg_replace_callback("//", "image_resize_to_cmsimage" , $content['all']); // ======================================================================== function image_resize_to_cmsimage($img_tag) { if (strpos($img_tag[1],'image_resized.php')) { // image_resized.php available? /********************** CUSTON VAR ************************************* Switches for own JPG quaility, generally function call and generally LightBox - simple image_resized without file storage (low rendered img qualitiy) - img/cmsimage with rendered file stored in content/images/* (better quality) **********************************************************************/ // Switch between quality parameter from config or your own one $quality = 85; // default // $my_quality = $GLOBALS['phpwcms']['jpg_quality']; // The image quality generated by image_resized is very crappy // Switch between simple image_resized = 0 <-> img/cmsimage = 1 $cmsimage = true; $xcrop = 0; // [0|1] crop the image // Using the LightBox generally $xlightbox = true; // [true|false] // Next / Prev in LightBox if there more than one image $xnextprev = true; // [true|false] // 1. Dimensions adjusted in fck image attributes: e.g. height="150" width="200" // 2. Dimensions adjusted direct using the computer mouse: e.g. style="width: 200px; height: 150px;" /**********************************************************************/ preg_match_all('/((height="|height: )(\d+)("|px))|((width="|width: )(\d+)("|px))|filearchive\/([a-fA-F0-9]{32}).([jJpPeEgGnNiIfF]{3,4})"/', $img_tag[1], $temp); // "fck height/width" search and save in $temp[3]/[7] = value // Set search- and replacer //kh Wird erwartet: //kh Alte Version: $search = '#image_resized\.php\?format\=(.*?)\&q\=(.*?)\&imgfile\=filearchive/(.*?)" #'; $search = '#image_resized\.php\?format\=(.*?)\&q\=(.*?)\&imgfile\=filearchive/([a-fA-F0-9]{32}).([jJpPeEgGnNiIfF]{3,4})"#'; $width = implode($temp[7]); // FCK image width $height = implode($temp[3]); // FCK image height $image[1] = implode($temp[9]); // Filecenter hash name $image[2] = implode($temp[10]); // Filecenter hash extend $img_wrap = array(); $temp = ''; if (empty($cmsimage)) { // using simple image_resized without stored files? $replace = 'image_resized.php?format=$1'.'&w='.$width.'&h='.$height.'&q='.$quality.'&imgfile=filearchive/$3.$4" '; } else { // ====== No,we uses cmsimage // and there we have some paramaters concealed in class names $title = preg_match('/title\="(.*?)"/i',$img_tag[1], $g) ? html_specialchars($g[1]) : '' ; // // -------------------- V1.1 Update 25.10.2010 KH +xnocrop +xnolight // === catch the classes and sort if xnp ist set $class_temp = preg_match('/class="(.*?)"/i',$img_tag[1], $g) ? trim($g[1]) : ''; // cut out all class names $temp = explode(' ', $class_temp); asort($temp); if ($xlightbox) $xlightbox = (in_array('xnolight', $temp))? false : true; if ($xcrop) $xcrop = (in_array('xnocrop', $temp))? 0 : 1; // -------------------- End V1.1 Update // ====== LIGHTBOX ?? Set if ($xlightbox) { // only do if lightbox ist true and xnolight isn´t set. $xnextprev = ($xnextprev) ? '[xyz]':''; $img_wrap['begin'] = ''; $img_wrap['end'] = ''; if (isset( $GLOBALS['phpwcms']['release_date']) AND $GLOBALS['phpwcms']['release_date'] > '2009/11/23') // V1.4.3 r380 initslimbox(); else initializeLightbox(); // start mootools and slimbox } // LightBox END ====== // ====== Thumb with width/height and crop from FCK //kh Wird erwatet: cmsimage.php/%WIDTH%x%HEIGHT%x%CROP%x%QUALITY%/%HASH%.%EXT% $replace = 'img/cmsimage.php/'.$width.'x'.$height.'x'.$xcrop.'x'.$quality.'/$3.$4" '; } // END cms_image $img_tag[0] = $img_wrap['begin'] . preg_replace($search, $replace, $img_tag[0]) . $img_wrap['end']; } // End function return $img_tag[0]; } ?> \\ ===== History ===== **Version:** \\ * **V1.0.0** //25.06.10// : + Basic stuff \\ * **V1.1.0** //25.10.11// : + LightBox and Cropping with parameter "xnolight" and "xnocrop" in "Stylesheet Classes" partially switched off when turned on constantly by Script. \\