Impossiblue

PHP – How to get the width and height of an image

First published on Ka of Isis 140426

Note: As github.io (where this website lives) does not support PHP, the results shown in this article, are simulations.

The width and height of an image are not always known. Take for instance a web gallery with contributions from different users or a slide show of randomly selected images. The image tag in HTML has traditionally been spec’ed with width and height values. With narrow bandwidhts, this will prevent the content of a browser window from jumping down when an image is finally loaded, because the browser can reserve the required space up front. The canvas tag also requires a known dimension. On the other hand, in responsive web design (where different screen widths are accounted for) widths and heights in image tags are mostly left out. This article will explore a special case where an image is used as a background image for a div tag. This appoach was chosen to allow text to overlay the image.

The following PHP code snippet collects four pieces of information about an image:

list($width, $height, $type, $attr) = getimagesize("image.jpg");

$width returns the width of the image (in pixels). $height returns the height of the image (in pixels). $type returns the image type. $attr returns both the width and the height of the image (in pixels) exactly as the code would be used in an HTML image tag. An example is appropriate; here with line breaks between each echoed value:

262
312
2
width="262" height="312"

Note: In this example, image type 2 indicates a JPEG (aka JPG) image. The PHP manual maintains a list of Imagetype Constants.

In the following we are only concerned with $width and $height to specify the width and height of an HTML/CSS container.

Now, this is what we do

1. Place the following piece of code in the head of the HTML document, before the style tag (to follow):

<?php list($width, $height) = getimagesize("image.jpg");?>

As already shown, this will load the two interesting values into memory.

2. Add a CSS style description to the head, somewhere after the PHP code but ideally after any main CSS link and before any JavaScript.

<style>
#phpGenerated {
	width: <?php echo $width;?>px;
	height: <?php echo $height;?>px;
	background-image: url("image.jpg");
	}
#phpGenerated p {
	position: absolute;
	right: 12px;
	bottom: 0;
	-moz-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
	-moz-transform-origin: right;
	-webkit-transform-origin: right;
	transform-origin: right;
	}
</style>

3. In the HTML body, set aside the space necessary for the image and the text to go on top of the picture:

<div id="phpGenerated">
	<p>© Bjørn Sortland</p>
</div>

This is what we get

And this is something we might have to do

Important: It may be necessary to CMOD the image directory on the server to 755 for proper read accessibility. Some servers may also have difficulty finding an image if it is not stored in the same directory as the PHP file. Instead of the following…

list($width, $height) = getimagesize("/different/directory/image.jpg");

…it may be necessary to search from root like so:

list($width, $height) = getimagesize($_SERVER["DOCUMENT_ROOT"]."/different/directory/image.jpg");