Image Cloaking ( how to protect images)

[crisppx]

"Cloaking: A lesser-known nifty trick is to cloak images behind a transparent gif. Place the original image on the page in a table or layer, then place a transparent GIF image the same size over the top. When users right-click the image they will save the transparent GIF and end up with nothing."

I was wondering if anyone has found a solution to protect images from other vendors, Since I took the time to photograph them myself, I would like them to put a link to my site, which they wont do unless they have to contact me for the images.


Thanks!

[archproject]

Yes,

I see what you mean ... it's like www.limesurvey.org try to right click the logo on the top left corner and then save it, you will be saving a blank.png

http://www.limesurvey.org/images/blank.png

Does anyone know how to do this ?

[crisppx]

I already know how to do it, but I would to know how can be done on presta shop for all product images!

[archproject]

Yes I also meant to have it on prestashop product images...

[MrBaseball34]

Yes,

I see what you mean ... it's like www.limesurvey.org try to right click the logo on the top left corner and then save it, you will be saving a blank.png

http://www.limesurvey.org/images/blank.png

Does anyone know how to do this ?

The img tag in the source code is like this:

Then the CSS for the logo img tag is like this:

img#logo {
   float:  left;
   margin-left: 38px;
   width: 469px;
   height: 150px;
   background: url(../images/logo.png) 0 0 no-repeat;
}

[MrBaseball34]

Yes I also meant to have it on prestashop product images...

I don't think you can do it without using an inline style because the links to the product image are dynamic.
But if you use an inline style, they can circumvent your cloaking by viewing source to find the actual image link.

It is not fool-proof, either. I was able to see the way they did it by viewing the source of their site.

[MrBaseball34]

Ok, one way you can do this is to get rid of the tag altogether in the product.tpl by making the image-block DIV have a background:

Then get rid of the tags below that.

You do essentially the same thing in product-list.tpl, you are adding the background to the anchor and removing the tag:

<!-- -->

While this may not fully keep them from getting to your images, it does stop right-click->Save Image As... efforts, for sure.

Hope this helps you

[crisppx]

do I have to replace this?

       {if $have_image}
getImageLink($product->link_rewrite, $cover.id_image, 'large')}" {if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox')}"{else} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" {/if} id="bigpic"/>
       {else}
name|escape:'htmlall':'UTF-8'}" />
       {/if}

[MrBaseball34]

Remove this part:

{if $have_image}
getImageLink($product->link_rewrite, $cover.id_image, 'large')}" {if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox')}"{else} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" {/if} id="bigpic"/>
{else}
name|escape:'htmlall':'UTF-8'}" />
{/if}

[Bankai]

Superb, will try.

Thank a lot.

[jdmorrisn]

Not sure if anyone is following this thread but I would like to do the same. But this went a little over my head.

I have to edit the product.tpl file with this:

in place of this:

{if $have_image} getImageLink($product->link_rewrite, $cover.id_image, 'large')}" {if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox')}"{else} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" {/if} id="bigpic"/>{else} name|escape:'htmlall':'UTF-8'}" />{/if}

Then what do I edit in the product-list.tpl?

[MrBaseball34]

I believe #6, #7, and #8 tell you how. I really can't be more specific.

[jdmorrisn]

For most of us who are trying to only run a business, a lot of this is rocket science. And we appreciate the efforts of those who go further and know more in programming. But because you understand it, doesn't mean the rest of us do. It's a common misunderstanding when trying to teach others, so clarity is the key. So it would help if you could be a little clearer, if not then I pass on this idea, but if so, then great.

1. In post#6 I copied your code - (written in the first box)
2. I replaced the code of the product.tpl (in post#8) with your code.

Result: My product page gets messed up (Using 1.3.1)

From your posts I understand that I have to do exactly the same thing in the product-list.tpl - but in this file, the code written in post#8 does not exist.

[MrBaseball34]

I will try to write a little tutorial to make it easier for non-programmers to do this.

[jdmorrisn]

That's really helpful, I look forward to it. Many of us will appreciate that for sure.

[MrBaseball34]

In product.tpl find line:

Change to:

delete these lines just below the line above:

{if $have_image}
getImageLink($product->link_rewrite, $cover.id_image, 'large')}" {if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox')}"{else} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" {/if} id="bigpic" width="{$largeSize.width}" height="{$largeSize.height}" />
{else}
name|escape:'htmlall':'UTF-8'}" />
{/if}

In product-list.tpl find line:

getImageLink($product.link_rewrite, $product.id_image, 'home')}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" width="{$homeSize.width}" height="{$homeSize.height}" />

And replace it with this:

getImageLink($product.link_rewrite, $product.id_image, 'home')}) 0 0 no-repeat;" alt="{$product.legend|escape:'htmlall':'UTF-8'}" >

You need to place a 1x1px transparent gif file in the /img directory.

[jdmorrisn]

Super, this is perfectly clear for us numpies.

But.. I copied exactly the code as you put (even did it 3 times over to make absolutely sure), I added a 1x1px transparent gif to the theme image folder - called blank (blank.gif - made in corel photopaint by making a file with no background/transparent and resizing to 1x1px) and when I test my page, the thickbox image of my product is not available for the customer to zoom in and I can still use 'save as' on the smaller image which saves correctly.

I am not sure what the problem is (I am using pS 1.3.1). I do not want to take up much of your time if it's a hassle?