nuzzaci Width Watcher; a wordpress plugin
Background, Mr Cookie at made-in-england.org asked me if I knew of a way to change the size of the images published to his blog via Flickr. It’s not a case of Mr Cookie being lazy or not capable of resizing images — he’s on holiday and are sending photos directly from his phone to his Flickr account, that then in return post the photo to his blog.
When setting up your blog on Flickr you can select from three sizes; 500, 240 and 100 pixel wide. Most people, like Mr Cookie, find that 500 pixels is a bit to wide. A 500 pixel wide post area forces the lines to run long and extends the recommended 66 characters / 10 words per line (unless, of cause, if you set a really large font-size). 240 pixels and 100 pixels are normally a bit too small if it is a main post image.
Thoughts, The quick fix on Mr Cookie’s blog was a CSS workaround; added a max-width to all the images within the a post — .postclass img{max-width:460px}. But IE 6 and older browsers don’t support max-width.
My next thought was to write a javascript function. But I’m no big fan of the onload flickering behaviour. A webpage need to be fully loaded before any javascript kicks in, so everything done with javascript that changes the look of the site will be noticeable for the trained eye. An example on this is my external link script. Even if there may be ways around the flickering onload behavior, it didn’t feel like the right job for Mr javascript.
Solution, So, let me present the nuzzaci Width Watcher wordpress plugin. It fairly straight forward.
This plugin will look through your posts before they get displayed and make sure that no images are wider than a desired maximum width (specify desired width in the nuzzaciWidthWatcher.php file). If an image is too wide, the plugin will add a height and width attribute to the image so that it will be displayed with the desired width while still keeping the correct ratio. It will ignore all images that already have a width or height attribute and/or if the size is less than the set maximum width. This plugin doesn’t touch the original image or the database.
View the script here, and download it here.
Instructions, Download the file, edit the max width variable, upload it to your plugin folder, log on to your admin section and activate it.
I’m using wordpress 2.0.5 and I have tried it on v2.2, but don’t see why this one shouldn’t work on all versions.
Version History
- v 0.5, Launch.
- v 0.6, Fixed an issue regarding potrait images.
I was wondering how Cookie had been posting to the blog from the wilds of America. Now I know. Great post on collaborative methods!
Regarding the javascript onload event not being quick enought, you can always have a look at the document ready function in jquery, should fire before the document is loaded but as soon as the DOM tree is ready. Might still not be 100% flicker free though.
http://www.learningjquery.com/2006/09/introducing-document-ready
This plugin is brilliant! Thank you a lot. I had problems with the width, images broke the layout.
Now since I found this plugin, my problem is solved :-)
I can get the plugin to work on individual post pages but not the index’s any ideas?
Jamison F, send me a link to the index page you are having problem with so I can have a look at it and maybe locate the problem.
I actually found out why it wasn’t working, i forgot it would ignore images with the width and height already set, problem is the images are set in a RSS feed, would i have to manually strip those images width and height attributes to get it to work? I noticed the class to ignore images with the width and height set and tried removing it… i guess what im asking is if theres a way to override any attributes set in posts no matter what(even if they are manually set), i tried messing around with it but figure your the one to ask… Thanks.
@Jamison F, this is probably not the best way to solve your request, but it’s a way. Follow these instructions and see if it works out for you.
Nuzzaci, Thanks a ton for your help. That did the trick for just about everything, however i have one post thats working odd, it applied the fix to the first image, but not the second or third… they are both showing full size (about 700px, my table is 450px) i tried the new code and old on this post… its not coded weird just straight img html any idea? Thanks again for your help and a great plugin.
@Jamison F, send me a link to the page you are having problem with. The issue is most probably on your end and not the plugin. My inital guess is that theres something wrong with the markup on the page and that prevents the plugin to locate all the images.
It happens on a few pages… i tried different things to figure it out but haven’t had any luck (im no programmer) but nothing looks out of the ordinary to me as far as the source anyway. Thanks again. - Jamison
http://www.allthehotkicks.com/blog/?p=146
http://www.allthehotkicks.com/blog/?p=85
http://www.allthehotkicks.com/blog/?p=81
Thanks to the issue brought to my attantion by Jamison F, the nuzzaci Width Watcher plugin have now been updated to version 0.6.
Good work Nico, I’m updated to 0.6 now :)
What I want next is a FaceSpace app/plugin that gathers stats about how and how much people are stalking me on SpazBook ;)
[...] but similar to when I approached the “Flickr images are a bit to wide” issue with the nuzzaci Width Watchers plugin, I thought — why not do it server [...]
Hello Nicolas, I was wondering if you knew how hard it would be to create a plugin that would insert a more tag if a post contains more than one image right before the second image? More so logically could your script be edited to do so? I have side bar ad’s that get ignored if there are tons of photos. I’d do a sliding/hover bar but thats against google’s TOS so i thought id ask you.
Jamison F, I’m afraid i don’t see an easy way to adapt my script to do what your after. But wouldn’t it be quite easy to add the more tag before the second image manually when your publishing the post? Read more about the more tag and how to customise it on this page.
Actually the posts are pulled through an automatic rss feed, there for i never have to actually publish them. Thanks for your help though.
I’m getting an error it seems on images that are wider than the max-width supplied by the plugin… the error is as follows:
Warning: imagecreatefromstring() [function.imagecreatefromstring]: Passed data is not in ‘WBMP’ format in /twogreattastes.com/wp-content/plugins/nuzzaciWidthWatcher.php on line 55
Warning: imagecreatefromstring() [function.imagecreatefromstring]: Couldn’t create GD Image Stream out of Data in /wp-content/plugins/nuzzaciWidthWatcher.php on line 55
Warning: imagejpeg(): supplied argument is not a valid Image resource in /wp-content/plugins/nuzzaciWidthWatcher.php on line 56
These are all valid jpgs, so not sure what’s up… help? :)
@Jeremy M, are the path to the images correct?
Seems to be, yes. The images on the affected posts do load, and actually seem to have the width/height applied… they just throw the error on the page.
@Jeremy M, that error being thrown can be due to so many different factors beyond the script — server configurations, php configurations, wordpress version etc, it’s impossible for me to help with so little information.
Since the error that’s been thrown is giving a reason for being thrown; triple check that that’s not the cause. Make sure that the images are valid images, the permission on them are right and that your markup is validating.
It do seem to be a due to a human error and not a script error.
I haven’t tried the script on new version of Wordpress and it’s only been tried on unix servers running php5.