Viewing posts from 2012

Thumbnail Creation via PHP

I got a bit tired of numerous security holes and sheer bulkiness of other thumbnail generation scripts, so decided to build my own from scratch, for local images only. Simply upload, create a writable cache directory and parse the image through the PHP script like so:

<img src='thumb.php?src=./images/photo.jpg&size=400x300' />

It's super simple and only 155 lines in total. You can specify the width and height, or just the width so the height will get calculated automatically and vice versa. It also allows you to set a maximum width/height, which is best suited for photo thumbnails.

Features:

  • File based cache
  • Automatic deletion of expired cache files
  • Optional browser based cache via the IF_MODIFIED_SINCE HTTP header
  • Multiple size types
  • Options whether to crop, trim, zoom and set alignment
  • Set sharpness based on a percentage midpoint between two values, so you can specify the strength of the sharpness rather than just turning it on or off

View the code and usage instructions on Github

18-Jul-2012 at 1:00pm

JavaScript Markdown Helper

What I love about Markdown is the simplicity of it, not needing to mess around with those rich text editors, all it needs is a standard plain old textarea. The annoying thing is when inputting code or creating lists, it doesn't preserve the indentation or list prefix when starting a new line.

So, I built my own Markdown helper script which when you hit the return key, it checks to see if the line is a bullet, numbered list, code block or blockquote and automatically indents and adds the Markdown syntax. If you hit return again on an empty line, it will remove that item and return to regular paragraph text.

JavaScript Markdown Helper

It's a pretty lightweight script that's super easy to use, just include the JavaScript file and call the function via onKeyPress() on the textarea. Tried and tested in the usual Firefox 11, Safari 5, Chrome 18 and Internet Explorer 6 onwards.

You can view the working example or view the code on Github.

Toggle Switch Using a PNG Overlay

I was in need of a more robust and cross browser compatible toggle switch, so I though I'd approach it in a different way than your usual CSS3 switches.

My solution uses a semi transparent PNG overlay for the rounded rectangle, with an inner image which animates from left to right, and vice versa. The toggle can be triggered by either clicking the switch, or the accompanying label.

Toggle Switch

The result is a jQuery powered, checkbox based toggle switch that looks and functions the same in most browsers, even IE6. It also has retina images for any iDevices that support them.

You can view the working example or view the code on Github.

Minecraft Avatar via PHP

Here's a little something I built for fun a while back, when I was more active on Minecraft. I wanted a real simple way to generate a user's Minecraft avatar from their skin, and be able to display at any size.

Minecraft Avatar

It's as easy as this to use:

<img src='face.php?u={username}&s={size}' />

What the script does is grabs their skin from the Minecraft server, copies the face and facial accessories only and merges them into an 8 x 8 image, then resizes to the specified size. If the username does not exist, then it uses the default skin, which is stored in a base64 encoded variable to save an extra cURL request.

View the code on Github

23-Feb-2012 at 4:21pm