Play with CSS3

If you saw our “ImageRoll” page and you used Firefox, Chrome or Safari then you saw the images being rotated in different angles well the way i did that is by using CSS3. I guess you already figured that out from the title.

CSS3 implements a lot of new features that can make your life easier of course you will not be able to use them quite yet. IE is not supporting like more than 90% of them so it’s useless if you want to make this for a client. The ones that we used on our blog are: box-shadow, border-radius and text-shadow. I think these are the most important of them but you can check all of them out by taking a look at this page: css3.info/preview/.

I’m gonna do a simple explanation on the ones we used and show you some code.

We used on the hrefs of the page this property:

-moz-box-shadow: 0px 2px 15px #333;

Now let’s explain. Why “-moz” in front of it? This is a simple hack for those who don’t know it. It tells the browser to render this only in mozilla based browsers. Next we have the property box-shadow and 0px means the top margin of the shadow, 2px means we move the shadow 2 pixels to the left and 15px
means we create a shadow with 15 pixels of size of blur if you want, #333 is of course the color of the box shadow. Pretty simple .

Now let’s rotate the images:

   -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);

You know -moz- already but we have a new one “-webkit-” this one means it will render in webkit based browsers, the most popular are: Safari and Chrome. Next we have the property “transform” and the degree of rotation “-10deg”.

The other one that we used all over the blog is text-shadow

text-shadow:1px 1px 0px #000;

This property is like this 1px means we move the shadow with 1 pixel from the top, 1 pixel from the left and 0 blur or size, #000 means of course the color of the shadow.

And here is a preview in 2 browsers IE and Firefox so you can see maybe you are not using a browser that supports CSS3.

Ie view

Firefox view

My imageroll page is inspired from this page: line25.com/tutorials/how-to-create-a-pure-css-polaroid-photo-gallery . Go and check it out .

Thank you and happy coding!

Cache Pic

As I said in my last post, I wanted from the first time to make a cacheing system for my imageroll page. Because i take the images from vi.sualize.us servers and we don’t want to make to much trafic and make stuff worse for them.

So what i did is simple, i made a class that extracts the rss data from theirs servers and get the images to display them. I do this every time someone visits the page. If any image is new for the first time we display the image from vi.sualize.us and run a functions in javascript to check for new images. If any new images exist then we cache them in a folder on our server and the next time a user visits the page that image will be shown from our server. Pretty simple.

For now i’ll just show you the stuff that makes this thing run and if you want i can share the whole script so that you can make one for your blog or website.

I’ll also try to make a WordPress plugin so you can integrate it easily in your blog.

So here we go. We start with the function that checks for new images:

functio checkCache($image_url){
            $path=pathinfo($image_url);
            $img_cached = 'cache/'.$path['filename'].'.'.$path['extension'];
            if(!file_exists($img_cached)) {
                createCacheImg($image_url);
            }
}

This function just checks if the image exists in the “cache” folder. If it’s not there then we run the “createCacheImg” function.

We now need a function to get the image so we check if the image is in the cache folder or not so we know what to display.

    function getImage($or_img) {
        $path=pathinfo($or_img);
        $filename=$path['filename'];
        $img_cached = 'cache/'.$filename.'.'.$path['extension'];
        if(file_exists($img_cached)) {
            $url=$img_cached;
        }else {
            $url=$or_img;
        }

        return $url;
    }

Very simple function that just returns the right url of the image.

Now we cache the image.

function createCacheImg($image){
        $srcsize = getimagesize($image);
        $w = $srcsize[0];
        $h = $srcsize[1];

        $path=pathinfo($image);
        $dest='cache/'.$path['filename'].'.'.$path['extension'];
        if($path['extension']=='jpg' || $path['extension']=='jpeg' || $path['extension']=='JPG') {
            $src_img = imagecreatefromjpeg($image);
        }else if($path['extension']=='gif') {
                $src_img = imagecreatefromgif($image);
            }else if($path['extension']=='png') {
                    $src_img = imagecreatefrompng($image);
                }
        $img_cpy=imagecreatetruecolor($w,$h);
        imagecopy($img_cpy, $src_img, 0, 0, 0, 0, $w, $h);
        if($path['extension']=='jpg' || $path['extension']=='jpeg' || $path['extension']=='JPG') {
            imagejpeg($img_cpy,$dest);
        }else if($path['extension']=='gif') {
                imagegif($img_cpy,$dest);
            }else if($path['extension']=='png') {
                    imagepng($img_cpy,$dest);
                }
        imagedestroy($src_img);
}

This function will save the image into the cache folder. Now we need a new file “checkcache.php” where we put this code:

include('functions.php');
$image=$_GET['image'];
checkCache($image);

Right now we should have this kind of structure in our imageroll folder: A folder “cache” a file “functions.php” where we place all these functions we just did and a file “index.php” where we run the javascript function and display the images.

The “index.php” file requires this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>

        <title>
            Image ROLL
        </title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">  google.load("jquery", "1.3.2"); </script>
    </head>
    <body>
<input type="hidden" id="image" value="http://test.com/image.jpg">
<img src="<?=getImage($image)?>" alt="test image"/>
</body>
</html>

We have here a simple index.php file that imports the google api and jquery so we can run a simple ajax function. This is the javascript code that you should insert in this file or a separate one if you want:

            $(document).ready(function() {
                checkCache();
            });

            function checkCache(){
                var page=$('#image');
                var url='checkcache.php';
                var pars='page='+page.val();
                $.get(url,pars);
            }

This will run this function after the page loads and it will check for new images. So this is just a simple script that will make you pages load faster expecialy if you load the images from outside of your server.

If you liked this i’ll go and make a more complex one and even share the imageroll script i did. That until i find the time and make a Wordpress Plugin.