[SOLVED] Custom image sizes using smart php image class

[AbsoluteVM]

Hello,

For anyone wanting to output all your images in a loop, using a smart php image resizer class then I found a solution. The main constraints around having to use CSS weren't appealing to me, I needed to have full control over every image size on every page.

First step
First of all, I installed the class 'SLIR' as it offered some nice cropping and resizing functionality.
http://code.google.com/p/smart-lencioni-image-resizer/

Second step
Setup SLIR and all you need is the file URL to manipulate the image. The main image is dealt with fairly easily by outputting it on your desired template page by using

Code Select Expand

$product_main_image = $this->product->images[0]->file_url;

Dealing with additional images
If you have any additional images you need access to them in a loop, and furthermore if you have a lightbox with a 'group', that is if you click the main image you need to ommit the first image from the 'group' so it displays only once whilst they click 'Next' etc...

The snippet below essentially grabs the main array of images and outputs them in HTML5 format, grabbing the file meta too. It ignores the first image of key 0, which if you echo $key you will see, 0, 1, 2, 3 etc..

Code Select Expand

<?php // additional images
// load the images
$images = $this->product->images;
// loop them out
foreach ($images as $key => $image) {
// discount the first image, as it is displayed as main image
if ($key != 0) {
// declare image file url
$additional_image_file_url = $image->file_url;
// declate image file meta (alt-text)
$additional_image_alt_text = $image->file_meta;
?>

<!-- additional image -->
<article>
<figure>
<img src="<?php echo $additional_image_file_url; ?>" alt="<?php echo $this->product->product_name; ?> | <?php echo $additional_image_alt_text; ?>">
<figcaption><?php echo $additional_image_alt_text; ?></figcaption>
</figure>
</article>
<?php } ?>
<?php  } ?>

You may then use any image processing options such as SLIR i.e.

         <img src="<?php echo $additional_image_file_url; ?>" alt="<?php echo $this->product->product_name; ?> | <?php echo $additional_image_alt_text; ?>">

to your SLIR API'd image

         <img src="<?php echo JURI::root(); ?>slir/w480-h320-c4x3/<?php echo $additional_image_file_url; ?>" alt="<?php echo $this->product->product_name; ?> | <?php echo $additional_image_alt_text; ?>">