GoFuckYourself.com - Adult Webmaster Forum - CSS gurus inside please....watermarking with css

GoFuckYourself.com - Adult Webmaster Forum (https://gfy.com/index.php)

- Fucking Around & Business Discussion (https://gfy.com/forumdisplay.php?f=26)

- - CSS gurus inside please....watermarking with css (https://gfy.com/showthread.php?t=952457)

Oracle Porn

02-07-2010 09:01 AM

CSS gurus inside please....watermarking with css

im trying to watermark some thumbs

Code:

 a img{

        border: 1px solid #000000;

        width: 240px;

        height: 180px;

          background:transparent url(play.png) bottom right no-repeat;

it works but the only problem is that my original thumb i want to watermark is OVER the play.png instead of UNDER it, anyone knows what i need to add? searching google for too long now :(

thanks

grumpy

02-07-2010 09:06 AM

make your image the background, put the watermark over it as a thumb

SmellyNose

02-07-2010 09:10 AM

Quote:

Originally Posted by grumpy (Post 16822465)

make your image the background, put the watermark over it as a thumb

!rucnoc I

Va2k	02-07-2010 09:13 AM

Yea what grump said! :)

quantum-x

02-07-2010 09:15 AM

SmellyNose

02-07-2010 09:17 AM

Or, if your server is linux, you could use 'composite' to make a watermarked version. I'd go with this approach because if you just use CSS people can download the original image anyway.

Code:

composite -gravity southeast -dissolve 15 watermark.jpg original.jpg watermarked/original.jpg

Or, you could do something like this (untested):

Code:

for file in `ls images/*.jpg`; do composite -gravity southeast -dissolve 15 watermark.jpg $file watermarked/$file; done

Oracle Porn

02-07-2010 09:17 AM

shit that would be impossible :( no way around it?

Oracle Porn

02-07-2010 09:19 AM

Quote:

Originally Posted by AdultStoriesNow (Post 16822487)

Or, if your server is linux, you could use 'composite' to make a watermarked version. I'd go with this approach because if you just use CSS people can download the original image anyway.

Code:

composite -gravity southeast -dissolve 15 watermark.jpg original.jpg watermarked/original.jpg

Or, you could do something like this (untested):

Code:

for file in `ls images/*.jpg`; do composite -gravity southeast -dissolve 15 watermark.jpg $file watermarked/$file; done

since these are thumbs that watermark is just a "play button", i have no need to hard watermark it. thanks for this anyway, worse come to worse ill do it.

SmellyNose

02-07-2010 09:24 AM

Or if your site is in PHP you could do something like this:

Code:

$base_dir = getcwd(); // meh

$f_file = $base_dir . $file;

$w_file = $base_dir . "/watermarked/".$file;

$water_file = $base_dir.'watermark.png';



$file = $_GET['file']; // Add security measures

header("Content-Type: image/jpeg");



if(!file_exists($f_file)) {

   readfile($base_dir . "invalid_image.jpg");

   exit;

}



if(!file_exists($w_file)) {

   readfile($w_dir);

   exit;

}



//Borrowed from http://articles.sitepoint.com/article/watermark-images-php as this is in a quick reply box so won't be writing new code as this is an example/idea :P



$watermark = imagecreatefrompng($water_file);

$watermark_width = imagesx($watermark);  

$watermark_height = imagesy($watermark);  

$image = imagecreatetruecolor($watermark_width, $watermark_height);  

$image = imagecreatefromjpeg($f_file);

$size = getimagesize($f_file);  

$dest_x = $size[0] - $watermark_width - 5;  

$dest_y = $size[1] - $watermark_height - 5;  

imagecopymerge($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, 100);  

imagejpeg($image);  

imagedestroy($image);  

imagedestroy($watermark);



//Some code here to put the watermarked image into $base_dir . 'watermarked/'.$file so the image is cached for next time

SmellyNose

02-07-2010 09:27 AM

Ahhhh. If that's the case then the background-image being the actual thumb is best. Why can't you do that?

calmlikeabomb

02-07-2010 09:52 AM

It's called using the z-index and it only works when elements have a set position type.

Also, it's pointless and you should be using PHP or another language/software to create images with real water marks.

Oracle Porn

02-07-2010 09:54 AM

Quote:

Originally Posted by AdultStoriesNow (Post 16822503)

Or if your site is in PHP you could do something like this:

Code:

$base_dir = getcwd(); // meh

$f_file = $base_dir . $file;

$w_file = $base_dir . "/watermarked/".$file;

$water_file = $base_dir.'watermark.png';



$file = $_GET['file']; // Add security measures

header("Content-Type: image/jpeg");



if(!file_exists($f_file)) {

   readfile($base_dir . "invalid_image.jpg");

   exit;

}



if(!file_exists($w_file)) {

   readfile($w_dir);

   exit;

}



//Borrowed from http://articles.sitepoint.com/article/watermark-images-php as this is in a quick reply box so won't be writing new code as this is an example/idea :P



$watermark = imagecreatefrompng($water_file);

$watermark_width = imagesx($watermark);  

$watermark_height = imagesy($watermark);  

$image = imagecreatetruecolor($watermark_width, $watermark_height);  

$image = imagecreatefromjpeg($f_file);

$size = getimagesize($f_file);  

$dest_x = $size[0] - $watermark_width - 5;  

$dest_y = $size[1] - $watermark_height - 5;  

imagecopymerge($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, 100);  

imagejpeg($image);  

imagedestroy($image);  

imagedestroy($watermark);



//Some code here to put the watermarked image into $base_dir . 'watermarked/'.$file so the image is cached for next time

thanks ill try it, i can't edit that actually page but only the css header and footer (not actually content aka thumbs)...thats the script i use :(

SmellyNose

02-07-2010 09:56 AM

Quote:

Originally Posted by Oracle Porn (Post 16822561)

thanks ill try it, i can't edit that actually page but only the css...thats the script i use :(

What does your HTML and CSS look like?

Might be able to come up with something if we can see the layout of the HTML.

Though, I definitely think you should edit the script you're using and do it by setting your image to the background image, and using the thumb image in <img src=''> :thumbsup

MetaMan

02-07-2010 10:00 AM

position: relative;
z-index: 0;

then for the overtop

position: relative;
z-index: 1;

then just use margin to adjust it over top of the thumb.
i suggest putting both inside a div.

fris	02-07-2010 10:03 AM

unless you are trying to do a hover effect, then best way it just to watermark it automatically.

here is an example of a play button on hover.

http://cssglobe.com/post/1238/style-your-image-links

Oracle Porn

02-07-2010 10:18 AM

Quote:

Originally Posted by fris (Post 16822579)

unless you are trying to do a hover effect, then best way it just to watermark it automatically.

here is an example of a play button on hover.

http://cssglobe.com/post/1238/style-your-image-links

looks like this will be the only thing that will work, what i was originally looking for is the inverted version of this script, to always show the play button and on hover make it disappear.

mafia_man

02-07-2010 11:54 AM

Z-Index is the solution to what you are asking but it's not a good idea to watermark using CSS as people can still easily steal your photos.

Imagemagick is a tool you can use to watermark images on-the-fly either during upload or delivery.

Oracle Porn

02-07-2010 12:08 PM

z-index didn't seem to work cuz i cant edit actual html. the java posted above works, i need to invert it somehow.

MetaMan

02-07-2010 12:19 PM

no z-index does work you just have no idea to explain your problem. we dont speak jew here.

quantum-x

02-07-2010 01:03 PM

Quote:

Originally Posted by calmlikeabomb (Post 16822557)

You're an idiot.

Mutt	02-07-2010 01:26 PM

the problem with using the thumbnail as a background image is that it is unclickable no?

i don't see the problem using CSS to add a watermark -look at all the TGP's that use CSS to add a little 'NEW' graphic on top of their thumbnails.

Oracle Porn

02-07-2010 01:55 PM

Quote:

Originally Posted by MetaMan (Post 16822860)

no z-index does work you just have no idea to explain your problem. we dont speak jew here.

ofcourse z-index works, just not with this problem
like i said i can not edit html itself only the css

here is the html code

Code:

                                        

<div class="img">

<a   target='_blank'   href="http://www.link.com"><img src="thumb.jpg" width="240" height="180" id="thumbs4" name="thumbs4" alt="video" /></a>

</div>

Oracle Porn

02-07-2010 01:56 PM

Quote:

Originally Posted by Mutt (Post 16823380)

since its just a background i guess the original thumb with a link under it should work

JD	02-07-2010 02:59 PM

not being able to edit the html sucks :/ why cant you edit it btw?

Deej	02-07-2010 03:38 PM

Quote:

Originally Posted by MetaMan (Post 16822575)

position: relative;
z-index: 0;

then for the overtop

position: relative;
z-index: 1;

then just use margin to adjust it over top of the thumb.
i suggest putting both inside a div.

Quote:

Originally Posted by MetaMan (Post 16822860)

no z-index does work you just have no idea to explain your problem. we dont speak jew here.

completely awesome and the new avatar is totally freakin me out

Oracle Porn

02-07-2010 04:35 PM

thanks everyone for the help, i figured it out with the javascript fris posted :)

bns666

02-08-2010 05:29 AM

Quote:

Originally Posted by fris (Post 16822579)

unless you are trying to do a hover effect, then best way it just to watermark it automatically.

here is an example of a play button on hover.

http://cssglobe.com/post/1238/style-your-image-links

:thumbsup :thumbsup for this, read this post exactly when i needed it.

designerscode

02-08-2010 06:09 AM

Quote:

Originally Posted by mafia_man (Post 16822771)

This guy is right, you may be able to watermark but knowledgeable ones know how to steal from under your nose... and its spotless too haha

TheDA

02-08-2010 07:22 AM

Quote:

Originally Posted by designerscode (Post 16825505)

This guy is right, you may be able to watermark but knowledgeable ones know how to steal from under your nose... and its spotless too haha

You are also right but he's not watermarking to stop people from stealing his images :)

All times are GMT -7. The time now is 11:01 PM.