What does this tag do?

Creates a resized version of an image on the fly.
Full support for gif,jpg, and png. That includes alpha support an interlaced support!!
Creates a cached version of the image to be served.
Supporting Subdomains, Caching, filters and more
For a small slow changing site, to huge user based sites
GAIN FULL CONTROL!!!!

How do I use this tag?

Just insert the tag into your template/page like in one of the examples here:

1. {supersizer path='uploads/images/test.jpg' percentage='25'}

2. {supersizer path='uploads/images/test.jpg' width='320'} (With aspect ratio)

3. {supersizer path='uploads/images/test.jpg' height='240'} (With aspect ratio)

4. {supersizer path='uploads/images/test.jpg' width='150' height='140'} (Aspect ratio depends on given width, height)

5. {supersizer path=$LogoSub width='150' root='http://media.domain.org/uploads"='}

6. {supersizer path=$LogoSub width='150' quality=55 protect=false}

7. {supersizer path=$LogoSub width='150' class='LogoImg' alt="$Name" root="http://media.domain.org/uploads" Quality=55}

8. {supersizer path=$File height="200" width="200" crop='left,top,50' filter="SMOOTH,GRAYSCALE,COLORIZE" arg_1="50,,60" arg_2=",,45" arg_3=",,10" arg_4=",,0"}<<< HOW TO DO sepia

What parameters does it take?

Image Path Params

path - Image full pathname eg: uploads/images/test.jpg or $entry->logo_path in Company Directory etc...
to - use this to tell supersizer to where the final resized image should end up at...
from - When using the to param you need to, instead of using the 'path' param use the from param...
overwrite (optional) Default:false ( true/false ) - Used with the 'path' param, this with overwrite the image in place ie: if you path is /uploads/image.jpg at 500x500 and you set it at 100x100 /uploads/image.jpg would then be the samler size.

     o It is suggested to only use this in udt's to save in processing time since once it's done it there is no need to do it again.

strip_tags (optional) Default:false ( true/false ) - strip_tags take a full img tag passed in by the param path="" and makes it usable for SuperSizer

     o This param will correct a path that has <img src="image.jpg" ... /> to image.jpg that supersizer wants
     Also if you have a module that is outputting 'http://www.domain.tld/image.jpg' this param can be used to set the path correct again to image.jpg that supersizer wants

passthru (optional) Default:false ( true/false ) - Use this param to let supersizer use the original show up in cases where the image was smaller than the image size you told supersizer to set the image at.

Image Output Params

root (optional) - supersizer creates a temp director in the upload folder. If you move the path to use a subdomain you may guide the output with this.

     o Exapmle: you changed $config['uploads_path'] = '/var/www/vhosts/domain.org/httpdocs/uploads';
     to $config['uploads_path'] = '/var/www/vhosts/domain.org/subdomains/media/httpdocs/uploads';
     now the uploads url would not work as it would be 'http://www.domain.org/uploads'
     So it can be changed here to 'http://media.domain.org/uploads' (NOTE: watch your / )
     For an example visit http://www.corbensproducts.com/users/1/67/SuperSizerEx.html#Subdomains and drill down to a company to which you'll see images coming from the subdomain

cachebuster (optional) Default: true ( true/false ) - This is to instantly uncache an image on the client side after a new uploaded photo is SuperSized... ie: Canyon House.-w150-h0-p0.jpg?1255225007
class (optional) - Add a class to the img element
alt (optional) - Add an alt to the img element
id (optional) - Add an id to the img element
title (optional) - Add a title to the img element
style (optional) - Add a inline style to the img element that is ou
width_attr (optional) - You are going to fill the width attribute of the img element with this
height_attr (optional) - You are going to fill the width attribute of the img element with this
fill_attr (optional) Default:false ( true/false ) - this will auto fill the attributes of the img tag IE: <img width='XXpx' height='XXpx' />
url (optional) Default: false ( true/false ) - just sizes and outputs the url. You could use this in and XML output, let's say to make a map icon for CGGoogleMaps thru a CGFeedmaker output of a kml/xml
no_output (optional) Default: false ( true/false ) - just sizes the image. This is good for galleries ( true/false )
prefix (optional) - Add a Prefix to the temp file name
suffix (optional) - Add a Suffix to the temp file name
subdir (optional) - Create Subfolders -- Organize your photos from within the SuperSizerTmp folder ( subdir=$oneuser.id or subdir="foo/bar")
unique (optional) Default: false ( true/false ) - Highly discouraged Remove uniqueness of the created file, or in other words keep the old name.

Image Manipulation and Processing Params

dynamic (optional) Default: false ( true/false ) - Setting this true will make this never cache. Meaning if you set this on a page it'll rebuild everytime.
base64 (optional) Default: false ( true/false/tag/stright ) - Setting outputs a base64 encoded image. Setting to tag will give you something like <img src='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABA' alt='http://www.corbensproducts.com/uploads/SuperSizerTmp/IMG_5127(1).-w200-h700-p0-q55-FSMOOTH-50----S1-cbase64-3-.jpg?1295906125'/> .. just seting to stright will just output the sized image as base64. Setting to true will out put the encoded image with the data:image/jpeg;base64, (or gif or png) where stright outputs just the encoded image. To see an example go to http://www.corbensproducts.com/blog/experimental/supersizer/base64-supersizer.html

percentage (optional) - Resize image in percent of original eg. 50%.
width (optional) - Resize image on width and height will resize accordingly to keep aspect ratio
height (optional) - Resize image on height and width will resize accordingly to keep aspect ratio

     o Note: height and width (optional) Important: You may use width in conjunction with height in order to resize image to an absolute size of your control. Aspect ratio is then, dependent on the values you use. If no parameters for resizing are passed(except for the path) then a resizing with a percentage value of 25% is performed by default

protect (optional) Default: true ( true/false ) - Don't resize if smaller.. ie: don't size up if true
quality (optional) Default:85 ( 1-100 ) - Resize image at set Quality.
sample (optional) Default: true ( true/false ) - Set false to choose a low quality resize which can be much fast in the processing time. Remember the image is only resized once and then cached so this is only needed for sites with ultra high turnover on the resized images.
crop (optional) Default: false ( "true"/"left,top"/"left,top,100" ) - A must if you set height and width or use a percentage This will center the image and crop from edge in. Don't like that? Use the X and Y arguments to offset, but the pxs are in relation to the original size image, if you need to make that dynamic use smarty magic. Example: to move to the left of center crop="horizontal,vertical,scale" ( "left,top,100"/"false" ) see some test here http://www.corbensproducts.com/users/1/67/SuperSizerEx.html#crop

     o crop="left,top"
     o crop="right,top"
     o crop="center,top"
     o crop="left,bottom"
     o crop="right,bottom"
     o crop="center,bottom"
     o crop="center,center"
     o crop="left,center"
     o crop="right,center"
       Note: the scale is in a percentage ie: 100 is 100% , 50 is %50 and 300 is 300%

fit (optional) Default: false ( true/false/"hard" ) - Set this to hard and you will get a background color (black if the param fill is not set). Setting to just true will remove the black bars when the aspect ratio of the orinigal and the new size don't match (which is most of the time.)
fill (optional) Default: false ("255,255,255"/"#FFFFFF"/"#FFF") - use fill="r,g,b" ie:fill="255,255,255" Set this to the color of the background image when resized. You can use this to force a png with an alpha to have a background color. What color values can you use? rbg and hex and short hand hex.

filter (optional) - EX: filter="NEGATE" join them like this filter="NEGATE,GRAYSCALE" Same with the arguments.. look to above for more information

o NEGATE - Reverses all colors of the image.
o GRAYSCALE - Converts the image into grayscale.
o BRIGHTNESS (1-200) - Changes the brightness of the image. Use arg_1 to set the level of brightness.
o CONTRAST - Changes the contrast of the image. Use arg_1 to set the level of contrast.(-100 - 100)
o COLORIZE - Use arg_1 , arg_2 and arg_3 in the form of red , blue , green and farg4 for the alpha channel. The range for each color is 0 to 255. Alpha channel, A value between 0 and 127. 0 indicates completely opaque while 127 indicates completely transparent
o EDGEDETECT - Uses edge detection to highlight the edges in the image.
o EMBOSS - Embosses the image.
o GAUSSIAN_BLUR - Blurs the image using the Gaussian method.
o SELECTIVE_BLUR - Blurs the image.
o MEAN_REMOVAL - Uses mean removal to achieve a "sketchy" effect.
o SMOOTH - Makes the image smoother. Use farg1 to set the level of smoothness(1 - 100) 1 is full weight of the smoothing where 100 you'd notice almost nothing.
o PIXELATE - Applies pixelation effect to the image, use farg1 to set the block size in pixels and farg2 whether to use advanced pixelation effect or not (defaults to FALSE), to set the pixelation effect mode.
o IMAGEHUE - This is different from COLORIZE, it's much more like Photoshop's hue function. Use arg_1 , arg_2 and arg_3 respectively as red , blue , green. The range for each color is 0 to 255.
ex: filter="IMAGEHUE" arg_1='75' arg_2='100' arg_3='275'
NOTE: There is an alternative to an rgb.. Use just one argument to control the hue via the color angle. This means the angle range is 360 so 0-359 as 360 is eq to 0
ex: filter="IMAGEHUE" arg_1='75'

Find filter examples here: http://www.corbensproducts.com/users/1/67/SuperSizerEx.html#Filters

arg_1 (optional) - First argument for the filters
arg_2 (optional) - Second argument for the filters
arg_3 (optional) - Third argument for the filters
arg_4 (optional) - Fourth argument for the filters
assign (optional) - Assign the output (return the smarty assignment) Use in conjunction with out without URL

Debugging Params

errors (optional) Default: true ( true/false ) - outputs the errors, if you know there may be some errors for whatever reason you can turn of the error output
debug (optional) Default: false ( true/false ) - Get an array of the pre and post images... the original and the resized. This information is required for any support. NOTE: This will bypass the cache and rebuild the image everytime to save you a set when debugging

NOTE: 5.3.0 Pixelation support (PIXELATE) was added. 5.2.5 Alpha support for COLORIZE was added.

FAQ

Q: I need to delete that photo, but it has the same name.

A: Go to the filemanager and look for SuperSizerTmp folder. You can delete that one file out... or if you need to just delete the folder. It will rebuild its self.

Q: I what to use it in a UDT

A: Easy.. just add

include 'plugins/function.supersizer.php';

and fill out some of the params

$params[]=array();

$params['path']='uploads/images/'.$thumbnail_path;

$params['height']='125';

$params['Quality']=22;

$params['alt']=$picture_name;

echo smarty_cms_function_supersizer($params,$smarty);

now it's outputting...

Q: I have everything set right (paths and all) but I'm not getting the jpeg to show and it's not in the temp folder (uploads/SuperSizerTmp), and I see no errors.

A: There are a few reasons why this will happen. One is that the jpeg is a interlaced image... save the file as a non-interlaced file. Another common one is that the jpeg name has invalid url characters.

The best thing to do is to resave your image/ rename your image, then upload again.

Q: Why is there no Admin area?

A: This plug-in is designed so that you don't need one. The goal here is to not limit the amount of usage in the site of the plug-in. After all if you have -- 250 users-OR-event X 3 folders(lg/med/small) X 20 photos is 10k... and that is a young 1-2yo small active site's needs. So now your admin is the output and your setup is in the template with everything else.

Q: I'm getting this error and things are all messed up. (Fatal error: Allowed memory size of 67108864 bytes exhausted (tried to allocate 15488 bytes) in /var/www/vhosts/domain.org/httpdocs/plugins/function.supersizer.php on line 184)

A: Your image was too big. First you/ your client shouldn't be uploading a image that big... save yourself the money and do it locally. Ok, ok, what's the fix? Well just set your php memory limit higher. In this example the limit was 64mb and needed to go up to 128mb for the burst needed in the first render of the image. Note: it is wiser to set that high of limit to just the plugins/ folder or more to the point only in places needing that.

EXAMPLE

EXAMPLE 1 Subdir is good for FEU if you plan on have many users that have many photos... 10K users with 5 photos would be alot to manage if you do and approval on them.(TIP: FEU has an error with the thumb size were if set to 0 you can't upload... so set it high till it's fixed) From CGUserdirectory of FEU

Code: {* properties *}

   {foreach from=$oneuser.properties item='onepropvalue' key='propname'}
   
   <div class="row" style="margin: 0.5em;">
   
       <div style="width: 49%; float: left;">{$properties.$propname.prompt}:</div>
       
       <div style="width: 49%; float: left;">
       
           {if $properties.$propname.type == 6}
           
               {* image <img src="{$file_location}/{$onepropvalue}" width="100"/>*}
               
               {*test of the stripTag*}
               
               {assign var=1 value='<img class="test of things" src="uploads/feusers/'}
               
               {assign var=2 value='" width="100" alt=""/>'}
               
               {supersizer path="$1$onepropvalue$2" width="100" alt="" Subdir=$oneuser.id stripTags="true"}
               
               {*normal use is path="uploads/feusers/$onepropvalue" as {$file_location} includes the domain and schema*}
           
           {else}
           
           	{$onepropvalue}
           
           {/if}
       
       </div>
   
   </div>
   
   {/foreach}

.htaccess enhancements

try this to get your image cached by the browsers correcly.

           ##############################################
           #           HEADERS and CACHING              #
           ##############################################
           #### CMSMS Header Expires ####
           
           # for fonts on your page
           AddType application/octet-stream .ics
           AddType application/octet-stream .vcf
           AddType text/x-component .htc 
           Addtype font/opentype .otf  
           Addtype font/eot .eot  
           Addtype font/truetype .ttf  
           Addtype font/woff .woff
           
           #to set the right deflates to the right files
           AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript application/javascript text/text text/x-component font/opentype font/truetype font/eot  font/woff
           
           # CMSMS Safari gzip fix - when safari doesn't understand (PS3 is the same)
           # AddEncoding gzip .gz
           # RewriteCond %{HTTP:Accept-encoding} gzip
           # RewriteCond %{HTTP_USER_AGENT} !Safari|!playstation\ 3 [NC]
           # RewriteCond %{REQUEST_FILENAME}.gz -f
           # RewriteRule ^(.*)$ $1.gz [QSA,L]
           
           # remove files and copy to set different dates for different files.  This is what I use ;)
           <FilesMatch "\.(ico|gif|jpg|jpeg|png|flv|pdf|mp3|wav|js|css|kml|xml|woff|eot|ics|vcf|htc|otf|ttf)$">
           FileETag None
           <IfModule mod_headers.c>
           Header unset ETag
           Header unset Last-Modified
           Header set Expires "Fri, 21 Dec 2022 00:00:00 GMT"
           Header set Cache-Control "public, no-transform"
           Header set Cache-Control "max-age=7257600"
           </IfModule>
           </FilesMatch>
           
           # CMSMS block unwanted HTTP_REFERER
           # RewriteCond %{HTTP_REFERER} !^$
           # RewriteCond %{HTTP_REFERER} !^https://(www\.)?digitalbarn.tv/.*$ [NC]
           # RewriteRule \.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$ /feed/ [R=302,L]

User Handbook/Admin Panel/Tags/supersizer

User Handbook/Admin Panel/Tags/supersizer

Contents

What does this tag do?

How do I use this tag?

What parameters does it take?

FAQ

EXAMPLE

.htaccess enhancements

User Handbook/Admin Panel/Tags/supersizer

From CMSMS