I’m working on a Flash/AS3 application where I am loading various types of files (images, xml, etc). After writing the same code over and over again, I decided to create an AS3 class to use with my application. This class will load image, swf, text, xml, html, stylesheet, json, and sound files.

Read the rest of this entry »

I have recently discovered two ways to use CSS to place one image on top of another. I am working on a photogallery management plugin (JQuery) and I wanted to add an delete image to the bottom right of each thumb image. The user will be able to click on the delete image to delete the thumbnail. The image below displays how I want the thumbnail to appear:

<img class="alignnone" title="Delete Example" src="http://grasshopperpebbles.com/images/posts/delete_example.png" alt="" width="118" height="85" />

The key to both approaches is to place the first image as a background image of a container.

.thumb {
     float:left;
     width: 100px;
     height: 100px;
     background:url(images/thumbs/pic1.jpg);
}

My first approach for styling the second image was to set the ‘background-position’ to ‘bottom right’.

.thumbDelete {
     width: 100px;
     height:100px;
     background:url(images/delete-24x24.png) no-repeat bottom right;
}

While this positioned the delete button where I wanted, because the dimensions are the same as the thumbnail image, the entire image became clickable (not just the delete image).

So my next approach was to float the delete image and set the margin-top to 50%:

.thumbDelete {
     float:right;
     width: 24px;
     height:24px;
     background:url(images/delete-24x24.png) no-repeat;
     margin-top:50%;
}

This placed the delete image on the bottom right (and only the delete image is clickable).

Creating the HTML is the same no matter which approach you take:

<div class="thumb">
<div class="thumbDelete"></div>
</div>

Easy enough.

I am working on an image upload plugin that uses JQuery. I am using PHP on the backend. I have found that there are multiple ways to use PHP to get the file extension of an image.

PathInfo

PathInfo is probably the most common way get information about a file.

$path_parts = pathinfo('http://grasshopperpebbles.com/photogallery/thumbs/pic1.png');
echo $path_parts['dirname']; //output: http://grasshopperpebbles.com
echo $path_parts['basename']; //output: pic1.png
echo $path_parts['extension']; //output: png
echo $path_parts['filename']; //output: pic1

GetImageSize

Although I have used PHP’s getimagesize to get the dimensions of an image, it can also be used to get other information (to include the file type):

list($width, $height, $type) = getimagesize('pic1.png');
echo $type; //output: png

End

Recently, I stumbled upon a new way to get the file extension:

$file_name = current(explode('.', 'pic1.png'));
$ext = end(explode('.', 'pic1.png'));
echo $file_name; //output: pic1
echo $ext; //output: png

I’m sure there are other ways to use PHP to get the file type as well.