How many of you wanted to place a watermark on all of your images?
Let's say you are just starting your own blog and the first solution that comes to mind is to fire up Adobe Photoshop or any other image editing program and place a watermark on all your images. It is time consuming but it will work.
But what if you have a blog for a really long time and you just decided you want to watermark all your images? You would have to copy all your images from your blog to your computer, open all of them up and add a watermark. Not good.
But what about the original images? What if you ever need them without the watermark?
Here is my solution. I have been using this on a number of blogs and it does the job really well.
What we are going to do is fake the display of an image. What we are displaying instead of the image is a php file that processes the image and ads a watermark to it. The url of the image stays the same, the watermark gets printed on the image and best of all the image on the server doesn't stays intact.
All you need is a bit of code in your .htaccess file, a php watermark processing file and a watermark image (png preferably).
Step 1
Add this code in your .htaccess file:
RewriteRule ^(.*)wp-content/uploads/(.*) $1watermark.php?src=wp-content/uploads/$2
Step 2
Create a new file in the root of your directory(where wp-admin, wp-content and wp-include is) and name that file watermark.php. After that copy and paste the code below in that file and save it(obviously).
$src = $_GET['src'];
header('Content-type: image/jpeg');
//this will prevent the watermark from showing up in the thumbnail images
if (eregi("150x150", $src)) {
$watermark = imagecreatefrompng('empty.png');
} else {
$watermark = imagecreatefrompng('watermark.png');
}
$watermark_width = imagesx($watermark);
$watermark_height = imagesy($watermark);
$image = imagecreatetruecolor($watermark_width, $watermark_height);
if(eregi('.gif',$src)) {
$image = imagecreatefromgif($src);
}
elseif(eregi('.jpeg',$src)||eregi('.jpg',$src)) {
$image = imagecreatefromjpeg($src);
}
elseif(eregi('.png',$src)) {
$image = imagecreatefrompng($src);
}
else {
exit("Your image is not a gif, jpeg or png image. Sorry.");
}
$size = getimagesize($src);
$dest_x = $size[0] - $watermark_width - 0;
$dest_y = $size[1] - $watermark_height - 0;
imagecolortransparent($watermark,imagecolorat($watermark,0,0));
imagecopyresampled($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, $watermark_width, $watermark_height);
imagejpeg($image, "", 95);
imagedestroy($image);
imagedestroy($watermark);
Use any image editor you like and create a png file that you will use as your watermark image. Save that image with the name "watermark.png" and put it in your root directory.
Also create a png image which is 1×1pixels and it must be transparent. Name that file "empty.png" and save it also in your root directory.
That 1×1px image is meant to be displayed on the thumbnail images. The thumbnails are to small to put a watermark on them, it wouldn't look too good.
I also made an archive with everything you need:
Watermark Script (3.49 KB)
13:24 on August 6th, 2008
I've come across this problem before, thanks for an innovative way of solving it!
08:54 on August 15th, 2008
simply awesome. a good fix. thx!
01:26 on August 22nd, 2008
Hi, thanks for the post. Can I use it on my free Wordpress.com blog?
03:46 on August 22nd, 2008
No, you can't. You need to have access to the blog files.
00:22 on August 24th, 2008
But if you apply the watermark on every request for that image don't you use to much resources (cpu, memory, page rendering time)?
07:09 on August 24th, 2008
Well ya, I guess it does, but if you really want to optimize it, you can implement a cache system.
It also depends on how many images you have on your site.
I also have a travel blog and it has lots of pictures with high dimensions and I didn't see an increase in bandwidth or resources problems.
15:46 on August 24th, 2008
Hi,
few question here.
When someone found our image from google image search for example.
will that image be watermarked too?
will this mod work with others cms/forum application ect?
05:13 on August 25th, 2008
1. yes, it will be watermarked
2. yes it will work, you just have to change the rewrite rule in the .htaccess file. You find the directory where the images are stored and add it in the file. Remember, just the images, not other files.
19:10 on September 1st, 2008
I've been looking for a way to do this, so thanks for sharing! I was wondering, could you share a link of a blog where this is used? I'd like to see how it looks before I fiddle around with my WordPress install. Thanks!
05:28 on September 2nd, 2008
Sorry, I can't show you a wordpress installation with this features, but its just quick to add. Just try it.
06:55 on September 5th, 2008
Hello,
wow wow wow very nice themes on this page!!
Respect!!
Joachim
16:09 on September 29th, 2008
It's a great source thank you.
06:59 on October 1st, 2008
Hello Gaby,
this is a really clever solution — if only I could implement it on my server.
I get server errors (500) after editing the .htaccess file.
There are already RewriteRules from Wordpress, where do I have to paste your RewriteRule (below the Wordpress entry or between their statement)?
My WordPress installation is not directly in the root folder it's in: root/wordpress/
do I have to adjust something because of this?
Thanks in advance
11:10 on October 1st, 2008
This should be the full .htaccess code:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
RewriteRule ^(.*)wp-content/uploads/(.*) $1watermark.php?src=wp-content/uploads/$2
</IfModule>
11:11 on October 1st, 2008
This is only for wordpress. If you have another software then you need to modify the paths.
13:42 on October 1st, 2008
Thank you Gaby for the fast reply.
This drove me nuts; after your reply with the .htaccess example it still refused to work…
Close before from falling into despair I tried to check the text encoding of the file. It was <em>UTF8</em> — changing it to <em>Western ASCII</em> made the difference!
Some character in the recently added RewriteRule must have confused the server. Previously the other characters seemed to go fine in the (not so obvious) wrong text encoding.
So, finally; Thanks a lot for this smart solution for watermarking.
19:54 on October 7th, 2008
How to watermark all your uploaded images…
What we are actually going to display instead of the image is a php file that processes the image and ads a watermark to it. The url of the image stays the same, the watermark get put on and best of all the image on the server doesn't get modified at …
19:56 on October 7th, 2008
STUMBLED!
This is a fantastic idea and tutorial, thanks for sharing.
13:15 on November 7th, 2008
[...] il file compresso dello script qui. La guida per intero ed in lingua inglese la potete trovare qui, il tool on-line(se avete tempo e voglia di caricare le vostre immagini) qui. Segnala [...]
17:36 on December 10th, 2008
Gracias, esto es lo que andaba buscando!
10:36 on December 17th, 2008
Is there a way to add the watermark to the bottom of the image instead of overlaying it? If I have text close to the bottom of the image, it will get overwritten by the watermark. Is it possible to modify the script to increase the canvas size? Ie. If image is 400pixels in height, add 20 pixels to the bottom and add the watermark there? Thanks
04:30 on January 19th, 2009
Thaks for this post..
Its great!
16:34 on January 31st, 2009
hi,
im trying to use this script in combination with a php image resizing script, but im not sure exactly how. the php script im using is smart image resizer (http://shiftingpixel.com/2008/03/03/smart-image-resizer/).
the images id like watermarked have urls like this :
http://ithinkyoureswell.com/wordpress_2/wp-content/themes/ithinkyoureswell/smartImageResizer/image.php?width=650&image=http://ithinkyoureswell.com/wordpress_2/wp-content/uploads/2009/01/01_12.jpg
thanks for any help !
16:43 on January 31st, 2009
Instead of using a resizing script you could just use the wordpress medium thumbnail.
You set the size if the medium size image of an uploaded image to what ever you want and after you upload an image with the media uploader just put the medium image not the thumbnail or original, and it should work. Hopefully.
15:15 on February 1st, 2009
i thought about doing that originally, but the problem is that if you decide to change the size of "medium" in the future, it will not be applied to images that are already uploaded (at least as far as i know). thats why im using the image resizer, and thats why i was hoping to get your watermarking trick to work..
15:50 on April 23rd, 2009
Great tutorial. It's working like a charm.
01:50 on May 9th, 2009
didnt work for the server im using which is a "shared server" as well as i didnt find any .htaccess file on the server where the wordpress files set.
can u please help me out?
01:51 on May 9th, 2009
sorry just forgot to tell u that i have created a .htaccess file and place in the root directory
05:58 on May 20th, 2009
Can i use this for WP MU? cause i wanna to integrated for this. And i to ask something about this, did the image is watermarked into gallery or into image that i upload at post? cause some plugins just do for the gallery, but i try to find the plugins for the image when i upload in the post…can this function works for my needs?? thanks alot…
regards
yossie
14:41 on May 21st, 2009
Yes, for me, quiestion about WP MU interesting too
10:12 on May 25th, 2009
I cant say how thankful I am that I found this post. Fireworks was driving me absolutely crazy with manually watermarking everything.
Thankyou!
Andrew
02:15 on May 27th, 2009
i thought about doing that originally, but the problem is that if you decide to change the size of "medium" in the future, it will not be applied to images that are already uploaded (at least as far as i know). thats why im using the image resizer, and thats why i was hoping to get your watermarking trick to work..
01:58 on June 10th, 2009
You saved my time and work..
Thanks a ton bro !
16:39 on June 18th, 2009
[...] need a code for watermarked all uploaded images in wordpress. I google it, and i find a solution in WP Glamour. You only add this codes and all of your upload images are watermarked. This very easy solution for [...]
19:19 on June 27th, 2009
[...] WpGlamour Category: FTP, imagens, photoshop, php, wordpress | Comment (RSS) [...]
07:28 on August 11th, 2009
i used ur instroctions on movable type also it worked great
thanks for great job
i came across here by google ( malaysia )
09:16 on August 12th, 2009
This is a great bit of code, and BTW, I happened into this gem while searching around for ClassiPress ;)
Just wondering if this code has survived WordPress updates (in particular the automatic core updates) over the last few months up to the 2.8.x branch?
Thanks for sharing!
Rob
23:40 on August 15th, 2009
If my WP (http://aaa.com) and pic (http://bbb.com) are in the different host, would the plugin does work? If the answer is no, how to modify the code to make it work?
12:58 on August 16th, 2009
@ali
I'm glad you found it useful.
@Robin Majumdar
Since the php file that does the watermarking is not one of WordPress's files, the WP upgrade should have no affect on it. So you should have no problems.
@Eric
If your images are on different domains than your blog, then this fix will not work.
If you have access to the other domains then add the php file and the .htaccess lines to those domains and it will work in the same way.
But if you don't have access to them there is nothing you can do.
The hole point of this fix is that all the images you save on your blog have no watermark but the users can't see the original images. Instead they can only see an image that is "filtered" through the php file. If you just have something like this in your blog posts watermark.php?url=http://domain.com/image.jpg then users can see what the original image is
20:09 on August 20th, 2009
Hey Dude…
Thanks a lot for the tip..It's going to save lots of time for my old blogs..Watermarking is something I always avoided and I know I Should not….
This will be taken care of from now…
13:26 on August 21st, 2009
Awesome sollution, thanks a lot! I just implemented it on my blog and it works like a charm. I'm wondering if I could insert text instead of watermark.png so I can make it a little more dynamic, have you done that?
18:20 on August 21st, 2009
@Øyvind
You could try this solution:
http://blog.ninedays.org/2007/11/29/writing-text-to-images-with-php/
And instead of the image you use this $src = $_GET['src'];
You also have to change the mime type to jpg.
See if it works.
If not, then try to find other scripts by googling "gd text on image" or something similar.
00:19 on August 31st, 2009
[...] only that, Gaby teaches us how to watermark images without having to run it through your graphics program. Very nifty tip [...]
09:22 on September 5th, 2009
Thanks for your replay.
I still have some questions.
I can access .htaccess file to both of my wp and pic site.
(1.) If my WP (http://domain.com) and pic (http://pic.domain.com), then what is the RewriteRule should be?
(2.) If I want to insert a picture from my pic site (http://pic.domain.com/test/1.png) to my post, what should I do?
<img src="http://pic.domain.com/watermark.php?url=http://pic.domain.com/test/1.png" alt="" />
19:48 on September 5th, 2009
[...] GlamourGaby's Watermark Script v.s. Marekkis's WordPress [...]
06:42 on September 7th, 2009
Hi,
Will this work if the images are stored on the database, not in the file system?
I'm struggling to get it working….i've adjusted the paths as necessary, but to no avail!
Any help would be appreciated,
Thanks : )
18:06 on September 7th, 2009
Ok…..so i've changed my site to work with by using the file system instead….but….
The URL being generate is:
http://www.mydomain.com/gallery/images/20/image.jpg
The /20/ is a dynamically created directory.
My images are actually being uploaded to:
http://www.mydomain.com/gallery/images/image.jpg
Any ideas how to get around the dynamic directory??
Thanks
05:50 on September 9th, 2009
Anyone got any thoughts on the above??
21:45 on September 17th, 2009
This is great, I would suggest letting people know that the code for the .htaccess file needs to go in the root level of your web folder where as the other files go in the root level of your wordpress install.
My question, however, is there any way to get the watermark.png file to scale to the image that it is being used with? I have images of different sizes and thus some have the watermark very small and others have it very large.
19:01 on October 11th, 2009
[...] Autor skryptu [...]
20:55 on November 1st, 2009
[...] [...]
14:34 on November 2nd, 2009
This is terrific, I just implemented it at http://www.seductive-babes.com/ and it works like a charm.
23:57 on November 11th, 2009
Is there any way to not put your watermark on a .gif? It stops the animation in them
Thanks
17:20 on November 29th, 2009
Hi
very Very Very Thankssss
it Working on Any CMS Which you want !
i impliment it in MT
09:40 on January 8th, 2010
hello! how can i apply all these on blogger posts? thanks!
05:07 on January 9th, 2010
Blogger? Blogger sucks.
You can put watermarks on your images if you move to WordPress self-hosted.
11:22 on January 12th, 2010
Thanks for sharing, this is exactly what I have been looking for, works perfect.
15:43 on January 13th, 2010
One question, is there a way I could exclude files? I have 2 files in my wp-content/uploads dir that I don't want watermarked.
Thanks,
-dave
20:39 on February 1st, 2010
Working great over on my site! Thanks!
@dstryker To exclude files, you have to place them in a different folder
05:22 on February 22nd, 2010
Just installed on my wp2.9.2 install and tested.
Works great except for one minor issue, when uploading in the media library, it seems to apply the watermark to the uploaded image, which means all images including thumbs have the watermark.
Still testing, but hoping you could look at that for me.
(and thanks for a great solution)
11:04 on February 22nd, 2010
Last question, I promise ;)
Can this be made to work with your Photo Blog theme also?
12:26 on February 22nd, 2010
The uploaded image is shown from the upload folder so it should also be displayed with the watermark.
If the thumbnail of the image has 150×150 in the file name then it won't show the watermark unless you have changed the default size of the thumbnails, because that would change the file names of the thumbnails.
12:27 on February 22nd, 2010
Oh, I forgot, it should work with the Photo-Blog theme just fine. Haven't tested it but it should.
18:32 on February 22nd, 2010
I am still having trouble where it watermarks the thumbnail and doesnt watermark the full size (using wp default, your Photo Blog theme, and another theme I installed), but I made some changes on my test bed, and I think I will be doing a clean fresh install of the whole works and start from scratch before taking it live with your Photo Blog theme.
16:59 on February 25th, 2010
Hi. I dont use wordpress i have only pic i on my server. How to make watermarks with this script?
07:48 on March 1st, 2010
@rk
If you want to use the script with another platform or site then you need to change the path to the images from the line that you place in your .htaccess file.