Como agregar una marca de agua a las imágenes en WordPress

Hace unos días me encontraba creando (que se note que no digo diseñando porque NO SOY diseñador) la web de una discoteca, para la que use WordPress como para casi todas las webs que armo, ya que lo encuentro sumamente flexible para crear cualquier tipo de sitio, no solo blogs.

En ese momento me surgió la inquietud de agregarle una marca de agua a las fotos de la disco. para de esta forma reforzar la marca y evitar plagios y difusión de las fotos en redes sociales, ya que en muchas de ellas (la mayoría) aparecerían rostros de personas. Probé varios plugins para WordPress pero ninguno me satisfizo, así que decidí que lo haría sin usar plugins. Luego de buscar alternativas y algunos códigos (tampoco soy programador), me encontré con que tenía dos maneras de lograr “imprimirle” marcas de agua a las fotos, sin contar claro esta, las alternativas offline como Photoshop y otros softwares específicos para esta tarea. Las dos alternativas eran:

1.- Modificar la foto original agregándole la marca.

2.- Dejar intacta la foto original y superponerle la marca solo cuando es necesario.
W Lounge Tacuarembo

Por algún motivo me decidí por este último método que encontré en wpglamour.com, aunque luego Martín me explicó que era mucho mejor el primero, aunque tuviera que duplicar las fotos en el servidor para no perder las originales intactas, así que supongo que mas adelante cambiare el método y estaré publicando la nueva solución por aquí.

Superponer marca de agua

Debemos tener acceso al servidor donde esta hosteado nuestro blog, para poder editar en primer lugar el archivo .htaccess al que debemos agregarle la siguiente línea:

RewriteRule ^(.*)wp-content/uploads/(.*) $1watermark.php?src=wp-content/uploads/$2

Para que quede de esta forma:

# BEGIN WordPress
<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>
# END WordPress

Lo que hace esa línea agregada al .htaccess es que cada vez que una imagen es llamada para mostrarse en el navegador, va a redireccionar ese llamado al archivo watermark.php que crearemos a continuación y que sera el encargado de superponer la marca de agua. En la raíz de nuestro sitio, en el mismo directorio donde estan wp-admin, wp-content, wp-config.php, creamos un archivo llamado watermark.php con el siguiente contenido:

<?php
$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);
?>

Una vez llegamos a este punto, debemos crear la marca de agua que queremos superponer, esto es muy fácil de hacer en Photoshop por ejemplo, por lo que no diré como hacerlo, tengan en cuenta hacerla lo suficientemente opaca como para que no sobresalga demasiado, pero que tampoco pase desapercibida.
Cuando tengamos pronta la imagen, la subiremos también a la raíz de nuestro blog, con el nombre watermark.png, y también debemos crear y subir, una imagen transparente de 1px x 1px con el nombre de empty.png

ESO ES TODO!! Cada vez que alguien solicite ver una imagen, esta se verá con la marca de agua superpuesta, y funciona incluso con el link directo a la imagen o sea que de esta forma quienes nos hagan hotlink de las fotos, se las llevaran con nuestra marca incluida ;)

  • http://www.enlazandoweb.com Hispania

    Ostia muy bueno, lo pongo en mis favoritos :D

  • http://fedelosa.com Fedelosa

    Me alegro que te haya servido :D Luego nos cuentas si lo implementaste.

    Saludos!!!

  • http://www.enlazandoweb.com Hispania

    Hola de nuevo,
    lo he intentado colocar en local pero no me funciona. Debo decir que mi instalación en local no disponía de un archivo htacces y lo he tenido que crear yo, pero aún poniendo un archivo nuevo y subiendo todos los archivos que ofrecen desde la web wpglamour a la que haces referencia no me funciona. No se si es por que en una instalación en local no sirve y debo hacerlo en una instalación de hosting, pero no se si atreverme. ¿ Me puedes indicar algún paso a seguir o me arriesgo a ponerlo todo en la instalación buena ?

  • http://www.enlazandoweb.com Hispania

    Lamento molestarte otra vez pero te comento algunas cosas después de probar a ponerlo en el hosting donde tengo instalado el blog, no en local como he hecho antes. Ahora si que muestra la marca de agua pero la muestra en las entradas del blog no cuando se obtiene el enlace. Yo creía que la marca de agua solo sería mostrada cuando alguien cogiera la url de la imagen y la colocara en otro sitio pero veo que no es así ¿ o estoy yo equivocado ?

  • noneoriente

    amigo funcionar funciona pero el problema es que me pone la marca de agua asta en el logo de mi web jejejej saves alguna solucion

  • http://fedelosa.com Fedelosa

    Efectivamente como tu dices, muestra la marca de agua cada vez que se muestra una imagen, yo no se mucho de programación, pero supongo que no debe ser difícil de modificar para que muestre la marca solo cuando la imagen es llamada de otra dirección, y no del localhost. Es mas, eso se tiene que poder lograr desde el .htaccess, voy a ver si alguien puede ayudarnos con esto :)

  • http://fedelosa.com Fedelosa

    Lo mismo que respondí arriba, supongo que desde el htaccess podes definir a que imágenes no agregarle la marca, mas allá de eso, te diría que el logo de la web no lo pongas en la misma carpeta donde guardas todas las imágenes que subís, es un blog el tuyo?

  • http://bitacoras.com/anotaciones/como-agregar-una-marca-de-agua-a-las-imagenes-en-wordpress/9053736 Bitacoras.com

    Información Bitacoras.com…

    Valora en Bitacoras.com: Hace unos días me encontraba creando (que se note que no digo diseñando porque NO SOY diseñador) la web de una discoteca, para la que use WordPress como para casi todas las webs que armo, ya que lo encuentro sumamente flexibl…..

  • gaston

    pa loco muy buena idea!!!

  • Estebanheinzen

    Buenos días Fedelosa!

    Disculpa la ignorancia, pero no puedo localizar en el sevidor el archivo .htacces

    Puede ser que se llame de otra forma? (tengo instalado wordpress 3.1)

  • Ya

    Hola, esto funciona muy bien, perp como hago para quitar la marca de agua del logo de la web???

    Gracias