Tech Journal
Latest Entries
- Custom code based on image sizes in ExpressionEngine
- Mining date-based ExpressionEngine URLs
- Preselecting Pulldowns in ExpressionEngine Standalone Edit Forms
Tech and Design
- My Favorite New Things From 2009
- Five Things I’ve learned About Freelancing
- Interesting Data Visualization
- Hydrogen Car Design to be Released “Open Source”
- Chicago Design Archive
- Keynote ‘09 - “View Package Contents”
iPhone
- iPad is more than just an e-Reader
- iPhone App Showcases Hi-Def Holographic Recordings
- iPhone as Digital Swiss Army Knife
Web
- Skipping the Multi-entry Page in ExpressionEngine
- Opera Unite
- Assigning movie clips levels in Actionscript 3.0
- Opening Shadowbox windows from a link in Flash
- Passing FLV file paths to an AS 3.0 SWF with SWFobject
Motion
Custom code based on image sizes in ExpressionEngine
August 12, 2011
This is not really ExpressionEngine-centric - The concept will work in any CMS that spits out an uploaded image path - but since I’m using an ExpressionEngine tag, I’m classifying it as an ExpressionEngine article.
Ok, so I found that I had a preferred dimension for a particular image type in a site I work on. I try to fill a width of 615px wide, when possible, but I unfortunately don’t always have the luxury of getting this resolution image. To preserve my layout, and preserve image quality as much as possible, I want to allow large images to fill the width, and place smaller images centered within a grey div. Here’s how I did it:
First of all, you need to set PHP to “Output” in your template preference. If you are ever confused as to whether you need to set PHP to render on input or output in a template, just remember when set to “Output”, ExpressionEngine tags will parse first, then your PHP will parse. When set to “Input”, your PHP will parse first.
<?php
$min_width = 550; //through some testing, I found i can safely scale images that are approximately 550 wide up to 615 wide without tremendous loss of quality, but I could be stricter and just set this to 615 if I wanted.
$img_path = "{event_image_thumb}"; // my ExpressionEngine custom file tag. This inputs the image URL into my function
$imagehw = GetImageSize("$img_path"); // This creates an array, of the image width and height.
$imagewidth = $imagehw[0]; // this grabs the first element in the array. Remember, the first item in an array is always [0].
if ($imagewidth>=$min_width) { //if the actual image is at least as wide as my preferred dimension
echo "<img src=\"$img_path\" width=\"615\" />"; // simply echo the image tag with the image URL and use it as is.
} else { // if we made it here, the image is narrower
echo "<div class=\"imgHolder\"><img src=\"$img_path\" width=\"$imagewidth\" /></div>"; // echo div with the image within it. With CSS, I'm setting auto margins and the properties of the div.
}
?>
And that’s it! This could be used for a lot of other purposes in which you need to write some custom code based on your image size. For example, dealing with vertical vs horizontal images would only require some greater than or less than comparison between the first (width) and second (height) items of the array to adjust a layout accordingly.