Image Shadow

Purpose

Adds realistic, soft drop-shadows to images in your posts.

This is version 1.1.0 . It has been tested on WordPress 2.5-2.6.2.

Image Shadow scans your posts for <img> tags and replaces the image link with one hosted on your website which has been transformed to add a shadow and, optionally, a frame. You can choose to keep the image itself at its original size (so the new image, with shadow etc., is larger) or to shrink the image a little to accommodate the new shadowed image in the original image’s space. Only jpg images are handled.

Installation Instructions

  1. If upgrading from a previous version, first deactivate the plugin via the Plugins page and delete the plugin folder from your server.
  2. Upload both the plugin folder (image-shadow) to your /wp-content/plugins/ directory.
  3. Go to your admin Plugins page and activate Image Shadow.
  4. Use the admin Settings|Image Shadow page to set all the available options.

Usage and Options

The plugin needs to be able to write the cached image files to a folder on your server and will appear to do nothing if it can’t. If you run a caching program you will need to clear the cache to see the modified images.

The plugin’s settings screen uses javascript to enhance the interface, including giving a live preview of the effect of each setting, but if javascript is disabled the settings should still work. Right now the javascript interface works best in a modern browser and has problems in Internet Explorer. Transparent shadows will only work in Internet Explorer if a workaround is in place for png files with alpha transparency.

Finally…

I look forward to your help in ironing out any issues and implementing any good ideas. General comments can be left below.

47 Comments Add your own

  • 1. fred  |  June 30th, 2008 at 10:15 pm

    I try.

    GO GO GO !!!

    :D

  • 2. Dheeraj  |  July 5th, 2008 at 2:27 pm

    Good, I tried this on my site http://www.reviewmirchi.com. good

  • 3. Huseyin  |  July 7th, 2008 at 10:00 am

    Hello.
    I activated your plugin but i got error that
    “ImageShadow could not create the cache directory. Check the write permissions of the plugin directory. You may have some luck creating the cache directory by hand.”

    Where should create “cache” directory in?

  • 4. Rob  |  July 7th, 2008 at 1:46 pm

    Huseyin: The cache directory goes in the /plugins/image-shadow/ directory and needs write permission. If your PHP is running in safe mode you might not get the plugin to work.

  • 5. Huseyin  |  July 8th, 2008 at 8:16 pm

    Thank you, solve this.

  • 6. Chris Birchall  |  July 11th, 2008 at 12:33 am

    Sorry. Can’t get it to work at all here.

    Even after setting the folder to 777. The Settings page is just blank, and when the plugin is activated, the entire site fails to load at all!

    Shame, because I really like the effect.

    Chris.

  • 7. Rob  |  July 12th, 2008 at 5:12 pm

    Chris: Is your PHP running in safe mode?

  • 8. Curtis B  |  September 10th, 2008 at 8:36 pm

    I just activated the plugin and in the settings menu I get “Fatal error: Call to undefined function curl_get_contents() in /homepages/44/d252948028/htdocs/[MY WEBSITE TITLE]/wp-content/plugins/image-shadow/image-shadow.php on line 176.

    When my site tries to load in a browser, it gets to a .jpg in a post and stops and prints out “Fatal error: Call to undefined function curl_get_contents() in /homepages/44/d252948028/htdocs/[MY WEBSITE TITLE]/wp-content/plugins/image-shadow/image-shadow.php on line 176″.

    Am I doing something wrong? I am fairly new to hosting a blog .

    Thanks for any help. Would love to be able to use this pluggin.
    Curtis

  • 9. Rob  |  September 10th, 2008 at 11:09 pm

    Curtis B: I’ve sent you via email a new version to try.

  • 10. JW  |  September 12th, 2008 at 4:27 pm

    First off all I love your Plugins!
    But with Image Shadow I have a problem.

    When I use it my pictures look blurred.

    Any Ideas?

  • 11. Rob  |  September 13th, 2008 at 5:12 pm

    JW: It might help if I could have a look…

  • 12. JW  |  September 13th, 2008 at 6:24 pm

    Here are 4 Snapshots:

    Without Image Shadow
    With Image Shadow Final Image Size Option1
    With Image Shadow Final Image Size Option2
    With Image Shadow Final Image Size Option3

  • 13. JW  |  September 13th, 2008 at 6:28 pm

    Sorry something went wrong!

    http://www.jw-multimedia.de/Upload/without-IS.jpg
    http://www.jw-multimedia.de/Upload/with-opt1-IS.jpg
    http://www.jw-multimedia.de/Upload/with-opt2-IS.jpg
    http://www.jw-multimedia.de/Upload/with-opt3-IS.jpg

  • 14. Rob  |  September 13th, 2008 at 9:15 pm

    JW: It may be that you are resizing the image+shadow to fit in the same space as the original. Try it without. The resize involves a re-sampling which could well degradel the image quality.

  • 15. JW  |  September 13th, 2008 at 9:27 pm

    Thanks fo reply!
    But how can I do that?
    In Image Shadow Option Page?
    There are only three selections for Final Image Size.

    :-(

  • 16. Rob  |  September 14th, 2008 at 9:27 am

    JW: Sorry! The first option is the one that avoids resizing — and still your images show fuzziness. It’s hard to see why in the code: the original image is simply copied onto a shadowed background and then sent to file as a jpg (with 100% quality). You could try changing line 229 (I think):

    imagejpeg($image, $cache_filename, 100);

    imagepng($image, $cache_filename);

    and see whether the generated png file is sharper. Remember to stick to the first option in the drop down list for ‘Final image size’.

    Let me know the result as I would like to fix this.

  • 17. JW  |  September 14th, 2008 at 12:51 pm

    I’m a bit confused!

    Take a look at this image.

    http://www.jw-multimedia.de/Upload/png.jpg

    In the Cache Directory it’s a jpg-File but Typ is png!?

    Why it’s scaled down to 500×333?

    weird!

  • 18. Rob  |  September 14th, 2008 at 3:46 pm

    JW: Yes that is confusing… by changing that line of code we have asked the plugin to create a file with a jpg extension that is really a png! Not generally recommended!

    I wonder whether the escapade hasn’t led us somewhere though… Do your img tags have height and width attributes? If they do then it may be the browser resizing the image which is making the fuzziness. You could try switching back to jpg and removing the height and width attributes from the html. That might help.

  • 19. JW  |  September 14th, 2008 at 4:16 pm

    I’ve take out the width & heigth from html.
    Now the images look sharp as the originals.
    But I must change the width of the left column of my theme and
    I have to change every single article (ca. 800) by hand.
    Thats to much effort.

    Thanks again!

    ;-)

  • 20. Rob  |  September 14th, 2008 at 9:12 pm

    JW: The idea of the other two options in that drop-down list was to keep the image plus shadow fitting within the original space. Maybe letting the plug-in do the resizing will be better than letting the browser do it.

  • 21. Brian  |  September 20th, 2008 at 3:31 am

    On my new blog, not the one linked, I’m going to be using this plugin-an awesome one I might add. everything was going swimmingly until I installed the WP-Ecommerce plugin. It apaprently doesn’t like how Image shadow changes the files and it breaks the page. I think I could avoid this error if I could assign the plugin only to work on a certain class of images. For instance, I might not want EVERY image on my site to have the drop shadow, so I would just assign the “img.shadow” class to the plugin. Then when I add an image in a post of page, I could just add the class to that image. Would there be a way for me to change this line, or add a new one, or make it an option on the option page?

    preg_match_all('#<img.+?src\s*=\s*["|\'](.+?)["|\'].+?>#isu', $content, $matches);

  • 22. Rob  |  September 20th, 2008 at 8:06 am

    Brian: I knew this was going to be needed next! Let me have a look.

  • 23. Rob  |  September 20th, 2008 at 9:20 pm

    Brian: There is a new release (version 1.1.0) which restricts shadowing to images marked with a class attribute. The new version also tries to handle transparent shadows.

  • 24. Anthony  |  October 1st, 2008 at 3:51 am

    Hey i love this plugin - but something wierd is happening - it only works on some images, and doesn’t display anything for others. Check out my site - on the home page it works but on ‘ipod cases’ it doesn’t. When i turn off the plugin, the images come back.

    Any ideas?

    Thanks,

    A.

  • 25. Rob  |  October 1st, 2008 at 10:54 am

    Anthony: A quick look at the source code for your pages makes me think that the image shadow plugin isn’t processing any of the images. In that case it should default to doing nothing — the img src urls look OK. Have you ever had the images shadowed correctly?

  • 26. Anthony  |  October 1st, 2008 at 10:59 am

    I turned it offf… here, try it turned on again…

    A.

  • 27. Anthony  |  October 1st, 2008 at 11:00 am

    It works for some, not for others. But the source files are fine… I dunno whats going on?

  • 28. Rob  |  October 1st, 2008 at 12:18 pm

    Anthony: It seems to work for all images except the main linked ones! I’ll see if I can reproduce the problem and report back.

  • 29. Anthony  |  October 2nd, 2008 at 1:38 am

    Any luck… my only option is to turn it off… which is a shame, it works fine on similar sites. I’ve tried deleting all the files / cache and plugin and starting over, which doesn’t work. Is there anything else i could try.

  • 30. Rob  |  October 2nd, 2008 at 1:44 pm

    Anthony: I’ve tried all sorts of ways to duplicate the problem and none have worked. I have one suggestion left: could it be a memory problem? The images that get lost on your blog seem to be the larger ones. Maybe you could try increasing the working memory for PHP and see if it makes any difference.

    Sorry not to be more help.

  • 31. Anthony  |  October 3rd, 2008 at 12:35 am

    Thanks for trying Rob, i think i’ve worked out how to fix it, by editing the post, deleting the picture and reinserting it.

    A.

  • 32. Rob  |  October 3rd, 2008 at 9:32 am

    Anthony: That’s good you have a workaround — but strange that it is necessary!

  • 33. Kevin Jaffray  |  October 15th, 2008 at 9:08 pm

    Thanks for a great plugin Rob.

    The only issue I have is with a rapidly building cache. I have dynamic images on some sites and often generate 4-5000 cached images. On a shared hosting account there is a limit to the number of inodes you’re allowed and you can get your account suspended if your exceed this figure.

    My question is, can you include a clear cache option in a future build or maybe run a cron to empty the cache as required.

    Kev

  • 34. Ryan  |  October 22nd, 2008 at 1:20 am

    I am getting the same message another person above

    “ImageShadow could not create the cache directory. Check the write permissions of the plugin directory. You may have some luck creating the cache directory by hand.”

    I have checked with the hosting company and they said that php is not in safe mode. I have also checked the permissions and still can’t get rid of this error message. Any other suggestions?

  • 35. Brian  |  October 24th, 2008 at 12:46 am

    rob, thanks for the class add. It did the trick. . . . however, something happened along the way (who knows where) that caused me to get this error when i open the image shadow settings page. Also, no images show on the website.

    any ideas?

    Warning: imagecreatefromstring() [function.imagecreatefromstring]: Data is not in a recognized format in /home/annama5/public_html/ibablog/wp-content/plugins/image-shadow/image-shadow.php on line 233

    Warning: imagesx(): supplied argument is not a valid Image resource in /home/annama5/public_html/ibablog/wp-content/plugins/image-shadow/image-shadow.php on line 237

    Warning: imagesy(): supplied argument is not a valid Image resource in /home/annama5/public_html/ibablog/wp-content/plugins/image-shadow/image-shadow.php on line 238

    Warning: imagecopy(): supplied argument is not a valid Image resource in /home/annama5/public_html/ibablog/wp-content/plugins/image-shadow/image-shadow.php on line 265

    Warning: imagedestroy(): supplied argument is not a valid Image resource in /home/annama5/public_html/ibablog/wp-content/plugins/image-shadow/image-shadow.php on line 286

  • 36. Kevin Jaffray  |  October 26th, 2008 at 6:19 pm

    I love this plugin Rob, but would it be possible for it to retain the settings during deactivation, activation? It’s a pain having to reset all the colours after upgrading WP. Thanks

  • 37. Dina Alexy  |  November 14th, 2008 at 2:35 am

    Finally i found what i was looking for… hmm… thanks

  • 38. ChuckMcB  |  November 27th, 2008 at 2:11 pm

    > My question is, can you include a clear cache option in a
    > future build or maybe run a cron to empty the cache as required.

    I vote for this feature request as well.

  • 39. Ari  |  December 4th, 2008 at 7:10 pm

    How can I have some images NOT shadowed?
    Can i add some class or something to make only some pictures not have shadows?

  • 40. Chris Flattley  |  December 7th, 2008 at 12:41 am

    I get the following error when using this plugin:

    Fatal error: Allowed memory size of 67108864 bytes exhausted (tried to allocate 12112 bytes) in /home/theflatt/public_html/cfblog/wp-content/plugins/image-shadow/image-shadow.php on line 242

    Any ideas what may cause this?

    Any help would be appreciated.

  • 41. Kevin Jaffray  |  December 7th, 2008 at 7:56 am

    Try a smaller image size first.

  • 42. yuri  |  December 16th, 2008 at 5:30 pm

    update to wordpress 2.7 please :)

  • 43. Chris Flattley  |  December 16th, 2008 at 5:39 pm

    I am on wp 2.7. I was using the beta version previous to the release version. Still no change. Still getting errors

  • 44. yuri  |  December 16th, 2008 at 5:42 pm

    no errors,
    sometimes does not show good pictures

  • 45. Lazarboy  |  December 27th, 2008 at 12:22 pm

    Hi,
    great plugin.
    The only thing I’m missing is the option to disable it on some pictures. for instance on graphics with a white background - the shadow only spoils the effect.
    Is there a quick css solution you can think of?

  • 46. Wagner Reis  |  December 28th, 2008 at 11:28 am

    Puts some print screem for exemple, thanks from Brazil!

  • 47. talle  |  January 6th, 2009 at 5:33 pm

    Hi.

    I’ve:

    plugins/image-shadow/cache 777 Permission

    and

    whole domain safe_mode off

    and I get always:

    ImageShadow could not create the cache directory. Check the write permissions of the plugin directory. You may have some luck creating the cache directory by hand.

    Help, please.

Leave a Comment

Required

Required, hidden

Trackback this post  |  Subscribe to the comments via RSS Feed