All Things Seen and Unseen

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.

1.1.0 allows shadows to be added to only those images with a specified class attribute; by leaving the background colour blank you can have the plugin generate shadows which will overlay textured backgrounds transparently. 1.0.0b2 makes some minor changes to be ready for WordPress 2.6. 1.0.0b1 is the first public release.

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

If upgrading from a previous version, first deactivate the plugin via the Plugins page and delete the plugin folder from your server. Upload both the plugin folder (image-shadow) to your /wp-content/plugins/ directory. Go to your admin Plugins page and activate Image Shadow. 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.

32 Comments Add your own

I try.

GO GO GO !!!

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

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?

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.

Thank you, solve this.

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.

Chris: Is your PHP running in safe mode?

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

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

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?

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

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

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

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.

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

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.

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!

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.

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!

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.

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);

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

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.

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,

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?

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

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

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.

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.

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.

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

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

Trackback this post | Subscribe to the comments via RSS Feed