Tag Archives: images

Handling File Uploads with PHP

Jul 17, 2012 by Matt | Posted in Coding, Featured 5 Comments

So you want to add a file uploader to your site. It’s quite easy to do with PHP, but first you must understand the inherent risks. You’re going to allow just anyone to take a file and put it on your server. That file could be anything. It could be an image like you may intend, or someone could get clever and try to upload a malicious PHP script, which could then be run when called by the appropriate URL. Or a user could upload larger files than you intended and waste your server’s storage space. (This is assuming you intend to have a public-facing uploader, of course. It’s less of an issue if its a back-end feature.)

Let’s start with the basics of setting up the form, and handling the uploaded file. Then we can tackle some of the security issues.

For the upload to work, you must add enctype="multipart/form-data" to your form tag. This signals that the POST request will contain upload data as well as the form field values.

Among fields you’ll need are a hidden field named MAX_FILE_SIZE, which tells the client not to accept a file over a certain number of bytes (300000, or 300 kilobytes, in this example) as well as the file upload field itself.

Continue reading →

Find an Image’s Dimensions and MIME Type with PHP

Jul 10, 2012 by Matt | Posted in Coding No Comments

What’s the easiest way to figure out the width and height of an image, as well as the format of the file, in PHP? Given that the existence of a core function for practically everything is one of the language’s strengths, it’s unsurprising that it’s pretty easy.

The getimagesize() function returns an array containing the width and height and the content type.

//Basic usage
$info = getimagesize($filename);
$width = $info[0];
$height = $info[1];
$format = $info['mime'];

//Alternate one-liner suggested by the manual
list($width, $height, $type, $attr) = getimagesize($filename);

This function is really useful for handling image uploads, since you can’t necessarily trust the MIME type that $_FILES reports. The function actually inspects the file to ascertain the type, rather than relying on what the client reports. Also, you may want to make sure that the uploaded images match the dimensions you have in mind.

Here’s how I like to handle it:

$imgdata = getimagesize($_FILES['image_upload']['tmp_name']);

if ($imgdata[0] > 640 || $imgdata[1] > 480) {
	$errors[] = "Your image is too big!";
}

if (!in_array($imgdata['mime'], array( 'image/gif', 'image/png', 'image/jpeg', 'image/pjpeg' ))) {
	$errors[] = "Your file should be a PNG, JPG or GIF!";
}

Easy CSS Sprites with Sprite Cow

Jul 13, 2011 by Matt | Posted in Design No Comments

CSS sprites are a commonly used technique to decrease page load times. One of the biggest hassles when setting them up, though, is figuring out the coordinates for the images in your sprite. (The other is rebuilding the sprite when you want to add new graphics…)

There’s not much to be done for the latter, but there is a handy tool that makes finding the coordinates painless. Sprite Cow intelligently draws a box around an image you select in your sprite sheet (after you load the sprite, of course) and writes the CSS for it. You can’t get any simpler than that.

I bet the developers could make some good money by making a Mac version and putting it up for sale in the App Store.

Generate QR Codes On-the-Fly With the Google Chart API

Oct 11, 2010 by Matt | Posted in Coding, Featured 4 Comments

You’ve probably seen a QR code before, even if you didn’t know what it was at the time. It’s a little square matrix barcode that can be read by either a specialized scanner or a cellphone with the right software. UPS puts QR codes on their packages for tracking purposes, and many Android phones come with QR readers preinstalled for easily sharing links to apps.

A QR code can contain any sort of textual information, which will be decoded by a QR reader. A web address, a simple message, a phone number, etc.. A good QR reader should figure out what the decrypted data is and act upon it accordingly. If it’s a web address, it will display the web page. If it’s a phone number, it should display the number and offer to call it.

Users of the iPhone or fourth-generation iPod Touch can use a free app like QR Reader to scan QR codes.

What can you use a QR code for? There are plenty of possible applications. Magazines could print QR codes that let you quickly jump to a web page. (Anyone remember the CueCat?) Advertisements could have QR codes that offer more information. You could put a QR on your business card. Want to move a web page you’re reading from your computer to your phone? Create a quick QR matrix and scan it right off the screen!

Now for the fun part… How do you make your own QR codes?

Continue reading →

Automated Website Thumbnails via WordPress.com

Feb 16, 2010 by Matt | Posted in WordPress 2 Comments

Ben Gillbanks has unearthed a neat, undocumented API. If you have a look at his WPVote site, you’ll note that next to each link there is a thumbnail or the originating site.

There are several services that can generate thumbnails like that, but most of them place watermarks on the images or place limits on how many API calls you can make in a month. (Amazon used to offer a paid service, but it was discontinued a year or two ago.)

To my surprise, when I was submitting an article to WPVote recently, I found that the thumbnails were served up by a subdomain of WordPress.com. I thought something along the lines of “Eh? I didn’t know they offered a screenshot service…” and continued about my business.

A couple days later, I spotted Ben’s blog post in my feed reader. In it he explained how he discovered a dynamic URL that Automattic uses, in places like the WordPress.org commercial themes page, to display thumbnails. He posted an email to Matt Mullenweg about it and got this as a response:

You can use it and link to it, but it’s not official. It’s not worth the effort to try to make it into a business – we have to support it anyway for our own apps.

Sounds good to me. :) Obviously it wouldn’t be nice to use it for something huge and high-traffic, but it seems like they don’t object to us smaller WordPress fanatics making use of it.

http://s.wordpress.com/mshots/v1/http%3A%2F%2Fprothemedesign.com%2F?w=250

There’s now a WordPress plugin that makes it easy to use the thumbnails in blog posts, with a shortcode, or elsewhere with a template tag.

Showcase Your Images with WebAssist’s PowerGallery

Dec 16, 2009 by Matt | Posted in Software & Scripts 4 Comments

Looking for a PHP photo gallery package that’s super easy to use? Look no further than WebAssist’s PowerGallery. It has a slick interface that far surpasses any I’ve seen in similar scripts. It looks good, it’s clean and simple, and it feels polished, which is more than I can say for the ever-popular Coppermine Photo Gallery.

PowerGallery Main Screen

Continue reading →

Smashing Freebie: iPhone PSD Vector Kit

Nov 30, 2009 by Matt | Posted in Design No Comments

Smashing Magazine certainly has no shortage of freebie themes, icon sets, and vector images. This particular one could be useful for designers/developers working in the iPhone arena. The iPhone PSD Vector Kit is a set of images that would work well for mocking-up iPhone apps or putting together imagery for an iPhone-oriented website.

iPhone PSD Vector Kit

TimThumb: Automatically Resize Images

Oct 23, 2009 by Matt | Posted in Software & Scripts 3 Comments

TimThumb is a PHP script by Darren Hoyt that can automatically create thumbnails on the fly, caching them for later use. It scales images to the width and height you specify, either keeping the original aspect ratio or cropping the image.

To make use of the script, once installed, you simply put the URL of the TimThumb script in an image tag, and pass arguments for the original image and the scaling options.

<img src="/thumbnails/timthumb.php?src=
/images/an_image.jpg&w=128&h=128&zc=1" alt="">

This would be perfect for generating thumbnails for blog posts, which is, interestingly enough, what the script was originally developed for.

CSS-Tricks: Style a List with One Pixel

Sep 15, 2009 by Matt | Posted in Design No Comments

Chris Coyier recently released a new article that covers an ingenious CSS trick that puts me in mind of the days of 1-pixel spacer.gif files and tiling graphics meant to replace the <hr> tag.

Basically it uses a one-pixel graphic and a bit of CSS to style a nested list element, with an end result that looks something like this:

CSS-Tricks 1px Nested List

That’s a semantically-correct <ul> element styled with one image and no additional markup. It’s so simple I wish I had thought of it… :)

HTML Text Over an Image

Aug 14, 2009 by Matt | Posted in Design One Comment

Have you ever seen a site where HTML text is rendered over an image? One example of this is Pro Blog Design‘s article headings.

HTML Text Over an Image on Pro Blog Design

The effect looks good, and it’s search engine-friendly. CSS-Tricks has a tutorial on how to create a similar implementation with CSS absolute positioning.

Basically you create a relatively-positioned DIV and put the image and H2 elements inside. Then you absolutely position the two elements, and add a solid or semi-transparent background behind the heading text.

Text Blocks Over Image [CSS-Tricks]