Image resize using Ditto?

Hi guys,

I am using ditto to list out a number of products.
Assiged to the products is an image template variable with a link to an image for that product.
When listing out the products I wish to use thumbnails, and have been forced to fix the aspect ratio so as not to break the page layout. Only problem is when I get a landscape image for a product it is badly stretched and looks terrible.

Just wondering if there is any way using ditto to get around this problem, perhaps scale the images as they come out?

Cheers,

J

use the image as background and use background-position:center center; to center the image as background

Dimmy I have no idea what you mean.
Im starting to think a snippet is the way to go here...and resize my images in php.

You can do this with the phpThumb snippet if you want to do it in PHP. Just add the call to the snippet call in your Ditto template.

If you resize with CSS the image will be the same filesize however large you render it, so pages may not be so usable if you let users loose uploading images.

Just wrote a snippet to do it for me, took a resize function from this site: http://www.sitepoint.com/article/image-resizing-php
Will keep the same image size tho....lets call this one 1.0, 1.1 will compress and save!

Assumptions: You have a template that has 3 T.V’s: product_name (text), product_price (text), product_image(image)

<?php
// this will be the ID of the products to draw out, if not set default to first menu!
$parentid = (isset($parentid))? $parentid : 5;
$output = "";
// Fetch all the TV’s with product info for given parent
$tvarray = $modx->getDocumentChildrenTVarOutput($parentid, array("id","product_name", "product_price", "product_image"), 1);
$output .= "<table width=\"100%\" cellspacing=\"0\" class=\"product_table\"><tr><th>&nbsp;</th><th>Product Name</th><th>Price</th></tr>";
// For each product
foreach($tvarray as $product)
{
// Fetch the dimensions of the image using php
$myproduct = getimagesize($product[’product_image’]);
$myproductlink = $modx->makeurl($product[’id’]);
$output .= "<tr><td><a href=\"".$myproductlink."\"><img src=\"".$product[’product_image’]."\"".imageResize($myproduct[0], $myproduct[1], 80)." /></a></td>";
$output .= "<td><a href=\"".$myproductlink."\">".$product[’product_name’]."</a></td>";
$output .= "<td><span class=\"price_big\">€ ".$product[’product_price’]."</span></td><tr/>";
}
$output .= "</table>";

return $output;

// Function below will do the image resize, while still maintaining the aspect ratio!
function imageResize($width, $height, $target) {
//takes the larger size of the width and height and applies the
//formula accordingly...this is so this script will work
// dynamically with any size image

if ($width > $height) {
$percentage = ($target / $width);
} else {
$percentage = ($target / $height);
}

//gets the new value and applies the percentage, then rounds the value
$width = round($width * $percentage);
$height = round($height * $percentage);

// returns the new sizes in html image tag format...this is so you
// can plug this function inside an image tag and just get the

return "width=\"$width\" height=\"$height\"";
}
?>