Announcement: New plug-in SuperSizer

JeremyBASS · **Posted:** Sat Oct 10, 2009 6:51 pm

What does this tag do?

Creates a resized version of an image on the fly.
Creates a cached version of the image to be served.
It supports any image format supported by the GD library
It supports Subdomain image severing for optimal setup
50 user uploaded images to as many as your server can hold
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' rootUrl="http://media.domain.org/uploads"}
5. {supersizer path=$File height="200" width="200" crop=true filter="SMOOTH,GRAYSCALE,COLORIZE" farg1="50,,60" farg2=",,45" farg3=",,10" farg4=",,0"} <<< HOW TO DO sepia
5. {supersizer path="$LogoSub" width='150' class='LogoImg' alt="$Name" rootUrl="http://media.domain.org/uploads" Quality=55}

What parameters does it take?

• path - Image full pathname eg: uploads/images/test.jpg or $entry->logo_path in Company Directory etc...
• rootUrl (optional) - supersizer creates a temp director in the upload folder. If you move the path to the uplaod to a subdomain you may guide the output with this.
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.visitnorthcentralidaho.org/ and drill down to a company to which you'll see images coming from the subdomain

• cacheBuster (optional) Default: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 ( true/false )
• Protect (optional) Default:true - Don't resize if smaller.. ie: don't size up if true ( true/false )
• Quality (optional) Default:85 - Resize image at set Quality(NOTE: 1-100 ).
• class (optional) - Add a class
• alt (optional) - Add an alt
• id (optional) - Add an id
• title (optional) - Add a title
• style (optional) - Add a inline style

• Sample (optional) Default:true - 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.( true/false )
• stripTag (optional) Default:false - stripTag take a full img tag passed in by the param path="" and makes it usable for SuperSizer ( true/false )

• removeUniqueness (optional) Default:false - Highly discouraged Remove uniqueness of the created file, or in other words keep the old name ( true/false )
• crop (optional) Default:false - 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="true,-50, 0" ( "true,X,Y"/"false" )

• URL (optional) - 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
• noOutPut (optional) Default: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")
• filter (optional) - EX: filter="NEGATE" join them like this filter="NEGATE,GRAYSCALE" Same with the arguments.. look to above for more information

- NEGATE - Reverses all colors of the image.
- GRAYSCALE - Converts the image into grayscale.
- BRIGHTNESS - Changes the brightness of the image. Use farg1 to set the level of brightness. (1-200)
- CONTRAST - Changes the contrast of the image. Use arg1 to set the level of contrast.(-100 - 100)
- COLORIZE - Use farg1 , farg2 and farg3 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
- EDGEDETECT - Uses edge detection to highlight the edges in the image.
- EMBOSS - Embosses the image.
- GAUSSIAN_BLUR - Blurs the image using the Gaussian method.
- SELECTIVE_BLUR - Blurs the image.
- MEAN_REMOVAL - Uses mean removal to achieve a "sketchy" effect.
- 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.
- 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.
- IMAGEHUE - This is different from COLORIZE, it's much more like Photoshop's hue function. Use farg1 , farg2 and farg3 respectively as red , blue , green. The range for each color is 0 to 255.

• farg1 (optional) - First argument for the filters
• farg2 (optional) - Second argument for the filters
• farg3 (optional) - Third argument for the filters
• farg4 (optional) - Fourth argument for the filters
• 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

• Assign (optional) - Assign the output (return the smarty assignment) Use in conjunction with out without URL
• debugIT (optional) Default:false - Get an array of the pre and post images... the original and the resized ( true/false ) This information is required for any support
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

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

Please let me know if there are any error... or even what you think..

Cheers
Jeremy

JeremyBASS · **Posted:** Thu Oct 15, 2009 10:45 pm

Thought I'd say I have added information in the docs area..

http://wiki.cmsmadesimple.org/index.php ... rsizer#FAQ

Cheers
Jeremy

Ziggywigged · **Posted:** Thu Oct 15, 2009 10:50 pm

Cool, I was just looking for something like this.
Gonna give it a go.

JeremyBASS · **Posted:** Fri Oct 16, 2009 6:36 pm

Ziggywigged wrote:

Cool, I was just looking for something like this.
Gonna give it a go.

well let me know if there are any issues... I need this to be super stable... so any feed back would be great...

Cheers
Jeremy

nicmare · **Posted:** Fri Oct 16, 2009 8:03 pm

can i use it together with a lightbox framework in tinymce?
for example i need this markup

i know how to upload a image through tinymce but how to automatically create the syntax once the file was uploaded?

JeremyBASS · **Posted:** Fri Oct 16, 2009 8:12 pm

nicmare wrote:

can i use it together with a lightbox framework in tinymce?
for example i need this markup

yeah sure.. this is what I have tested that out already.... it'd be...

{supersizer path=$onepicture->thumbnail width='128' alt="image"}

nicmare · **Posted:** Mon Oct 19, 2009 9:07 am

good work man! thank you very much.

edit: sorry, just one question left. do you have a nice idea how to insert the supersizer tag with the imagebutton of tinymce? i think its neccessary to modify some corefiles of tinymce. some designers have no idea of smartytags and therefore i need it the easiest way as possible ;-)

. 1. click image button 2. upload file 3. add class "lightbox" 4. submit image to textarea and it automatically inserts the supersize tag with wrapped around. no more additional changes to attributes are neccessary. that would be nice ;-)

applejack · **Joined:** Fri Mar 30, 2007 2:28 am **Posts:** 472

Hi Jeremy

Nice tag. It would be really useful to have an option which would work with a WYSIWYG editor as a client would often prefer to use that for adding content and use the file picker in Tiny MCE. So adding a striptags parameter would be very handy.

i.e. Client enters image so code is My Image

Then if striptags is set to on it just leaves the path and filename.

{content block="My WYSIWYG Image" assign="file"}
{supersizer striptags='1' path="$file"}

or alternatively pipe it

{content block="My WYSIWYG Image"|supersizer striptags='1'}

Daryn · **Posted:** Mon Oct 19, 2009 2:39 pm

Dude, this is really handy. Nice work. I'm adding this to my arsenal for future CMSMS websites. Thanks!

Ziggywigged · **Posted:** Mon Oct 19, 2009 2:47 pm

Jeremy,

Some feedback:

- Doesn't seem to support gifs with transparent backgrounds. Adds a gray background.
- Scaled image is very pixelated and poor quality.

I was hoping that the plug-in actually used the original image as my purpose for using this was to avoid updating multiple sizes of the same images. I have a seating chart that gets updated often.

Hope that helps.

JeremyBASS · **Posted:** Mon Oct 19, 2009 2:57 pm

Ziggywigged wrote:

Jeremy,

Some feedback:

- Doesn't seem to support gifs with transparent backgrounds. Adds a gray background.
- Scaled image is very pixelated and poor quality.

I was hoping that the plug-in actually used the original image as my purpose for using this was to avoid updating multiple sizes of the same images. I have a seating chart that gets updated often.

Hope that helps.

So for the "pixelated and poor quality" you need to set the Quality param... you can go from 1-100 like you would in photoshop. Not sure on the transparent gifs, if it is an issue I'll work on that in the next version, which will address the interlaced jpgs too.

But to note this does use the original image ... or whichever image you set, then it makes a copy of it in the temp folder, and then sized it to the Quality and Size you set. That image is the one that gets severed out.

@applejack, @nicmare
Well I could definitely fit this to have that wyiswyg part, the striping and reformating wouldn't be that hard I don't think but... I think getting it in the wyiswyg would require changes to that mod. IIRC I can't over right that.

@everyone Thanks for the support.. I'll keep refining this a few more times. hope you all enjoy it.

Cheers
Jeremy

applejack · **Joined:** Fri Mar 30, 2007 2:28 am **Posts:** 472

Jeremy

Re The WYSIWG.

I don't mean so you enter your tag in the WYSIWYG editor I mean so that the client can use the WYSIWYG editor to select the image. Your tag would be in the template and for it to work strip away the html code just to leave the filepath and filename in order to send it to supersizer. Presumably a preg_replace would do this.

I am about to try by piping a smarty regex_replace

JeremyBASS · **Posted:** Mon Oct 19, 2009 3:59 pm

well this should work... the pattren may need a tweek (going off the top of my head) but it should be good to go.

{content block="My WYSIWYG Image" assign="file"}
{capture assign=regex}{/capture}
{assign var=file value=$file|regex_replace:$regex:'$1'}
{supersizer path="$file"}

applejack · **Joined:** Fri Mar 30, 2007 2:28 am **Posts:** 472

Thanks Jeremy

My img tag has a /> at the end so this is not being deleted. My grep is very rusty I am afraid, any idea as to what it should be.

JeremyBASS · **Posted:** Mon Oct 19, 2009 5:12 pm

hmmm.. well I'd have to look at this later... I'll get back as soon as I can...

Announcement: New plug-in SuperSizer

Who is online