We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 20909
    • 19 Posts
    Hello,

    I want to create a Template Variable (TV) where the user can select an image from his local HardDisc and upload the image to the website.

    BUT: If the image does not have the dimension 300x300 px, MODx has to manipulate the image to fit into a box with 300x300 px.

    So if the image is a square, MODx resizes the image to 300x300 px and overrides the big image.

    If the width is bigger than the height, MODx resizes the width to 300px and resizes the height to a size so the scaling is still correct.

    If the height is bigger than the width, MODx resizes the height to 300px and resizes the width to a size so the scaling is still correct.

    I think I could write the PHP-Code for the image-manipulation myself (using php-gd2), but I don’t know where to implement the code into MODx.

    I know I can use "Image" as Input Type when creating a TV, but how can I insert my php-image-manipulation-code to be executed immediately after the user uploads an image?
      • 26931
      • 2,314 Posts
      Hi name,

      try one of these:

      phpThumb Package:
      http://modxcms.com/extras/package/341
      TVimageResizer:
      http://modxcms.com/extras/package/566
        • 20909
        • 19 Posts
        Brilliant!

        I use TVimageResizer, which does the job excellent!

        I just made some changes to the code, so my images are being squared.

        There is just a little problem. Normally there are two text-inputs (width and height) at the TV where you check the selectbox "resize".

        I still want both text-inputs to appear, but only one is editable and the other does then automatically contain the same value (so the user gets a squared image and cant change that).

        I tried to change the code like that:

        $output = <<< EOT
        
        
        
        <!-- TVimageResizer -->
        
        <script type="text/javascript">
        
        
        
        var imageNames = [$tvs];
        
        
        
        window.onDomReady(function() {
        
            for (var i = 0; i < imageNames.length; i++) {
        
              var elem = $('tv' + imageNames[i])
        
              if (elem) {
        
                var field1 = new Element('input',{type:'checkbox', name:'rsz[]', id:'rsz'+(i+1), value:imageNames[i]});
        
                var label = new Element('label',{for:'rsz'+(i+1)});
        
                var field2 = new Element('input',{type:'text', size:'5', [color=red]id:'blablub'[/color], name:'rszsize[]', value:$th_size, 'styles': {'width':'20px'}});
        
                var field3 = new Element('input',{type:'text', size:'5', name:'rszdouble[]', [color=red]'value':{$('blablub').get('value')}, disabled:'disabled'[/color], 'styles': {'width':'20px'}});
        
                elem.getParent().adopt(field1).adopt(label.appendText('resize')).adopt(field2).appendText('x','after').adopt(field3);
        
              }
        
          }
        
        });
        
        
        
        </script>
        
        <!-- /TVimageResizer -->


        So I tried to get the value-property like it’s explained in the MooTools Docu... But it just doen’t work as the image is neither previewed nor does the checkbox and inputs show up.
          • 20909
          • 19 Posts
          Ok, I have thinked about it, and there is one more thing I would like to implement.

          When making a thumb squared, I want the thumb to be squared with no white bars at the up and down or left and right.

          PROBLEM: When using easyphpthumbs inbuild Cropping function, it does not firstly resize the biiiig image, but uses the big file to crop it to something very small... Meaning the cropped thumb does not show much.

          For making a squared 100x100 px thumb with no bars I am about to implement the following:
          1. Create a thumb with at least width=100px or height=100px -> tmp_filename.jpg
          2. Use tmp_filename.jpg as source for cropping it to a thumb with 100x100 px

          Here is the code:

          if ($e->name == 'OnBeforeDocFormSave') {
          
            
          
            if(isset($_POST['rsz'])){
          
              echo $override_tv;
          
              foreach ($_POST['rsz'] as $k=>$v) {
          
                if(!empty($_POST['tv'.$v])){
          
                  $s_value = $_POST['tv'.$v]; // the location+filename for the original image (e.g. /location/file.jpg)
          
                  $location = str_replace(basename($s_value),'',$s_value);
          
                  $new_value = $location.$prefix.basename($s_value); // the location+filename for the final thumb (e.g. /location/t_file.jpg)
          
                  
          
                  if($s_value!=$new_value && !empty($s_value)){ 
          
                    if(file_exists("../$new_value")) unlink("../$new_value");
          
                
          
                    $th_size = $_POST['rszsize'][$k] ? $_POST['rszsize'][$k] : $th_size; // contains the width for the square (remember: height=width for a square)
          
                    
                    $tmpprefix = ""; // initialize tmpprefix
          
          // First step, working correct:
          	  if($square) {
                      $tmpprefix = "tmp_";
          
                      $tmp = new easyphpthumbnail;
          	    $tmp -> Thumbheight = $th_size;
          	    $tmp -> Thumbwidth = $th_size; // this will make either height or width exactly "$th_size"px, while the other is a bit larger
          
                      $tmp -> Quality = 100;
          
                      $tmp -> Thumblocation = "../".$location;
          
                      $tmp -> Thumbprefix = $tmpprefix;
          
                      $tmp -> Createthumb("../$s_value","file"); // The tmp_filename.jpg is created from the original file correctly
          
          
          // Second step, doesnt work correct:
                      $thumb = new easyphpthumbnail;
          	    $thumb -> Thumbsize = $th_size; // make it a square with "$th_size"x"$th_size" px
          	    $thumb -> Square = true;
          	    $thumb -> Cropimage[0] = 2;
          	  } else { // not really in use at the moment
          	    $thumb = new easyphpthumbnail;
                      $thumb -> Thumbheight = $th_height;
                      $thumb -> Thumbwidth = $th_width;
                    }
          
                    if($rcorner)
                      $thumb -> Clipcorner = array(2,$rcorner,0,1,1,1,1);
                    if($watermark){
                      $thumb -> Watermarkpng = $watermark;
                      $thumb -> Watermarktransparency = 60;
                      $thumb -> Watermarkposition = $watermarkPos;
                    }
                    if($copyrighttext)
                      $thumb -> Copyrighttext = $copyrighttext;
                    $thumb -> Quality = $quality;
                    $thumb -> Thumblocation = "../".$location;
                    $thumb -> Thumbprefix = $prefix;
                    $thumb -> Createthumb("../"$tmpprefix.$s_value,"file");
           // the real cropped thumb is not created from tmp_filename.jpg
                    
                    $tmplvars[$v][1] = $new_value;
          
                  }
          
                }
          
              }
          
            }
          
          }


          The first step works, the tmp_filename.jpg is created and correct. (This should later be automatically removed).

          But the second step doesnt work. It seems as if php cant find tmp_filename.jpg [ $thumb -> Createthumb("../"$tmpprefix.$s_value,"file") ] and so cannot make the real cropped thumb...
            • 26931
            • 2,314 Posts
            maybe also check the phpThumb Package?: http://modxcms.com/extras/package/341
              • 20909
              • 19 Posts
              I find the feature-list of TVimageResizer is actually what i searched for (also I still have these two difficulties...)

              the phpThumb is more for images put into the RTE, and not images comming from a TV. That’s why I would like to get it to work in TVimageResizer.

              But thanks! I just don’t see how to get phpThumb to work for a TV.
                • 26931
                • 2,314 Posts
                I just don’t see how to get phpThumb to work for a TV
                it’s actually a phpthumb extension for MODx phx, so you can use it for your TVs like this: [*image:phpthumb=`w=400`*]
                ...with all the phpthumb features

                http://modxcms.com/forums/index.php/topic,16002.0.html
                  • 20909
                  • 19 Posts
                  Thanks for your efforts sharkbaits!

                  But now I worked out how to make it with TVimageResizer.

                  Of course my path to the tmp_filename.jpg was wrong. And my understanding of the crop-function too.

                  Here is the whole code which works:

                  //<?php
                  
                  //***********************************
                  //TVimageResizer plugin v1.6 for MODx 1.0
                  //Used EasyPhpThumbnail class by JF Nutbroek
                  //***********************************
                  //Andchir  http://wdevblog.net.ru
                  //***********************************
                  //Modified 17. August 2009
                  //When using dimensions for Thumbnails 
                  //the plugin now automatically crops the image
                  //to exactly fit the dimensions.
                  //***********************************
                  // Copy folder to assets/plugins/
                  // Description: Resizing images of Template Variables. Rounding the corners, adding watermarks.
                  // Configuration: &th_width=Width;int;150 &th_height=Height;int;110 &prefix=Prefix;string;t_ &rcorner=Corners percentage of clipping;int;0 &watermark=Watermark image path (png);string;0 &copyrighttext=Copyright text;string;0 &quality=Quality;int;85 
                  // System Events: OnDocFormRender, OnBeforeDocFormSave
                  //***********************************
                  
                  if(!isset($prefix)) $prefix="t_";
                  if(!isset($th_width)) $th_width=100;
                  if(!isset($th_height)) $th_height=100;
                  if(!isset($rcorner)) $rcorner=false;
                  if(!isset($watermark)) $watermark=false;
                  if(!isset($watermarkPos)) $watermarkPos="90% 90%";
                  if(!isset($copyrighttext)) $copyrighttext=false;
                  if(!isset($quality)) $quality=85;
                  if(!isset($square)) $square=true;
                  if(!isset($bg_color)) $bg_color="#ffffff";
                  
                  global $content;
                  global $tmplvars;
                  
                  $doc_id = $content['id'];
                  $template = $content['template'];
                  $fullpath = $modx->config['base_path'];
                  define(IMAGE_CLASS,"GD");
                  $e = &$modx->Event;
                  $output = "";
                  
                  $tb_tmplvars = $modx->getFullTableName('site_tmplvars');
                  $tb_tmplvar_values = $modx->getFullTableName('site_tmplvar_contentvalues');
                  
                  require_once('../assets/plugins/tvimageresizer/easyphpthumbnail.class.php');
                  
                  if ($e->name == 'OnDocFormRender') {
                  
                  $result = $modx->db->select('id,name', $tb_tmplvars, "type='image'");
                  $tvs = '';
                  
                  while ($row = $modx->db->getRow($result))
                    $tvs .= ",'" . $row['id'] . "'";
                  
                  $tvs = substr($tvs, 1); // removes starting comma
                  
                  $output = <<< EOT
                  
                  <!-- TVimageResizer -->
                  <script type="text/javascript">
                  
                  var imageNames = [$tvs];
                  
                  window.onDomReady(function() {
                      for (var i = 0; i < imageNames.length; i++) {
                        var elem = $('tv' + imageNames[i])
                        if (elem) {
                          var field1 = new Element('input',{type:'checkbox', name:'rsz[]', id:'rsz'+(i+1), value:imageNames[i]});
                          var label = new Element('label',{for:'rsz'+(i+1)});
                          var field2 = new Element('input',{type:'text', size:'5', name:'rszwidth[]', value:$th_width, 'styles': {'width':'20px'}});
                          var field3 = new Element('input',{type:'text', size:'5', name:'rszheight[]', value:$th_height, 'styles': {'width':'20px'}});
                          elem.getParent().adopt(field1).adopt(label.appendText('resize')).adopt(field2).appendText('x','after').adopt(field3);
                        }
                    }
                  });
                  
                  </script>
                  <!-- /TVimageResizer -->
                  
                  EOT;
                  
                  $e->output($output);
                  
                  }
                  
                  if ($e->name == 'OnBeforeDocFormSave') {
                  
                      if(isset($_POST['rsz'])){
                      echo $override_tv;
                      foreach ($_POST['rsz'] as $k=>$v) {
                        if(!empty($_POST['tv'.$v])){
                          $s_value = $_POST['tv'.$v];
                          $location = str_replace(basename($s_value),'',$s_value);
                          $new_value = $location.$prefix.basename($s_value);
                  
                          if($s_value!=$new_value && !empty($s_value)){
                            if(file_exists("../$new_value")) unlink("../$new_value");
                  
                            $th_width = $_POST['rszwidth'][$k] ? $_POST['rszwidth'][$k] : $th_width;
                  	  $th_height = $_POST['rszheight'][$k] ? $_POST['rszheight'][$k] : $th_height;
                  	    
                  	  //***
                        	  //Start modification
                  	  $th_size = ($th_width<=$th_height) ? $th_height : $th_width;  
                  
                            $thumb = new easyphpthumbnail;
                  	  $thumb -> Thumbsize = $th_size;
                  	  $thumb -> Thumbheight = $th_size;
                  	  $thumb -> Thumbwidth = $th_size;
                  	  $thumb -> Backgroundcolor = $bg_color;
                            $thumb -> Quality = 100;
                            $thumb -> Thumblocation = "../".$location;
                            $thumb -> Thumbprefix = $prefix;
                            $thumb -> Createthumb("../$s_value","file");
                  
                  	  $s_value = $new_value;
                  	  $prefix = ""; // overwrite temp-thumb
                  
                  	  $thumb -> Thumbheight = $th_height;
                  	  $thumb -> Thumbwidth = $th_width;
                  
                            // Croppring images to exactly math specified dimensions
                  	  $thumb -> Cropimage[0] = 2;
                  	  $thumb -> Cropimage[1] = 1;
                  	  $thumb -> Cropimage[2] = floor($th_width/2); // left from center
                  	  $thumb -> Cropimage[3] = floor($th_width/2); // right from center
                  	  $thumb -> Cropimage[4] = floor($th_height/2); // top from center
                  	  $thumb -> Cropimage[5] = floor($th_height/2); // bottom from center
                  
                  	  if($th_width == $th_height) {
                  	    // settings for squared Thumbnails
                  	    $thumb -> Square = $square;	
                  	  }
                  	  //End modification
                  	  //***
                  
                            if($rcorner)
                              $thumb -> Clipcorner = array(2,$rcorner,0,1,1,1,1);
                            if($watermark){
                              $thumb -> Watermarkpng = $watermark;
                              $thumb -> Watermarktransparency = 60;
                              $thumb -> Watermarkposition = $watermarkPos;
                            }
                            if($copyrighttext)
                              $thumb -> Copyrighttext = $copyrighttext;
                            $thumb -> Quality = $quality;
                            $thumb -> Thumblocation = "../".$location;
                            $thumb -> Thumbprefix = "$prefix";
                            $thumb -> Createthumb("../$s_value","file");
                            
                            $tmplvars[$v][1] = $new_value;
                          }
                        }
                      }
                    }
                  }
                  
                  //?>
                  


                  //edit: This is my working version. I like it like this, so I hope someone can use it too smiley
                  //edit2: I have now changed a bit of the code again to get cropped+resized thumbnails which does always fit exactly the specified dimensions
                    • 26931
                    • 2,314 Posts
                    hey name,

                    thanks for sharing your TVimageResizer tweaks smiley !