Announcement: New plug-in SuperSizer

[kendo451]

Well, we are dealing with the practical reality that you don't know the dimensions of the image that will be uploaded by the website user, so you can't specify the dimensions in a stylesheet.  Principles are great, but they have to be put into practice in the real world.

If you don't use the image width and height attributes you get major browser jump when the image finally loads and the page re-arranges.  The bigger the image the more jarring the experience.

Here is a way to store that information:

Instead of just using a random filename for the cached images, you could encode the dimensions in the image name.  This way you do not have to do an imagesize() call each time.

You still have to parse the filename, though.

Ken

[JeremyBASS]

Yes I have thought on that.. Since I'm pushing out 3-5 sites a week that don't need to have the attributes, and I cache and load my dom in ways that help avoid jumping pages, I don’t need the param or I would have added it  right quick.  I have taken suggestions on this topic which is why I made that param I will mostly likely never use, much like the remove uniqueness param, but since I see no way to have a 0 gain on the image size I think we are at the end of this rope.  I don't think one param is going to be that hard to add... fillHW=true is not much to ask people to do.  If they want to take the hit in the processing time(even thou it’s low) they can but I'm not going to force people to use it, mostly since I don't want to be forced into using it.

At this point unless anyone else has a near 0 overhead solution this ... fillHW=true will remain ...

I am going to still wait to see if anyone else has any other items they wish to see.  Cheers -Jeremy


Edit***** I just polled my co-workers who use this a lot, they also wish not to have to add fillHW=false all the time so I think this is a final decision here

[NikNak]

Hi Jeremy

I'm having a small spot of bother with Supersizer when an image is smaller than the scaling parameters.

Protect=true I believe is supposed to prevent the image being scaled up, but shouldn't the output be simply the original file?

What I am getting is a url for a resized image but that file doesnt actually exist.  "/uploads/SuperSizerTmp/roobarb.-w325-h0-p0-F-S1.jpg" See below.

Many thanks and I think the plugin is great.

SuperSizer Object ( [strOriginalImagePath] => /uploads/news/id15/roobarb.jpg [strResizedImagePath] => /uploads/SuperSizerTmp/roobarb.-w325-h0-p0-F-S1.jpg [arrOriginalDetails] => Array ( [0] => 134 [1] => 100 [2] => 2 [3] => width="134" height="100" [bits] => 8 [channels] => 3 [mime] => image/jpeg ) [arrResizedDetails] => Array ( [0] => 134 [1] => 100 [2] => 2 [3] => width="134" height="100" [bits] => 8 [channels] => 3 [mime] => image/jpeg ) [resOriginalImage] => Resource id #263 [resResizedImage] => [errors] => [boolProtect] => 1 )
Original Image

Array
(
    [0] => 134
    [1] => 100
    [2] => 2
    [3] => width="134" height="100"
    [bits] => 8
    [channels] => 3
    [mime] => image/jpeg
)
Resized Image

Array
(
    [0] => 134
    [1] => 100
    [2] => 2
    [3] => width="134" height="100"
    [bits] => 8
    [channels] => 3
    [mime] => image/jpeg
)

[JeremyBASS]

you need to set the passThru to be true... add passThru=true and you will see the ogrinal... Cheers -Jeremy

[NikNak]

Thanks very much Jeremy

Can I ask though, if Protect=true is set, shouldn't PassThru=true be necessary in all cases - as without it, the output from supersizer cannot be used. Just a thought, that maybe it could be automatic?

Kind regards

Nik

[JeremyBASS]

Thanks very much Jeremy

Can I ask though, if Protect=true is set, shouldn't PassThru=true be necessary in all cases - as without it, the output from supersizer cannot be used. Just a thought, that maybe it could be automatic?

Kind regards

Nik

Well I did think and ask around on this before but this is what I ended on, since SuperSizer can be used in many ways, forcing people to turn off options verse turning them on is not better.  See I use supersize for all e-com and user sites.. More so in the e-com, we want to force the client to not upload tiny images... so what we do is have a default image that replace that image if it was hit by that protect param, so in all those sites I would have had to set PassThru=false.

Since it'd be a point of contention of whether or not to have it turned on I go back to the base of .. if it's an option, then I go with the option that does the least and let you guys build it up the way you wish, not force you to turn things off.

This was voted on already and it come to having the defaults Protect=true and PassThru=false which is the base.  I designed this for co-workers and myself and it is set up atm to what we all need and want out of it.  But I do poll people on this stuff so never know, the vote may change.  Cheers -Jeremy

[kendo451]

Hey Jeremy,
I just wanted to thank you for sharing this awesome plugin.  It's obvious you have put a lot of work into it, and it really is extremely useful to all of us whom you've shared it with for free.
Take care,
Ken

[JeremyBASS]

Hey Jeremy,
I just wanted to thank you for sharing this awesome plugin.  It's obvious you have put a lot of work into it, and it really is extremely useful to all of us whom you've shared it with for free.
Take care,
Ken

Thank you.. it's nice to hear that once in a while.. Cheers -Jeremy

[louisk]

Great, great, great plugin! 
Perfect for creating my blog thumbnails. I've tried more than one scripts but this one works the best!

A question:
Could I set this plugin up to resize all images in a blog post so they are no bigger then the width of my blog post?
So, somehow use tags pairs ore something to get all img src's and add a max width of 500px for example.

[JeremyBASS]

I'm not quite sure what you are asking, but with images and SuperSizer its 99% yes you can.  If you can describe the what’s, I'll be happy to help.  Cheers -Jeremy

[louisk]

Hi Jeremy,
I have a blog and some times add some pictures to my posts via the wysiwyg.
Some times I add, lets say, a screen shot that is 1000px wide. But my blog column is only 600px wide.
How could I use SuperSizer to find all images in a blog post and scale them down to max 600px?
The expression engine CMS works with tag pairs to do this. For example:
{supersizer maxwidth=600px}
 
{/supersizer}
You understand what I'm trying to do?

[JeremyBASS]

oh.. from tinyMCE right out this is not yet supported directly.. if you do use it and you the max width effect it's like this...

{supersizer path="/uploads/whicheverImage.png" width='600' passThru=true}

That gives you the maxwidth of 600px but doesn't touch the smaller one but does show them.  The only way I think tinyMCE could support it directly and consistently is to put SuperSizer as a part of the core.  Hope this helps Cheers -Jeremy

[kendo451]

I'm trying to figure out how to make this crop to the top left - so it fits the top left part of the picture in the top left corner of the image.

{supersizer path='...' crop='true,0,0' width='600'} seems to crop around the center of the image. 

Are the x and y percentage or pixels?

[JeremyBASS]

The crop (this may need more work now that I think of it) is based on the original image from the center of the image.. it will not (shouldn't) go passed the edge.. The numbers are pixels.. hope this helps..

This will most likely be have one more pass at the crop before the main stable release. -J

[JeremyBASS]

Same renames of the params to be more in line with cmsms.. also a new one.  plz test if you can and let me know.. Cheers -Jeremy

from  ->  to


Sample - >  sample      (defalut is true)
showErrors ->  errors      (defalut is true)
removeUniqueness  ->  unique      (defalut is true)
rootUrl -> root      (defalut is '')
URL -> url      (defalut is '')
debugIT  -> debug      (defalut is false)
noOutPut -> no_output      (defalut is false)
Prefix  ->  prefix      (defalut is '')
Suffix  ->  suffix      (defalut is '')
Subdir  ->  subdir      (defalut is '')
stripTags  ->  strip_tags      (defalut is false)
Assign -> assign      (defalut is '')
tagWidth -> width_attr      (defalut is '')
tagHeight -> height_attr      (defalut is '')
Quality -> quality      (defalut is 85)
passThru -> passthru      (defalut is false)
Protect -> protect      (defalut is true)
cacheBuster -> cachebuster      (defalut is true)
farg1 -> arg_1      (defalut is '')
farg2 -> arg_2      (defalut is '')
farg3 -> arg_3      (defalut is '')
farg4 -> arg_4      (defalut is '')
fillHW -> fill_attr      (defalut is false)



New

fit      (defalut is false) it's an auto max width or heigth routine that uses the width and height that you set this replace the need for this logic demonstrighted here http://forum.cmsmadesimple.org/index.ph ... 87895  Note this doesn't work with percentage.