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 used 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 adds 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/(.*\.(jpe?g|gif|png))$ $1watermark.php?p=br&q=90&src=wp-content/uploads/$2
Change p=br and q=90 with your preferred watermark position and image quality.
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).
//we tell the server to treat this file as if it wore an image
header('Content-type: image/jpeg');
//image file path
$img = $_GET['src'];
//watermark position
$p = $_GET['p']; if(!$p) $p = 'br';
/*
p can be anything from the following list:
tl = top left
tc = top center
tr = top right
cl = center left
c = center of the image
cr = center right
bl = bottom left
bc = bottom center
br = bottom right
*/
//watermarked image quality
$q = $_GET['q'];
//if the quality field is missing or is not on the 0 to 100 scale then we set the quality to 93
if(!$q || $q<0 || $q>100) $q = '93';
$filetype = substr($img,strlen($img)-4,4);
$filetype = strtolower($filetype);
if($filetype == ".gif") $image = @imagecreatefromgif($img);
if($filetype == ".jpg") $image = @imagecreatefromjpeg($img);
if($filetype == ".png") $image = @imagecreatefrompng($img);
if (!$image) die();
//getting the image size for the original image
$img_w = imagesx($image);
$img_h = imagesy($image);
//if the filename has 150x150 in it's name then we don't apply the watermark
if (eregi("150x150", $img)) {
imagejpeg($image, null, $q); die();
} else {
$watermark = @imagecreatefrompng('watermark.png');
}
/*
//if you want to use the watermark only on bigger images then use this instead of the condition above
if ($img_w < "150") {//if image width is less then 150 pixels
imagejpeg($image, null, $q); die();
} else {
$watermark = @imagecreatefrompng('watermark.png');
}
*/
//getting the image size for the watermark
$w_w = imagesx($watermark);
$w_h = imagesy($watermark);
if($p == "tl") {
$dest_x = 0;
$dest_y = 0;
} elseif ($p == "tc") {
$dest_x = ($img_w - $w_w)/2;
$dest_y = 0;
} elseif ($p == "tr") {
$dest_x = $img_w - $w_w;
$dest_y = 0;
} elseif ($p == "cl") {
$dest_x = 0;
$dest_y = ($img_h - $w_h)/2;
} elseif ($p == "c") {
$dest_x = ($img_w - $w_w)/2;
$dest_y = ($img_h - $w_h)/2;
} elseif ($p == "cr") {
$dest_x = $img_w - $w_w;
$dest_y = ($img_h - $w_h)/2;
} elseif ($p == "bl") {
$dest_x = 0;
$dest_y = $img_h - $w_h;
} elseif ($p == "bc") {
$dest_x = ($img_w - $w_w)/2;
$dest_y = $img_h - $w_h;
} elseif ($p == "br") {
$dest_x = $img_w - $w_w;
$dest_y = $img_h - $w_h;
}
imagecopy($image, $watermark, $dest_x, $dest_y, 0, 0, $w_w, $w_h);
imagejpeg($image, null, $q);
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.
I also made an archive with everything you need:
Watermark Script (3.8 kB)
I've come across this problem before, thanks for an innovative way of solving it!
simply awesome. a good fix. thx!
Hi, thanks for the post. Can I use it on my free WordPress.com blog?
No, you can't. You need to have access to the blog files.
But if you apply the watermark on every request for that image don't you use to much resources (cpu, memory, page rendering time)?
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.
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?
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.
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!
Sorry, I can't show you a wordpress installation with this features, but its just quick to add. Just try it.
Hello,
wow wow wow very nice themes on this page!!
Respect!!
Joachim
It's a great source thank you.
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>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
This is only for wordpress. If you have another software then you need to modify the paths.
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.
STUMBLED!
This is a fantastic idea and tutorial, thanks for sharing.
Gracias, esto es lo que andaba buscando!
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
Thaks for this post..
Its great!
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 !
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.
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..
Great tutorial. It's working like a charm.
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?
sorry just forgot to tell u that i have created a .htaccess file and place in the root directory
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
Yes, for me, quiestion about WP MU interesting too
I cant say how thankful I am that I found this post. Fireworks was driving me absolutely crazy with manually watermarking everything.
Thankyou!
Andrew
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..
You saved my time and work..
Thanks a ton bro !
i used ur instroctions on movable type also it worked great
thanks for great job
i came across here by google ( malaysia )
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
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?
@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
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…
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?
@Ø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.
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="" />
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 : )
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
Anyone got any thoughts on the above??
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.
This is terrific, I just implemented it at http://www.seductive-babes.com/ and it works like a charm.
Is there any way to not put your watermark on a .gif? It stops the animation in them
Thanks
Hi
very Very Very Thankssss
it Working on Any CMS Which you want !
i impliment it in MT
hello! how can i apply all these on blogger posts? thanks!
Blogger? Blogger sucks.
You can put watermarks on your images if you move to WordPress self-hosted.
Thanks for sharing, this is exactly what I have been looking for, works perfect.
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
Working great over on my site! Thanks!
@dstryker To exclude files, you have to place them in a different folder
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)
Last question, I promise
Can this be made to work with your Photo Blog theme also?
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.
Oh, I forgot, it should work with the Photo-Blog theme just fine. Haven't tested it but it should.
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.
Hi. I dont use wordpress i have only pic i on my server. How to make watermarks with this script?
@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.
It Worked!
Thx a lot for this tips…
Oya, Can i move the watermark to the center of the picture?
thank, this thing really works thanks a lot!))))
is there a way to exclude certain files so the watermark does not appear on them. I have one page with one photo that I do not want the watermark to appear.
thanks
nevermind, I read some of the above replies a little more closely and I got it fixed. I created a new directory and put the image to exclude in that directory and then updated the image path on the page.
I loved, thanks for sharing!
Too bad it doesn´t work in my site with the Lightbox plugin, only after it is in the attachment page… so, I will not use it, but anyway, it is amazing trick! =)
Thanks for sharing this solution!
Is it possible to change the position of the watermark? I'm not really PHP-savvy so I don't know which variable I should tweak.
If you want to change the position of the watermark you have to change the variables $dest_x and $dest_y
Something like this for example:
$dest_x = "100";
$dest_y = "100";
Play around with the numbers.
I'm stumped but I think the problem has to do with the fact that my wordpress files are in the directory /wordpress and I used the instructions at http://codex.wordpress.org/Giving_WordPress_Its_Own_Directory prior to trying the watermark system.
Do I need to change something since my .htaccess is in the root and my wordpress are in the wordpress directory?
The only other thing I have in my .htaccess is to run php-cgiwrap.
I'm even using the files from your watermark.zip to make sure that I don't have anything else messed up.
@Mark
The first line goes in your .htaccess file.
You need to add to that path your wordpress installation directory name.
Great way of solving the problem. Thanks for showing us how to add this to our WordPress images.
Hello guys, great tutorial.
If anyone want to avoid putting the watermark on .gif files uploaded to your server (Stops the animation). You can use the following:
Cheers.
I used a similar trick on a gallery, but I did not wanted to check the code, thank you so much for making things easier. I decided I actually needed two watermarks, one for small images and another for high quality, so I changed your code a bit setting the $size before the if statement and adding an elseif in the middle:
elseif($size[1]>1024) {
$watermark = imagecreatefrompng('watermark2.png');
}
Thanks again, now I need to remeber how to do cool watermarks
Thanks for the tip! It worked great!!!
But i was wondering….
Is there a way that i can always center the watermark!
thanks!
This should center the watermark: (change the code from the article with the code below)
manymany thanks works like a charming!!!
Thanks for the info….
I tried this on WP 3.2.1 and didn't work.
Is there a way to get it working?
thanks
I can't seem to get this to work. Its simple enough but now my photos won't load at all. I tried clearing my cache but that didn't seem to help. Does it take a while for this to take into effect?
also, is this not suppose to work with lightbox or fancy box?
Yes, this should work with any kind of lightbox or fancy box installation.
This is awesome! However, it doesn't work with the way I have my theme set up. I always create custom thumbnail images to insert that are 180×160 but since they are already sized 180×160 they do not get renamed when they are uploaded, is there a way I can modify the script so instead of searching for 180×160 in the filename it looks for the actual dimensions of the image and excludes it?
Thanks in advance!
The code above has been updated.
I tested it and it works for any version of WordPress.
I added a watermark position parameter, a quality parameter and also a way to watermark only images over a certain width or height.
Thank you so much for the quick update! However, after updating my watermark.php and uncommenting out the rewriterule in my htaccess file my images no longer show on my posts. The thumbnail images show just fine by the images on the posts are just a question mark until I comment out the Rewrite rule, any ideas?
Thanks again, this is really a great trick!
I noticed that there is an @ symbol on line 38 right before "imagecreatefrompng" that wasn't there before and it also says "w.png" instead of "watermark.png" now, could that be the problem? Thanks!
I can't tell you why it's not working. It depends what you did wrong.
Follow the above instructions again, step by step, and maybe it will work.
Thank you for your reply, I followed the instructions but the images don't show up when I turn on the rewrite rule, not just the watermark but the actual image that the watermark is supposed to be on. Thanks!
Anyone would have an idea to modify the php script to put the empty.png file on all files under a limit weight ?
For example, I want to watermark pictures which are 350px width or more, but not 50×50, 150×150, 300×100, etc… Thanks !
Read the code again.
You'll see that the watermark script has that functionality now.
Sorry !
Yes indeed, you add a functionality to watermark only images over a certain width or height.
But like Jared, it doesn't work.
I followed the instructions, step by step…
It works with
if (eregi("150×150", $img)) {
$watermark = @imagecreatefrompng('empty.png');
} else {
$watermark = @imagecreatefrompng('watermark.png');
}
but not with
if ($img_w < "150") {//if image width is less then 150 pixels
$watermark = @imagecreatefrompng('empty.png');
} else {
$watermark = @imagecreatefrompng('watermark.png');
}
Any idea ?
Thanks.
Ya, it doesn't work, I've been trying to 2 hours. I have copied the code exactly as it is into my watermark.php file and changed the rewrite rule in my htaccess but all it does is break the images. Any help would be greatly appreciated!
I fixed the problem. Copy the code again and tell me if it works.
I have recopied the code into my watermark.php file but it is still breaking the images. Sorry for being such a pain, I will be sure to donate once this is working haha! Thanks again!!!!
I ran the code through a syntax validator and I got "Parse error: syntax error, unexpected T_VARIABLE" on line 32 which is $watermark = @imagecreatefrompng('empty.png');
If that helps you at all. Sorry, I know very little about PHP so I won't be much help
I still can't get this to work for me for some reason. I followed all the instructions but all it did was break my images. I am using fancybox and all that happens now is that I get a spinning cursor with no image. maybe its because of my theme? Will this work with the StoreBox theme? I am running out of ideas and options for watermarking. I would really like to get this working. Any help would be greatly appreciated.
Has anyone made any progress getting the new code to work? People keep stealing our tutorials and images and not giving us credit, I could REALLY use this feature! :X
@Ichigo & @ Jared
I tested the code just now and it works fine for both the name and the size condition.
If you copy the code again from the article and you still can't get it to work then I can't help.
It's either a problem from the server configuration or you are doing something wrong. In both cases it's something that I can't control and like I said, I can't help.
I have copied it and recopied it many times. I know I'm not doing anything wrong because it was working fine before you changed the code but since you changed it, the script no longer works.
Thanks for this code, it works perfectly now.
Thanks again !
yes it works
So often now they are edited out anyway. If you are going to use a watermark make you use a small one and tile it across the image … this will make it much harder to remove.
an example of a poorly watermarked image: http://ingimage.com/imagedetails/42016523_extInt0/02E93536-Ingimage-Businesspeople-over-an-empty-white-board.html
working very good.
Thanks
Thank you.
That was a great help.
thank you so much
Thanks for the inspiration, you put me on the right track to fulfilling my needs.
Instead of using a watermark image I used a True Type Font and, through trial and error, got the rewriting figured out for an IIS(7) server.
Details at: http://phaethon.net/photobkk/index.php/watermarking/