Announcement: New plug-in SuperSizer

[NikNak]

@cerulean means (I think) that he would like the user to be able to add images into the wysiwyg area using the built in TinyMCE functions, scale them within the editor (just changing the dimensions), and then to have some way to use supersizer on the final processed output, taking the dimensions of the image in the html and resizing accordingly.  Sounds like a nice wish, but I imagine it wouldn't be simple to achieve.

This is precisely the reason I hide all image tools from the Wysiwyg editor, as 95% of the time the user will not resize the images first, and will rely on browser scaling - and a web page with a 4mb thumbnail image can load real slow!.

Anyhow - I saw a really good implementation of something similar to what @cerulean means in Silverstripe - where any image that is scaled in the wysiwyg editor, is automatically resized using ajax, even prior to saving the content. I wasn't expecting that!

Kind regards

Nik

[kendo451]

Instead of using AJAX, you can write a UDT and attach it to a new content event.

In the example UDT's there is an example that takes the content and adds a table of contents.  You could do something like that, I think.

[Cerulean]

NikNak, you're right, that's what I was meaning - I haven't used SilverStripe, but CushyCMS is another that does genuine resizing directly from the WYSIWYG. However, now that I have worked out how to activate the "on-the-fly resizing" option for TinyMCE users can easily resize their images as they upload them, so that problem is solved.

I'm still think my second suggestion would be very beneficial to many CMSMS users, and this would require writing a UDT as kendo451 mentions above. I just don't know how to do it

The way I can imagine the system working is...

1. Class rules (empty) are created in the stylesheet (e.g. "full-width-image", "square-greyscale-image")
2. The user inserts an image in TinyMCE and applies a class to it from the Style dropdown. They don't have to remember any other settings or dimensions.
3. When the user clicks submit or apply, a UDT attached to the event reads through the output of TinyMCE and replaces with {supersizer path='uploads/images/image.jpg' width='200' height='200' crop='true' filter='greyscale'}
Different SuperSizer "presets" could be coded into the UDT for different classes by the designer, plus maybe a default for images with no class.

This sort of functionality would be a real bonus for designers, who can carefully control the appearance of images hardcoded into the template and supplied via {content_image}, but at the moment can't control images inserted into a WYSIWYG {content} block.

[NikNak]

@kendo451

I clicked the calendar option in the menu above just to see what it did, and lo and behold it said it was your birthday - so HAPPY BIRTHDAY!   (sorry this is a bit off topic)

Nik
PS- thanks for the content event tip - I really should examine that more. Which example UDT's do you mean by the way? I'd like to see that particular example but don't know where to find it.

[kendo451]

Thanks, Niknak!

Here is the one I was thinking of:
http://wiki.cmsmadesimple.org/index.php/Share_your_tags_here#table_of_contents

He assigns the content block to a variable, then calls his table of contents tag with the variable passed as a parameter.  The it outputs the content with the table of contents inserted.

I see a couple of different ways you could do this, and one of these days I might do it myself.

A. Do it the same way as the table of contents tag where you process the content block in your page template.

B. Attach your UDT to the event EditContentPost, search the content for images, replace the image with supersizer output, replace the content in the database.

The only big advantage of option B is that when the user goes back to edit the image, he'll be seeing the supersized image instead of a browser-scaled image.

If all you do is insert a supersizer tag then the end-user sees that tag and thinks, "Hey I put an image there, why isn't it showing?".  This is why I think running the supersizer on the EditContentPost event and modifying the image tag to reflect the supersizer output is the best and most invisible way to do this for the end-user.

[Cerulean]

I think this UDT is an example of the method kendo451 suggests in option B: http://wiki.cmsmadesimple.org/index.php ... ate_vars_2

[kendo451]

Yes! You could simply replace his image thumb function with a call to Supersizer and you would pretty much have the job done.

If someone does do this and gets it working, please post in the Share Your Tags wiki.

[kendo451]

Has anyone been able to get supersizer working with Newsletter Made Simple?

[rubberglover]

Hi all,

Still using supersizer on most CMSMS websites and I'm loving it... really good plugin

Ran into a slight problem thought... I have to build a site on a Windows server (no choice I'm afraid!) and the plugin uses backslashes ('/') to reference path information. Obviously on Windows servers all of the paths are forward slashes ('\'). I just wanted to check that there was no easy way to amend this path information befor I hack the plugin and swap out the slashes on the path references!

Many thanks,
Andy

*edit* might have got my back/forward slashes the wrong way around?? Just to clarify, I need to switch '/' for '\' on all server paths!

[kendo451]

'/' = forward slash

'\' = backslash, or in India, "back-ee-slash"

[JeremyBASS]

Hello, um... I work on windows thou not thru IIS .. and never have issues with it.. for example


C:\wamp\www\stock_1_5_4/uploads/SuperSizerTmp/CB1_Image.-w100-h100-p0-q85-F-----S1-ccenterbottom.jpg

is a path I have for a test run... can you provide more info?  Cheers -Jeremy

[rubberglover]

I Jeremy,

Thanks for the response... I'm running apache so should be a similar setup. I know what you mean; PHP should resolve backslashes / forward slashes in paths so I was a bit confused. I've done a bit more digging and I think it's actually a problem with the CGBlog module.

Basically I have a custom field setup on CGblog so that the user can upload an image... the display template then loops through the custom fields and uses supersizer to resize the image. Turns out that the blog image is never actually uploaded, hence the path error i've been getting from supersizer.

In other words, CGBlog is having some trouble with paths... supersizer isn't at fault! I'll have another play with it and make a help request in a new thread if I can't solve it. Thanks for the example though, nice to know I'm not going crazy and that supersizer is happy with forward slashes and backslashes in paths

[JeremyBASS]

@rubberglover  Do you have the newest CGExtensions .. I help fix that issue with the uploads of image in CGBlogs with calguy like a month ago IIRC.. make sure you are all uptodate..

[nicmare]

just a simple question.
a tried

Code: Select all

{supersizer path='uploads/images/squares/square1.gif' width='23' filter="SMOOTH,GRAYSCALE,COLORIZE" farg1="50,,60" farg2=",,45" farg3=",,10" farg4=",,0"} 

but i am getting

Code: Select all

Fatal error: Call to undefined function imagefilter() in /usr/www/users/isleofb/plugins/function.supersizer.php on line 145

does this mean that my ISP does not provide the function imagefilter or whats wrong?

[JeremyBASS]

In short yes.. The GD lib would need to be reloaded... It doesn't mean that they took that one out.. thou they can.. but it could be a bad install... I'd talk with them.. if they are unwilling.. then there are ways to get around it.. but to be honest a host that would do that is not a good host.. .. I'd just talk with them.. hth.. cheers -Jeremy