How many of you have wanted to have a watermark on all of your images?
Lets say you are just starting your blog and you will just fire up Adobe Photoshop or any other image editing program and you will add a watermark on each image you have. 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 every image on your blog to your computer, open all of them up and add a watermark.
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 work for me.
I must worn you do that it is for some what advanced users.
What we are going to do is fake the display of an image. 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 all.
All you need is a bit of code in the .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 will be 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 but a watermark on them, it wouldn't look too good.
I also made an archive with everything you need:
1:24 pm on August 6th, 2008
I've come across this problem before, thanks for an innovative way of solving it!
8:54 am on August 15th, 2008
simply awesome. a good fix. thx!
1:26 am on August 22nd, 2008
Hi, thanks for the post. Can I use it on my free Wordpress.com blog?
3:46 am on August 22nd, 2008
No, you can't. You need to have access to the blog files.
12:22 am 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)?
7:09 am 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.
3:46 pm 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?
5:13 am 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.
7:10 pm 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!
5:28 am 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.
6:55 am on September 5th, 2008
Hello,
wow wow wow very nice themes on this page!!
Respect!!
Joachim
4:09 pm on September 29th, 2008
It's a great source thank you.
6:59 am 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 am 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 am on October 1st, 2008
This is only for wordpress. If you have another software then you need to modify the paths.
1:42 pm 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.
7:54 pm 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 …
7:56 pm on October 7th, 2008
STUMBLED!
This is a fantastic idea and tutorial, thanks for sharing.
1:15 pm 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 [...]