Image Resizing Function

[loonatiksusa]

Wondering if there is any backend or frontend function to automatically resize images, say I upload one image that is 500px X 500px, and I want that image to appear as a thumbnail of 150px X 150px and 400px X 400px as a large image, without having to resize them prior to uploading. Any suggestions, modules, code or ideas. Could I use javascript to generate the image within Miva...Thanks

[d_host]

Re: Image Resizing Function

Miva Merchant doesn't do it, but other apps do. This requires the use of either ImageMagic or gd libraries being installed on the server - and the upload script to automatically resize images as they are being uploaded to the server. Keep in mind that this typically requires uploading one image at a time, rather than uploading let's say 100 or 1000 images at a time via FTP. In the later scenario it's much easier to do the work off-line and generate thumbnails and other images before batch-uploading them to the server.

There are many different tools that can do batch file resizing in no time. Here's a cool tiny Mac app called ResizeMe: http://resize-me.com (you can get 50% off the price if you buy it in the next hour or so at MacZot!). Or, if you already use something like Photoshop, you can automate the repetitive task of creating thumbnails by creating a 'droplet' to do this for any number of images on your computer.

[loonatiksusa]

Re: Image Resizing Function

Thanks

[Biffy]

Re: Image Resizing Function

You can just do it with HTML.

However, what you are proposing is not efficient. Much better to use a Photoshop script that will resize all the images automatically and not serve oversized images for thumbnails.

[d_host]

Re: Image Resizing Function

HTML doesn't "resize" images - it can only display them at different resolutions than the actual file is. In other words, you can specify to display an image at 128x128 pixels, but if the image came from a 12 megapixel camera (4256x2832 pixels) - it will still be some 10MB in size rather than 5KB and till take a LOT longer to download than a properly resized 128x128 pixel thumbnail. Not to mention, your monthly hosting bill will be significantly higher if you serve such large images as "thumbnails", since you'll be paying for bandwidth at the 10MB per thumbnail rate, rather than 5KB.

[Biffy]

Re: Image Resizing Function

The slower page loads will cost you sales, too.

Much better to serve the images at actual size.

[loonatiksusa]

Re: Image Resizing Function

thank you...i will use a photoshop droplet, i just was trying to avoid having to enter image locations for both images and only enter it once. thanks

[sebenza]

Re: Image Resizing Function

Check out phpThumb. It will allow you to re-size images on the fly and have them cached for speedy load times. Cool thing is that it will also re-size proportionally.

[Leanne]

Re: Image Resizing Function

If you name your images using the product code, you don't ever have to enter them at all :) Just use the SMT product code token to pull them into your html img tag when you need them. Lets you use images in all sorts of places where they aren't typically available, too (thumbnails in the basket, etc).

Granted, that works best if you do it that way from the start.

[loonatiksusa]

Re: Image Resizing Function

I am at the start of adding product, would that automatically resize thumbnails to a certain size, ie 150px width, and then create a large version of 400px or would I have to upload all sizes. Is there somewhere to check out sample code? Thanks

[Leanne]

Re: Image Resizing Function

It won't automatically resize them, although resizing doesn't have to be hard. You don't even need to create a photoshop droplet, just download a free program like Easy Thumbnails and use that.

All you'd need to do then is, anywhere you want to show an image, use code something like this:

<img src="filepath/&mvt:product:code;.jpg" alt="&mvt:product:name;">

<img src="filepath/&mvt:product:code;-thumb.jpg" alt="&mvt:product:name;">

<img src="filepath/&mvt:product:code-400.jpg" alt="&mvt:product:name;">

The one caveat is that you'll have to plan for products that don't have images available. You can either upload "no image available" photos named with those product codes, or put something in the image and thumbnail fields for those products, and use a conditional to control the display.

Makes it easy to change out product photos too, if you ever need to do that. Just name the new photos with the product codes and upload via ftp. No need to mess with your Miva settings.