Announcement: New plug-in SuperSizer

[JeremyBASS]

what's that path .. if it has the domain... http://www.domain.com that could be it.. I don't remeber if I got to that function... if it is just do a replace....


{assign var=artist value=$items[numloop].image|"http://www.domain.com":""}
{assign var=TheTitle value=$items[numloop].title}
{supersizer path="$artist"  alt="$TheTitle" width="100px" Quality="100"}

[mfal55]

Hi Jeremy - That didn't do the job either... and I can answer your q about the path, but I just realized something bigger.  When I originally wrote you, it was in regards to that post about getting the Cataloger images to cache in order to load in quicker. In your reply, you had suggested using the supersizer plugin which I immediately thought was the trick.  BUT (stupid me to not realize this until now), the Cataloger module has a built in resizer which I'm already making use of... so it's not the resizer I need, I just need the images to cache or *something* to make them load in quicker.  I feel a bit like a fool for it to not click in my head sooner - I've been trying to figure out something that is already built in to the module and not actually the problem.  I'm sorry to waste your time in this matter.  Many many thanks for your help though - you are very helpful and polite and I very much appreciate it.

[JeremyBASS]

Well that is why I suggested useing supersixer.. it caches and resizes... I'll have to try it out and see why... can't do it tonight be I can tomorrow night.. if that helps...

[mfal55]

Aaahh, I see.... ok, only if/when you have time and if it could help you/others out too.  Thanks again - you're the best.

[JeremyBASS]

I have an Idea... I'm going to put ever example in this one post here... so Mod by Mod, need by need...

Company Directory

Detail Template

Code: Select all

{if $entry->picture_location ne ''}
<!-- <img src="{$entry->logo_path}" style="width:200px;height:auto;" alt="" /> --> 

{supersizer path=$entry->picture_path alt="" width="250px" Quality="100" Subdir=$entry->id class="DetailImg" }

{/if}

MORE TO COME so check back...

[JeremyBASS]

New version is out...

SuperSizer
Package: RC0.x
Version: RC0.5

which

• Fixed the gif transparency on resize
• Fixed the png transparency on resize

I think this is close to being fully as far as I will take it... before a 1.0 release... thou I have a few more niffty ideas to put in there...

Cheers
Jeremy

[JeremyBASS]

So in a post before, I showed how to use this plug-in to make a fast gallery.  Well I had to do it this morning and thought "Well heck, I may as well use it as an example".  So here we go...  :D

Custom simple jquery "lightbox" Gallery

First Example



http://www.steelheadderby.com/on-the-wa ... inish.html

It's just this...

Code: Select all

{assign var=Files value="uploads/fishupdates/random/*.JPG"|glob}

{foreach from=$Files item='File'}
{supersizer path=$File width="600" Subdir="fishGal" URL=true Assign="MainPic" Protect =false}
{supersizer path=$File width="200" Subdir="fishGal" URL=true Assign="MinnyPic"}
<a href="{$MainPic}" rel="colorboxGal"><img src="{$MinnyPic}" alt="" /></a>
{/foreach}

Next Example
(on the right click it same gal in just one)  
http://www.steelheadderby.com/on-the-water.html


Almost the same thing...

Code: Select all

{assign var=Files value="uploads/fishupdates/random/*.JPG"|glob}
{foreach from=$Files item='File' name="" name=foo}
{supersizer path=$File width="600" Subdir="fishGal" URL=true Assign="MainPic" Protect =false}
{supersizer path=$File width="200" Subdir="fishGal" URL=true Assign="MinnyPic"}
<a href="{$MainPic}" rel="colorboxGal" {if $smarty.foreach.foo.first}{else}style="display:none;"{/if}><img src="{$MinnyPic}" alt="" /></a>
{/foreach}

More to come as I go...
Cheers
Jeremy

[fredp]

New version is out...

SuperSizer
Package: RC0.x
Version: RC0.5
...

Hi Jeremy,

Your supersizer plugin looks like it might be pretty handy!   

One thing, it seems that a cached image is not updated after you modify the correspoding original image file.  What do you think about regenerating the cached image when its last modified time is less than that of the original image file?  For example:

Code: Select all

440c440,443
< 			}
---
> 		}
> 		elseif (filemtime($filename) < filemtime($path)){
> 				unlink ($filename);
> 		}

Thanks for the plugin!

[JeremyBASS]

Yeah that is planed... it's just a put this fire out then that one.  But for sure it has a cache control planed... plus I'm thinking a very basic back end may be good... Thanks for trying it out.. Cheers --Jeremy

[JeremyBASS]

New version is out...

SuperSizer
Package: RC0.x
Version: RC0.6

• added param cacheBuster what it does is break the client side caching when you change a file. (think about ySlow or read some here )

• Added a routine to overwrite old files with the new uploaded ones

• Added a "Clear the Cache" button in the help area

Also some examples of it in action...

http://www.corbensproducts.com/users/1/ ... zerEx.html
http://www.corbensproducts.com/blog/exp ... ample.html

[darconny]

Hi Jeremy  :)

First, I want to thank you for this great plug-in.. really rocks! Something like this lacked from this great system, IMHO.

So, I'm testing Supersizer along with CGBlog module, you can take a look at the main thread I started:
http://forum.cmsmadesimple.org/index.ph ... 356.0.html
...hopefully you'll know some other issues related to CGBlog

I'm sticking here to Supersizer usage and testing, have some questions and thoughts.  
Basically, I used images (defined several file type fields) uploaded from frontend (cgblog fesubmit action), and assigned them to blogs article along with text.

So, I modified the Summary and Details Templates like this (showing just relevant part of a code):

Summary Template
{if isset($entry->fields)}
 {foreach from=$entry->fields item='field'}
   
       {if $field->type == 'file'}
          {if $field->name == 'image1'}  
          {* image1 is the field name of first image uploaded, as I want to show only one thumbnail on Summary page *}  
            {assign var=Photo value=$field->value}
            {assign var=Location value=$entry->file_location}
            detail_url alt="{$entry->title}">
                {supersizer path="$Location/$Photo" width='80' Quality="100"}
           
          {/if}
     {else}
         {$field->name}: {eval var=$field->value}
     {/if}
   
 {/foreach}
{/if}

Detail Template
{if isset($entry->fields)}
 {foreach from=$entry->fields item='field'}
   
     {if $field->type == 'file'}
        {assign var=Photo value=$field->value}
        {assign var=Location value=$entry->file_location}
        {supersizer path="$Location/$Photo" height="450" URL=true Assign="MainPic" Protect =false Quality="100"}
        {supersizer path="$Location/$Photo" height="80" URL=true Assign="MinnyPic" Quality="100"}
       
     {else}
         {$field->name}: {eval var=$field->value}
     {/if}
   
 {/foreach}
{/if}

This code works, but I get an error on both summary and detail pages:
'Warning: filemtime() [function.filemtime]: stat failed for http://localhost/cms-1.6.6/uploads/cgbl ... G_5094.JPG in C:\xampp\htdocs\cms-1.6.6\plugins\function.supersizer.php on line 469'

When I comment that elseif (from line 469) statement:
  elseif(filemtime($filename) < filemtime($path)){
                  unlink ($filename);    }
I get no errors at all, works perfectly. It's just that I'm not a developer and don't like to modify core php files.. let me know what you think, any side effects etc..

Regarding quality
It seems that the parameter Quality doesn't work for me. When I change this, I get the same result. So, Quality=1 is equal to Quality=100. I tried to remove all the files from SupersizerTmp folder, and to change Quality parameter, but no luck. The images are of the same quality and file size (in byte). When I set the thumbnail to 80px width I get pixelated image of not such a good quality (see attached image). For larger images I'm opening on Details page with lightbox, Supersizer works great.  

Regarding aspect ratio
When site visitors upload their images through frontend, there will be images with different aspect ratios - both landscape and portrait formats. So now I think how to set dimensions for thumbnails, to look nice. Ideally, all the thumbs should be of the same square size, but I think this is not possible without stretching the image, right? I'm aware that this could be hard to achieve, as it would involve resize and crop ... just asking.

I'm using all latest versions, developing @ localhost.

That's it at the moment, and sorry for this long post.

Thank you very much,
Darko

[fredp]

...
            {assign var=Photo value=$field->value}
            {assign var=Location value=$entry->file_location}
            detail_url alt="{$entry->title}">
                {supersizer path="$Location/$Photo" width='80' Quality="100"}
...
This code works, but I get an error on both summary and detail pages:
'Warning: filemtime() [function.filemtime]: stat failed for http://localhost/cms-1.6.6/uploads/cgbl ... G_5094.JPG in C:\xampp\htdocs\cms-1.6.6\plugins\function.supersizer.php on line 469'

When I comment that elseif (from line 469) statement:
  elseif(filemtime($filename) < filemtime($path)){
                  unlink ($filename);    }
I get no errors at all, works perfectly. It's just that I'm not a developer and don't like to modify core php files.. let me know what you think, any side effects etc..
...

Hi,

I think I see a problem.  It seems you're passing a URL value as the path argument.  Someone correct me if I was wrong, but I had assumed, when I suggested the above filemtime() mod, that the path argument value would indeed be a file pathname.  So, you might try passing the file's pathname instead of a URL. 

Hope this helps,
Fred P.

[darconny]

Hi Fred,

Thanks, I'm sure that you are right about this. But I don't know how to pass a file pathname in my case, because files will come from front end (CGBlog), uploaded by visitors. If you have an idea what could be a file pathname here please let me know.

Regards,
Darko

[JeremyBASS]

Hello, I'll check the code for errors.. so for the path issue try using

{assign var=Location value=$entry->file_location|replace:"http://localhost/cms-1.6.6":""}


That will should fix it... I think I really need to take care of this automatically... I'll add it in the next version to clean it up.

on "Regarding quality"... hmm not sure try the first fix, clear the cache from the admin side and report back if you can... The thing is the tests work out and it's usage on 8 site I have it on all show the same results...
example

http://www.corbensproducts.com/users/1/ ... zerEx.html

they are made with {supersizer path="uploads/feusers/$onepropvalue" width="100" alt="" Subdir=$oneuser.id}  (which is the defualt of 85%)

May-be a blur param is needed.


on

Regarding aspect ratio
When site visitors upload their images through frontend, there will be images with different aspect ratios - both landscape and portrait formats. So now I think how to set dimensions for thumbnails, to look nice. Ideally, all the thumbs should be of the same square size, but I think this is not possible without stretching the image, right? I'm aware that this could be hard to achieve, as it would involve resize and crop ... just asking.

Yeah only a crop function would need to be added... I'll see what I can do. I'm going to work on this a little tonight...  So let’s see if we can get all these items taken care of, well not the crop option just yet.

Cheers
Jeremy

[JeremyBASS]

ok... New version is out...

SuperSizer
Package: RC0.x
Version: RC0.7

• added Smooth (ATM jpg only)  0.0-10.0
example:{supersizer path="uploads/feusers/$onepropvalue" width="100" alt="" Subdir=$oneuser.id cacheBuster=true Quality=100 Smooth=0.5}

Bugfix to the Quality param


Note that the value on smooth 0 is the equal to a ~1x1 pixel average where a 5 is close to ~6x6 average... this is just an guess as I have not fond much doc on this...

so now you can smooth the image... the end will be this... you can change you image in these ways (smooth is the first):

■IMG_FILTER_NEGATE: Reverses all colors of the image.
■IMG_FILTER_GRAYSCALE: Converts the image into grayscale.
■IMG_FILTER_BRIGHTNESS: Changes the brightness of the image. Use arg1 to set the level of brightness.
■IMG_FILTER_CONTRAST: Changes the contrast of the image. Use arg1 to set the level of contrast.
■IMG_FILTER_COLORIZE: Like IMG_FILTER_GRAYSCALE, except you can specify the color. Use arg1 , arg2 and arg3 in the form of red , blue , green and arg4 for the alpha channel. The range for each color is 0 to 255.
■IMG_FILTER_EDGEDETECT: Uses edge detection to highlight the edges in the image.
■IMG_FILTER_EMBOSS: Embosses the image.
■IMG_FILTER_GAUSSIAN_BLUR: Blurs the image using the Gaussian method.
■IMG_FILTER_SELECTIVE_BLUR: Blurs the image.
■IMG_FILTER_MEAN_REMOVAL: Uses mean removal to achieve a "sketchy" effect.
■IMG_FILTER_SMOOTH: Makes the image smoother. Use arg1 to set the level of smoothness.
■IMG_FILTER_PIXELATE: Applies pixelation effect to the image, use arg1 to set the block size and arg2 to set the pixelation effect mode.