Allow right click & save picture, but gets a file of one pixel?

[theK]

Hi,

I have noticed how some websites allow us to right click and save pictures, but when we open those files on our computers, they are just made of one pixel. In other words, we can not really save those images. As an example, try saving one of the pictures on http://www.forumkamera.com . You'll just end up with a one-pixel file called spacer.gif.

Now I understand that there is no way to completely prevent users to access our pictures that are published on the Web, since they are stored in these users' caches. But the feature I mentioned in the previous paragraph is pretty useful to discourage newbies from saving our pictures.

I have searched through this forum for topics on this with no luck. I did find lots of discussions on disabling right-clicking. I apologise beforehand if I may have missed a thread on this topic. I have tried different single and combinations of key words with no luck.

Does anyone know how to incorporate this feature into Coppermine? What code is there to add/modify? Thanks in advance.

[Tranz]

hmm... maybe they were using layers. The spacer.gif file would be in a layer existing on top of the image. It was probably set to fit the size of the protected image.

[Casper]

I think I remember some discussion on using one of the watermark hacks to do this, but it was some time ago, and I can't really direct you more than that.

[theK]

TranzNDance & Casper, thanks for the quick replies.

Unfortunately, I am not familiar with layers, TranzNDance. Is this the only way to do it? And is there anyone else out there that can shed some light onto this matter?

[biff]

This should work:

Say you have an image called mypic.jpg (100x200 px) that you want to protect, and a 1x1 transparent pic called spacer.gif:

Code Select Expand


<div style="width:100px; height:200px; background: url(mypic.jpg);">
<img src="spacer.gif" width="100" height="200" />
</div>


This creates a div with a background of the image you're protecting, and a transparent image completely covering it. When the user tries to save image they save the transparent gif instead because thats what they're really clicking on. Use a 1x1 gif and stretch it to the image size so the gif will be small and won't use up much bandwidth.

Note: you would need to add this somewhere in the CPG code. I'm not sure about that part.

[Joachim Müller]

in displayimage.php, find

Code Select Expand

            $pic_html .= "<img src=\"" . $picture_url . "\" class=\"image\" border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" /><br />";
            $pic_html .= "</a>\n";
        } else {
            $pic_html = "<img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" /><br />\n";and replace the image tag (twice, both for pic with and without pop-up) to modify the intermediate pic. To modify the full-screen, find

Code Select Expand

        echo "<a href=\"javascript: window.close()\"><img src=\"" . path2url($picname) . "\" $imagesize[3] class=\"image\" border=\"0\" alt=\"\" title=\"$picfile\n" . $lang_fullsize_popup['click_to_close'] . "\"/></a><br />\n";in displayimage.php and modify accordingly.

This has discussed in the dev team section of the board and may go into future versions of coppermine as admin settable option.

Joachim

[theK]

GauGau,

Thanks for the detailed reply. This feature would be great if implemented in future versions.

A question regarding the modification: What do we actually replace the image tag with, GauGau? Do we replace it with

Code Select Expand

<img src="spacer.gif" width="100" height="200" />
as posted by biff? I am a total newbie in PHP, so please bear with me. I've only got C under my belt.
Thanks in advance.

[theK]

GauGau,

I forgot to ask, can we turn this feature on for thumbnails as well? If yes, could you point me to the right direction as to which part of displayimage.php I should edit? Thanks again.

[biff]

You could replace it with that code. You need to remember a few things though:

- the widths and heights I used were just for example, you'd need different values based on the image being loaded.

- you need to use a div, or a table or something, to show the real image as a background. Otherwise you'll just see an empty space. So you need to change more than just the img code.

Do note, that using this method you won't be able to see the image while it is loading. Backgrounds do not show untill the image has completely been downloaded.

[theK]

Thanks for the further details, biff.

Since I am a total newbie in PHP (Just started reading the PHP manual from php.net. The keyword is 'just'), I am really clueless with what to replace the code with. I don't know what the global & dynamic variable is for my pictures, to replace the code below. I'm not familiar with PHP syntax yet, and I've tried replacing it with $pic_url, pic_url, and got parse errors.

Code Select Expand

background: url(mypic.jpg)

I was hoping someone would copy and paste the complete actual replacement code for the parts that GauGau mentioned.

I just want to get my site up and running and start posting pictures with sufficient picture theft prevention methods such as this one, and start learning the details of PHP scripting afterwards.

[kiig]

a different approach be to include this code in your template.html files, - in your selected themes catalogue.

Code Select Expand

var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
if (ns4up) {document.captureEvents(Event.MOUSEDOWN)}
document.onmousedown=taste;


function taste(e) {
if (ns4up) {z=e.which}
if (ie4up) {z=event.button}
if (z>1) {
alert ("Læs vejledningen til bestilling af billeder\npå forsiden af Foto.igel.it,\neller send en mail til fotograf@igel.it\nKim Igel.")
return false
}
}
// end -->

Put it in from line 48, - that is,  AFTER the function Readform.

The 'alert' text in the above code, - get's displayed when someone rightclicks.


Kim Igel

[theK]

a different approach be to include this code in your template.html files, - in your selected themes catalogue.
...
The 'alert' text in the above code, - get's displayed when someone rightclicks.

Kim Igel

Thanks for the suggestion, Kim.
I am aware of the option to prevent right-clicking by popping up an 'alert' text. But there are ways around this particular theft-prevention, being the F10 button, and pressing Enter.

Plus, right-clicking is not only done to save pictures. A lot of users use right-clicking as part of their website-navigation habit (e.g. opening the links on new window). I personally prefer the 'masking' of pictures by a transparent file stretched out to cover the actual image.

There must be someone out there who knows what the replacement code should be, and I would be very thankful if he/she would share the knowledge on the matter. I love this program, and I will contribute to this forum once I get the hang of PHP and other related technologies/tools that Coppermine utilises.

[theK]

Okay, I've read most of the PHP documentation on syntax and string, but I have not quite understood some parts of the code that GauGau posted.

I went over to the 4images forum, and I found the exact feature I need on 4images:
Edit a theme/template's file called jpg.html in your_template/media/ folder, by replacing

Code Select Expand

<img src="{media_src}" border="1" alt="{image_name}"{width_height} />
  with

Code Select Expand


<table style="background: url({media_src}) no-repeat; background-position: center center" cellpadding="0" cellspacing="0">
 <tr>
   <td><img src="{template_url}/images/spacer.gif" border="1" alt="{image_name}"{width_height} /></td>
 </tr>
</table>


I hope that by posting 4images' solution will give some idea to Copperminers that have better knowledge on CM's script, to help me implement this feature on CM.

@GauGau: It'd be great if you could clarify on what to replace the parts of displayimage.php that you mentioned with. Thanks in advance.

[Joachim Müller]

Replace

Code Select Expand

            $pic_html .= "<img src=\"" . $picture_url . "\" class=\"image\" border=\"0\" alt=\"{$lang_display_image_php['view_fs']}\" /><br />";
            $pic_html .= "</a>\n";
        } else {
            $pic_html = "<img src=\"" . $picture_url . "\" {$image_size['geom']} class=\"image\" border=\"0\" /><br />\n";with

Code Select Expand

            $pic_html .= "<div style=\"width:100px; height:200px; background: url(".$picture_url.");\" title=\"{$lang_display_image_php['view_fs']}\"><img src=\"images/spacer.gif\" {$image_size['geom']} border=\"0\" alt=\"\" /></div><br />";
            $pic_html .= "</a>\n";
        } else {
            $pic_html = "<div style=\"width:100px; height:200px; background: url(".$picture_url.");\" title=\"{$lang_display_image_php['view_fs']}\"><img src=\"images/spacer.gif\" {$image_size['geom']} border=\"0\" alt=\"\" /></div><br />\n";(Not tested though).

Joachim

[theK]

You the man, GauGau! 

Thanks to your code which is correct syntax-wise, I managed to get it working.
Just had to change both width and height to 100%.

After my first try, I found out that my picture is either cropped or multiplied. Note that my installation involves disabling pop-up, and just showing the image in its original size.
I studied the related compute_img_size function in functions.inc.php and how it affects the image_size['geom'] variable, and concluded that the following settings in Config need to be applied in order for this modification to work:

1. Set 'Use dimension ( width or height or Max aspect for thumbnail )' to 'Max'.

2. Make sure that the 'Max width or height of an intermediate picture/video' value is bigger than the longest side of your uploaded picture's dimension. For example, I only upload pictures that are only as large or smaller than 400x600, so it's safe to set the setting to 600 or above.

I hope this helps Copperminers seeking to implement this feature into their installation.

Thanks a bunch, GaoGao. I guess you can mark this thread as 'Solved' now.

[Joachim Müller]

you should change//add the css attribute of the background image to background-repeat:no-repeat. Glad to hear you were able to solve this.

Joachim

[theK]

you should change//add the css attribute of the background image to background-repeat:no-repeat. Glad to hear you were able to solve this.
Joachim

Thanks for the tip, GauGau.

Just a note to the others: I found that by entering the Slideshow mode, the pictures can still be right-clicked and saved. I think it will take some more tinkering with the code to
modify it just like what we did with the original picture. I'll probably try it later, but right now I just disable the Slideshow button.

[Joachim Müller]

that's a bit I forgot to mention: you will need to modify the slideshow as well - shouldn't be too hard, works the same way the above modification works.

Joachim

[theK]

I don't know whether I should start another new thread for this. I know the rule about one question/topic per thread, but since this post is related to the original topic, I am posting it here. (@moderators: just move it to a new thread if you judge so).

Basically, it's about implementing the 'masking' (i.e. allow user to right-click & save, but he/she will only get 1x1 pixel file) feature on Slideshow.

GauGau, this is what I tried (which has not worked yet):

- With slideshow enabled, i tried replacing the following in displayimage.php, within the slideshow() function:

Code Select Expand


   $params = array('{CELL_HEIGHT}' => $CONFIG['picture_width'] + 100,
       '{IMAGE}' => '<img src="' . $start_img . '" name="SlideShow" class="image" /><br />',
       '{ADMIN_MENU}' => '',
       );

with:

Code Select Expand

   $params = array('{CELL_HEIGHT}' => $CONFIG['picture_width'] + 100,
       '{IMAGE}' => '<div style=\"width:100%; height:100%; background: url(".$start_img.") no-repeat;\" title=\"{$lang_display_image_php['view_fs']}\"><img src=\"images/spacer.gif\" {$image_size['geom']} border=\"0\" alt=\"\" /></div>',
       '{ADMIN_MENU}' => '',
       );

I traced the origin of $start_image, and found that it is assigned to $picture_url in slideshow.inc.php. It looked ok up to this point. I thought I could just paste your code, and replace $picture_url with $start_img.

But when I tried running the slideshow, I got a parse error. Something to do with expected ')'. I don't know where the source of this error is.

Any tips/hints, GauGau? Thanks in advance.

[Zeitgeist]

Thanks to your code which is correct syntax-wise, I managed to get it working.
Just had to change both width and height to 100%.

Though, some of my galleries have different sized images so it does not work even when setting width and height to "100%"