Wednesday, 10 July 2013

Apply Watermark image into Product Image of Virtuemart

Problem: When Creating an shopping website, we would like to apply a watermark image - logo and website name - on every picture of products. It is seem easy by this way: use an watermark program to apply icon on product picture, then upload that picture on hosting. Take a long time if you have over 50 products.
I want to do this work automatically, It means watermark picture will be applied in to all picture (old and new) of website

Solve: I do this work on Joomla 2.5 and Virtuemart 2.0. But I think it is comfortable for every happen load and show Image.
  • Step 1: Create file .htaccess on folder contain image, with Virtuemart 2.0, this folder is <your_domain>/images/stories/virtuemart/product.
    RewriteRule ^(resized)($|/) - [L]
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} -f
    RewriteRule \.(gif|jpeg|jpg|png)$ watermark.php [QSA,NC]
  • Step 2: Create file watermark.php at same folder of .htaccess with content:

    <?php
    // watermark.php
    // Path the the requested file
    $path $_SERVER['DOCUMENT_ROOT'].$_SERVER['REQUEST_URI'];
    // Load the requested image
    $image imagecreatefromstring(file_get_contents($path));$w imagesx($image);$h imagesy($image);
    // Load the watermark image
    $watermark imagecreatefrompng('watermark.png');$ww imagesx($watermark);$wh imagesy($watermark);
    // Merge watermark upon the original image (centred)
    imagecopy($image$watermark, (($w/2)-($ww/2)), (($h/2)-($wh/2)), 00$ww$wh);
    // Send the image
    header('Content-type: image/jpeg');imagejpeg($image,null,95);
    exit();
    ?>
  • Step 3: Create an watermark.png with transparent background and upload to that folder.
Done.
Now you can test all image file in folder <your_domain>/images/stories/virtuemart/product have watermark if you call them on your website

Note: the code line RewriteRule ^(resized)($|/) - [L] in .htaccess file ensure that all thumbnail file in resized folder will be not watermarked. If you want to watermark on both thumbnail and large picture, you can remove that line

Demo


14 comments:

  1. Em chào anh. Cảm ơn anh vì bài viết. em đang dùng vm 2.0.22 và Joomla 3.0. e cài trên localhost, e làm theo hướng dẫn của a nhưng bị báo lỗi. ko nhận watermark. a có thể hướng dẫn cho e được k ạ?
    thanks anh. skype của em:phuongmark

    ReplyDelete
    Replies
    1. Bạn xem lại đường dẫn hình thư mục chứa hình ảnh của vm trên phiên bạn Joomla 3.0 nhé. Keyword của vấn đề này là "thư mục chứa ảnh product", bạn chỉ cần copy 3 file đã tạo như trên vào là sẽ được.
      Bạn cứ thử đi nhé.

      Delete
  2. Great and easy solution! It works fine!

    Thank you very much!

    ReplyDelete
  3. Hi, thank you for your post, but unfortunately it doesn't work for me.
    I am using Joomla 2.5 & VM 2
    My pictures do not show on VM (like it would be broken link)

    ReplyDelete
  4. Hi,

    works brilliantly. Thanks for that.

    Is it possible to have the watermark in a different position instead of the centre. Lower bottom would be good.

    Regards
    Brendan

    ReplyDelete
  5. Hmmm, This used to work perfectly for me but now for unknown reason I get permission access errors,

    You don't have permission to access /images/stories/virtuemart/product/watermark.php on this server.
    Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

    Any ideas ?

    Regards
    Brendan

    ReplyDelete
  6. Chao a
    E da gan vao
    Chay rat tot
    nhung load rat cham
    Cam on vi bai viet hay cua a

    ReplyDelete
  7. What if i want watermark only for created product thumbnails?

    Thank you

    ReplyDelete
  8. Hello, it is perfect but I have problem because some of my images have Unicode characters in their name.
    Can you make it support Unicode characters in images names?

    ReplyDelete
  9. can you show me 2 file demo of you .htaccess and watermark.php . please !

    ReplyDelete
  10. But in VirtueMart 3.2.1 dont work?

    ReplyDelete
  11. Doesn't work on VM 3.2.1 on php 7. Also product images on mine are in a different position than default (images/shop/product). Page loads fine but no image is shown at all. With such a simple solution, would be great if could work.

    ReplyDelete