page

How to process images with Extenso

VERSIONlatest How to resize the image after uploading

imageProcessor

NAME

imageProcessor - resize the image after uploading.

DESCRIPTION

This script will process images at page load then cache it, instead of when you upload it in the cms.
This way, it's easier to change the wanted image size AFTER uploading all your images,
and also easier to make more than one size for a single image, to be shown at different places in the front-end.

DEPENDENCIES

PHP 5.3 with the GD extension enabled, Apache with rewrite module enabled and AllowOverride All.

USAGE

<img src="/original_image_path.jpg?params" />

PARAMS

  • type = string (jpg|png|gif)  will keep original if none given
  • quality = (0-100)  default 80 (only for jpeg)
  • maxw = integer (set maximum width without changing original image ratio)
  • maxh = integer (set maximum height without changing original image ratio)
  • minw = integer (set minimum width without changing original image ratio)
  • minh = integer (set minimum height without changing original image ratio)
  • size = string "640x480" (Set the exact new image size. Use with crop or margins, otherwise the image might be distorted)
  • w = integer (set specific width, automatic height... If given, will override size param)
  • h = integer (set specific height, automatic width... If given, will override w and size params)
  • crop = string or no value
  • margins = string or no value
    • For crop and margins, No need for a value... True if param is present, otherwise defaults to False
    • String can be given for the cropped/margins region with the following possibilities : top, left, right, topleft, topright, bottom, bottomleft, bottomright
    • You can also give specific align position x,y relative to the final output size
    • if no region is defined, image will be centered
  • bgcolor = string "255,255,255" RGB color (default is transparent for png otherwise white) (used as margin colors when resizing with margins)
  • nocache (if this param is set, it will not save the file but instead it will output if directly, processing it everytime... FOR DEBUGGING PURPOSES ONLY)

Any additional param will still be used in the resulting image name so it is possible (although not recommended) to prevent caching by adding a timestamp value. 
 * If none of the params listed above are used, the original image will be returned directly without any processing. 
 * If size param is given, the min/max params are completely ignored (maxw, maxh, minw, minh)
 * If crop param is given, margins param is ignored

EXAMPLES

<img src="/images/logo.png?size=200x200&margins&bgcolor=0,0,0&quality=80&type=jpg" />

The above example will resize an image to exactly 200x200, adding black margins around the image if necessary to prevent image distortion, and converting to JPEG with a quality of 80.

<img src="/images/logo.png?size=200x200&crop=topright" />

The above example will resize an image to exactly 200x200, cropping either the top or the right side if necessary to prevent image distortion, keeping the bottom left corner always visible.

<img src="/images/logo.png?maxh=80" />

The above example will simply make sure that the resulting image has a height of 80 pixels of less. If the input image is more than 80px of height, it will shrink it down to 80 pixels of height, also shrinking the width, keeping the original ratio.

STEPS

  • COPY the file imageprocessor.sn in the staging directory
  • COPY this code in the .htaccess file of the ressources directory not the one in the staging !
    RewriteEngine On
    # ImageProcessor
    RewriteCond %{QUERY_STRING} .
    RewriteCond %{REQUEST_FILENAME}&%{QUERY_STRING} -s
    RewriteCond %{REQUEST_FILENAME}&%{QUERY_STRING} -f
    RewriteRule ^.*$ %{REQUEST_FILENAME}\%26%{QUERY_STRING} [NC,L]
    RewriteCond %{QUERY_STRING} .
    RewriteCond %{REQUEST_FILENAME}?%{QUERY_STRING} -s
    RewriteCond %{REQUEST_FILENAME}?%{QUERY_STRING} -f
    RewriteRule ^.*$ %{REQUEST_FILENAME}\%3F%{QUERY_STRING} [NC,L]
    RewriteCond %{QUERY_STRING} .
    RewriteCond %{REQUEST_FILENAME} -s
    RewriteCond %{REQUEST_FILENAME} -f
    RewriteCond %{REQUEST_FILENAME} \.(jpg|JPG|jpeg|JPEG|png|PNG|gif|GIF)$
    RewriteRule ^.*$ /imageprocessor.sn [NC,L,QSA]
  • ASK the admin to make changes serveur side
  • ADD the code with the parameters you need
  • TEST it

 

AUTHOR

Written by Olivier Saint-Laurent, <olivier@sednove.com>

VERSION

1.0 2016-05-19 pascale@sednove.com