{"id":100,"date":"2008-11-17T10:11:00","date_gmt":"2008-11-17T15:11:00","guid":{"rendered":"http:\/\/www.dev-notes.com\/blog\/2008\/11\/17\/get-image-width-and-height-with-php\/"},"modified":"2008-11-17T10:11:00","modified_gmt":"2008-11-17T15:11:00","slug":"get-image-width-and-height-with-php","status":"publish","type":"post","link":"https:\/\/www.dev-notes.com\/blog\/2008\/11\/17\/get-image-width-and-height-with-php\/","title":{"rendered":"Get image width and height with PHP"},"content":{"rendered":"<p>I was working on my <a href=\"http:\/\/ww2db.com\/photo.php\" target=\"_ww2db\">World War II photo gallery<\/a> recently.  The gallery&#8217;s HTML code, particularly the main content section, looks something like the following.<\/p>\n<pre class=\"code\"><xmp>\n<div id=\"content\">\n\t<div class=\"main_column\">\n\t\t<img decoding=\"async\" src=\"images\/helloWorld.jpg\">\n\t\t<!--\n\t\tThe photograph and other \"main content\" goes here.\n\t\tThe width of this column is 600px.\n\t\t-->\n\t<\/div>\n\n\t<div class=\"extra_column\">\n\t\t<!--\n\t\tThis is the vertical side bar.\n\t\tIf the width of the photo in the main section is more\n\t\tthan 600px, it will overlap this div.\n\t\t-->\n\t<\/div>\n<\/div>\n<\/xmp><\/pre>\n<p>Because my vertical navigation bar is on the right side of the page, if a photograph is larger than a particular width, it overlaps the vertical bar.  I decided to remove the vertical bar if the photo is too large; let us assume that if the image width is larger than 580 pixels, it is too large.  To apply the logic, I used the getimagesize() function.  A quick example on this function is below.<\/p>\n<pre class=\"code\">\nlist($imageWidth, $imageHeight, $imageType, $imageAttr) = getimagesize($imgName);\necho(\"The width of the image is \".$imageWidth.\" pixels.\");\n\/\/ Sample output: \"The width of the image is 600 pixels.\"\n<\/pre>\n<p>I used the following PHP code to make my page work the way I want to based on width of the image.<\/p>\n<pre class=\"code\"><xmp>\n<div id=\"content\">\n\t<?php\n\t$imgName = \"helloWorld.jpg\";\n\n\tlist($imageWidth, $imageHeight, $imageType, $imageAttr) = getimagesize($imgName);\n\n\tif ($imageWidth <= 580) { ?>\n\t\t<div class=\"main_column\">\n\t<?php } ?>\n\n\t<img decoding=\"async\" src=\"images\/helloWorld.jpg\">\n\t<!--\n\tThe photograph and other \"main content\" goes here.\n\t-->\n\n\t<? if ($imageWidth <= 580) { ?>\n\t\t<\/div>\n\t\t<div class=\"extra_column\">\n\t\t<!--\n\t\tThis is the vertical side bar.\n\t\tOnly show this if image width\n\t\tis 580 pixels or smaller.\n\t\t-->\n\t\t<\/div>\n\t<?php } ?>\n<\/div>\n<\/xmp><\/pre>\n<p>Beyond width, the getimagesize() function in PHP also outputs other properties; the output is an array containing four elements.  As you may have noticed, in my above example, I captured the following properties.<\/p>\n<ul>\n<li>0 $imageWidth : Width of the image in pixels; integer.<\/li>\n<li>1 $imageHeight : Height of the image in pixels; integer.<\/li>\n<li>2 $imageType : Type of the image; integer.  Possible values are as follows:<br \/>\n<table border=\"1\">\n<tr>\n<th>Value<\/th>\n<th>Description<\/th>\n<\/tr>\n<tr>\n<td>1&nbsp;<\/td>\n<td>GIF<\/td>\n<\/tr>\n<tr>\n<td>2&nbsp;<\/td>\n<td>JPG<\/td>\n<\/tr>\n<tr>\n<td>3&nbsp;<\/td>\n<td>PNG<\/td>\n<\/tr>\n<tr>\n<td>4&nbsp;<\/td>\n<td>SWF<\/td>\n<\/tr>\n<tr>\n<td>5&nbsp;<\/td>\n<td>PSD<\/td>\n<\/tr>\n<tr>\n<td>6&nbsp;<\/td>\n<td>BMP<\/td>\n<\/tr>\n<tr>\n<td>7&nbsp;<\/td>\n<td>TIFF (Intel)<\/td>\n<\/tr>\n<tr>\n<td>8&nbsp;<\/td>\n<td>TIFF (Motorola)<\/td>\n<\/tr>\n<tr>\n<td>9&nbsp;<\/td>\n<td>JPC<\/td>\n<\/tr>\n<tr>\n<td>10&nbsp;<\/td>\n<td>JP2<\/td>\n<\/tr>\n<tr>\n<td>11&nbsp;<\/td>\n<td>JPX<\/td>\n<\/tr>\n<tr>\n<td>12&nbsp;<\/td>\n<td>JB2<\/td>\n<\/tr>\n<tr>\n<td>13&nbsp;<\/td>\n<td>SWC<\/td>\n<\/tr>\n<tr>\n<td>14&nbsp;<\/td>\n<td>IFF<\/td>\n<\/tr>\n<tr>\n<td>15&nbsp;<\/td>\n<td>WBMP<\/td>\n<\/tr>\n<tr>\n<td>16&nbsp;<\/td>\n<td>XBM<\/td>\n<\/tr>\n<\/table>\n<\/li>\n<li>3 $imageAttr : HTML-formatted attributes; string.  Example: &#8216;height=&#8221;600&#8243; width=&#8221;400&#8243;&#8216;<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>With the getimagesize() function in PHP, I was able get width, height, and other properties of images to help me lay out a web page.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-100","post","type-post","status-publish","format-standard","hentry","category-php"],"_links":{"self":[{"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/posts\/100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/comments?post=100"}],"version-history":[{"count":0,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/posts\/100\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/media?parent=100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/categories?post=100"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dev-notes.com\/blog\/wp-json\/wp\/v2\/tags?post=100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}