FCKeditor: Images from filecenter
FCK editor in article and CPs
- V1.0: Thumb cropping & LightBox
- History

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:
- FCK/CK and the filecenter
- WYSIWYG (F/CK) 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”

<note>

~~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!! </note>

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 <www.pagewerkstatt.ch> 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”

Condition: → /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

template/inc_script/frontend_render/rt_wysiwyg_cmsimage.php (v1.0)

<?php
/*********************************************************************************************
    rt: image_resize.php -> 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
    <www.pagewerkstatt.ch> 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 "<img"       ">"
   $content['all'] = preg_replace_callback("/<img(.*?) \/>/", "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: <img src="image_resized.php?format=jpg&w=100&h=200&q=85&imgfile=test.jpg" alt="" border="0">
//kh        Alte Version: $search  = '#image_resized\.php\?format\=(.*?)\&amp;q\=(.*?)\&amp;imgfile\=filearchive/(.*?)" #';
 
            $search   = '#image_resized\.php\?format\=(.*?)\&amp;q\=(.*?)\&amp;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'.'&amp;w='.$width.'&amp;h='.$height.'&amp;q='.$quality.'&amp;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'] = '<a href="img/cmsimage.php/'.$GLOBALS['phpwcms']['img_prev_width'].'x'.$GLOBALS['phpwcms']['img_prev_height'].'/'.$image[1].'.'.$image[2].'" rel="lightbox'.$xnextprev.'" title="'.$title.'" target="_blank">';
                    $img_wrap['end']   = '</a>';
 
                    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: → /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

template/inc_script/frontend_render/rt_wysiwyg_cmsimage.php (v1.1)

<?php
/*********************************************************************************************
    rt: image_resize.php -> 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
    <www.pagewerkstatt.ch> 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 "<img"       ">"
   $content['all'] = preg_replace_callback("/<img(.*?) \/>/", "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: <img src="image_resized.php?format=jpg&w=100&h=200&q=85&imgfile=test.jpg" alt="" border="0">
//kh        Alte Version: $search  = '#image_resized\.php\?format\=(.*?)\&amp;q\=(.*?)\&amp;imgfile\=filearchive/(.*?)" #';
 
            $search   = '#image_resized\.php\?format\=(.*?)\&amp;q\=(.*?)\&amp;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'.'&amp;w='.$width.'&amp;h='.$height.'&amp;q='.$quality.'&amp;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'] = '<a href="img/cmsimage.php/'.$GLOBALS['phpwcms']['img_prev_width'].'x'.$GLOBALS['phpwcms']['img_prev_height'].'/'.$image[1].'.'.$image[2].'" rel="lightbox'.$xnextprev.'" title="'.$title.'" target="_blank">';
                    $img_wrap['end']   = '</a>';
 
                    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.