Very interesting things  Blog RSS Feed

Flickr API and PHPFlickrJuly 11 2008

Flickr API and PHPFlickr

The last few days I've been working with the Flickr API. It is really exciting and the options are limitless. With the API Flickr really opens up a whole world of photography to your hands.

I am using PHPFlickr which is a PHP class that integrates all the flickr API functions and it just works.

Imagine the possibilities? You can have a whole photo sharing site using a small server using very little bandwidth and a few kilobytes of html. I will be posting here updates soon.


Article listed in "Tutorials"

Bookmark and Share

No comments




Protect photos with PHP and .htaccessApril 14 2008

Protect photos with PHP and .htaccessFor sometime now I was looking for a way to protect my photos from been downloaded from my site without my permission. I also wanted to make sure that no images from this site would be hot linked.

There are several methods that can be used to accomplice that. Some people suggest using javascript to disable right clicking of course this is absolutely useless for anyone that has the slightest knowledge of web design as it's very easy to copy the image url from the document source. Others suggest resizing images small enough so they won't be worth copying but again this is no good when have a web gallery showcasing your photos.

The solution to this issue comes by apache and php. Using .htaccess we can disallow access to any folders and prevent hot linking while with php we can easily create a script that resizes the photos and adds a watermark.

Apache .htaccess
This is the easy part:

# Enable mod_rewrite, start rewrite engine 
Options +FollowSymLinks 

RewriteEngine on

RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)? [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ [NC,R,L]

We create a file called .htaccess it is very important to add the dot in the beginning and place it on the root of our site. First we enable the Apache rewrite engine and then we use two different lines of code.

RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)? [NC]

This tells Apache which is our domain and that it should allow photos to be displayed if the referrer is this domain.

RewriteRule \.(jpg|jpeg|png|gif)$ [NC,R,L]

The second line says that if anyone requests any image type file but the referrer is not our website then display a small image called forbid.jpg instead of the original image

That's it really no one can access our photos by typing the url on the browser and no one can hot link our photos on their website.

PHP watermark.php
This is a simple php script which takes an image and places another image on top of it as a watermark. The good thing with it is that we can upload our original photos on the server unmodified and the server will do all the work for us.
header("Content-type: image/jpeg");

    $source = imagecreatefromjpeg($src);

$watermark = @imagecreatefrompng('watermark.png');
$watermarkwidth =  imagesx($watermark);
$watermarkheight =  imagesy($watermark);
imagecopy($source, $watermark,  0, 0, 0, 0, $watermarkwidth, $watermarkheight);

The script calculates the with and height of our photo and then calculates the width and height of our watermark. Finally creates a new image by combining the 2 photos. In my case the watemark is my website name but it could be some lines or any other pattern that would prevent someone from copying the photo.

In our html we place a simple image tag with source: 


but we replace the link to the image with the watermark.php and the directory of the photo.

With this simple script our photos will be watermarked and because of the .htaccess configuration nobody can access the photos directly.

Of course all these techniques are preventing copying and stealing but in general we should never forget the rule that if we don't want something to be taken it's better to avoid adding it in a public space as the internet. It's also recommend that we resize and format our photos to a more web friendly format. It's always easier to protect a photo when it's too small to be printed.


Article listed in "Tutorials"

Bookmark and Share



User generated heatmapsJanuary 23 2008

For some days now I've been working on a way to capture the users clicks on an image or webpage and display them in a heatmap sort of way. An application like that could be applied in many different sectors. For example in market research or advertising it could be used to display what consumers find more interesting in an advert or in web optimization to find out where the users click most.

There are many other heatmap applications on the web that do a very good job but I haven't found anything that a)is free and b)is open-source. The one I created is a very simple application. It displays an image with an id of heatmap and then some simple javascript captured the position of the cursor at the time the user clicked on the image. Using the offset from the top of the page we can find the actual pixel on the image that the user clicked. The data are stored in a database table with 4 columns x, y, ximage and yimage. In the next page I retrieve these values and I place on top of the image some transparent span elements with absolute positioning.

The application definitely needs some tweaking. First and most important is to replace the spans with some fancy generated heatmap using gdlibrary since the transparent png don't work particulary well with ie. Another thing would be to add some kind of interaction with the user when he actually clicks on the image to show him that we have captured his selection.

I will work on it the next couple of days but you can try it and see the source code now using the link below.

User generated heatmap


Article listed in "Tutorials"

Bookmark and Share

1 comment




Time to give some creditAugust 2 2007

It has been a long process building this website and I have to admit that I wouldn't be able to add many off the features that you see without the help of many open-source products, so I think it is time I give some credits to all these people who have created them.

This website is build in lamp ([l]inux, [a]pache, [p]hp, [m]ysql). For my web hosting I use GoDaddy which is an excellent provider with very good prices and support. Behind the visible part of the site there is a cms (content management system) which is build in php and allows me to add new photos, newsitems etc. into the website without the need of FTP. Both the back-end and front-end of this site is created by me line by line using Dreamweaver however the cms is based on the Sloppyblog cms which I used as a guide.

The icons that you see in many parts of the web site are the gorgeous open-source icons Fam Fam Silk icons. In the home page there is a tabbed based feature box which allows you to see featured items without reloading the page. For the creation of these tabs I used library and I read this tutorial from Dynamic Drive.

In photography and web design sections there is a feature where you can click on an image and will display a larger version by darkening the screen without reloading the page. This was done by using the excellent Lightbox2 by Lokesh Dhakar.

Just today I added a shopping cart functionality by using php sessions and I implemented a checkout using Google Checkout. All the ads in this website are also provided by Google using Google AdSense.

Finally the contact form is based on Justin's Ajax Contact Form and the search is provided by Google.

This is a valid XHTML and CSS website which means that is created according to the web standards and should be visible by all modern browsers.

So that's it. I would like to apologize if I'm forgetting anyone or any software that helped me create this website.

Please feel free to browse around and maybe you can drop me a line if you have any questions



Article listed in "Tutorials"

Bookmark and Share