Image Size

[kessock]

Hi All,
is it possible to set the size of product images to a certain size without manually changing in an external program then adding them again.
Thanks.
Mark

[NormanRouxel]

It's possible but isn't trivial. I posted some techniques for this that I think are now in the Advanced Guide. They should be treated as guidance for developing your own solution rather than finished patches.

I've developed some add-ons that rely on this technique - if you look at http://www.drillpine.biz/v8multiprod...tproducts.html you'll find a page where all the little icons are being auto-created at the required size (from main images that can be any size - the patch does the resizing). The second product even has grey scale and coloured versions created. The full-size versions of these icons are created with dimensions that exactly match the main product image in order to create smooth swaps. Borders are added where needed, with the colour of the border being taken from the top-left pixel of the main image. All this is done at page-build time within Actinic due to it's built-in PHP processing capability.

[leehack]

Browser resizing is generally problematic and without some custom work i can't see how actinic can do this successfully either. Photoshop has a fantastic facility where you can run a batch on however many photos you like and it will size them as you wish. It can easily process 500 photos in a matter of just a few minutes and even put them in the right folder within actinic for you.

If you can couple this ability with being able to create a formula in excel that automatically fills in the image filename with an import into actinic, you can realistically add 500 products to a catalogue in ten minutes.

You do of course need the ability to write formulas within excel along with photoshop, which is rather expensive if this is all you would need it for.

[NormanRouxel]

Lee,

You no longer need rely on Browser resizing or a 3rd party image processing program. Actinic contains the full PHP language including the GD image manipulation library, so is able to open an image, resize it at any desired JPG quality and re-save it to disk.

If we consider the relatively unskilled user who may be able to take a photo but has no idea about file sizes or image processing and consequently dumps a 2Mb 3,000 x 2000 pixel on the disk. Actinic can now be tweaked to use this as the product image but to open this file, resize it and re-save it (either as a new file name or by replacing the existing image).

[leehack]

Thats nice to know, only helpful to me if it is done automatically though.

LEE + PHP = EMAIL NORMAN.

Whats it like, is it good, any problems? I noted on one of your patches that resizing and filling out the whitespace could be done, which i was impressed with.

I like the batch processing in photoshop as its not just the resizing and jpg saving you can do, you have the massive array of tools and effects that can also improve and doctor images. Watermarking images is also a great facility, protecting the hours you spend sometimes on taking photos.

If you could develop a full functioning PHP thingy to do this job well, i'm sure it'd be a great addition to your patches. Making great optimised images must be a right ball ache for many users and for me is one of the areas, with broadband so common, that images can make a real statement on a website.

[NormanRouxel]

Hi, Lee

My Multi Product Images patch (linked above) does just that. You can have a number of extra images that are displayed as icons and swap the main image when clicked. The patch doesn't care what size or aspect ratio these images are and automatically creates and uses optimally sized images as required. You can even select the JPG quality (I think I've set it at 100% for the demo).

[leehack]

It's possible but isn't trivial.

It was these few words that had me confused more than anything.

The patch with 3 thumbs underneath which swap the main image is a great patch, probably the best patch i have seen for actinic personally. I also like the drop down list driving the main image, fantastic when choices on colour are offered. Ive been dying to get a site build which can use one of these, alas it hasn't happened yet.

[RuralWeb]

If we consider the relatively unskilled user who may be able to take a photo but has no idea about file sizes or image processing and consequently dumps a 2Mb 3,000 x 2000 pixel on the disk. Actinic can now be tweaked to use this as the product image but to open this file, resize it and re-save it (either as a new file name or by replacing the existing image).

This is something I have been wanting for years as the vast majority of clients go boggle eyed when you start talking about images. Its also something which is IMO the missing link for V8 ie it does everything except the images - now it that functionality was added it would be a complete package.

Is it possible to create this as a standard option eg add a plugin which then allows users to dump any sized image into a folder and select it as normal for a product image and the magic happens. Perhaps with a variable that you can specify the image size.

I for one would pay a significant amount for such a feature and fit it as standard to every site I build.

[NormanRouxel]

This can be done. However, I think that Actinic will insist on uploading the original images, even if they're not being used.

I'll make a test site up and see what happens. Back later.

[leehack]

I can't quite picture how this would work, as dumping the raw image into the site1 folder would result in an unmanageable snapshot size in no time at all. For instance i downloaded some images for a site today and each raw image was between 4-5mb. Multiply that by just 200 and you have what is close on 1GB.

The raw images would need to be outside of the site1 folder, processed accordingly and then dumped into the site1 folder. This would mean they are not snapshotted and the plug in would somehow have to take them, process them and save them in the correct area.

The quality of the image is of paramount importance too, when optimising images i dont tend to say save them as 70% or alike, i save them down until i can see degredation and then i flick it up 5% or so. Sometimes i save an image at only 5-10%, sometimes i do them at 70-80%, the source file is so key to this and i dont think any software is good enough yet to interpret what the eye can see. Perhaps it has to be done by filesize, rather than a %.

This is definitely an area where there could be some great plugins created, i think its the logistics that will be difficult, i cant quite picture how this can successfully be integrated with actinic. I think the way forward would to provide an application outside of actinic, something for 50 quid or so, it has a source directory where the raw images are placed and it dumps the finalised and optimised image into another. This would then need moving into actinic.

Be a great addition, but also food for thought on how to do it successfully.

[RuralWeb]

Be a great addition, but also food for thought on how to do it successfully

It could be tricky and I dont think it will produce the quality of image a designer could create but if a client could be shown/told how to set thier camera to produce a standard image then that would mean that you could reduce it by % or file size to a set size.

EVERY DIYer has problems with images so if a simple solution can be offred IMO it will help dramatically. Take Actinics standard templates - every designer hates them but for mr shop in a box they can work very well but the problem is always how do I get my pictures in and why can I not just add them from my pictures which is where my camera sends them. WHAT I need to buy more software to get it working or I can only just understand Actinic Im totally lost with Adobe Elements or the like. To most people a picture is a picture.

I dont know maybe its just me but that the message I get from clients and if Norm can do it he make a small fortune just from me as it will make my life alot easier.

[leehack]

I dont know maybe its just me but that the message I get from clients and if Norm can do it he make a small fortune just from me as it will make my life alot easier.

I agree 100% on this, in fact today i had a client doing just that. He is worried that he cannot do the images like i did and is contemplating shelling out £500 for photoshop.

An external application is the way forward IMO, something that marries with actinic, but operates alone. There would be a basic console which options such as:

Image Folder
Destination Folder
Desired .jpg % Optimisation
Resultant Image Not to Exceed (Kb)
Desired Width (pixels)

User fills in these fields and the software plods away.

There could also be some alert conditions which could be set. For instance, you can usually get away with about a 40% optimisation max IMO, if having tried to save the file at 40%, the resultant size was over the limit you had set (15kb for example), it could flag a warning and after the processing had finished, the images that had raised an alert could be processed manually (still within the application), but with the ability to say "over 15kb is fine" or "optimise down to 20%"

Come on Norman, get your skates on, this could be big!

[NormanRouxel]

Some speed coding later and I think I've a working demo. Luckily I'd written an image manipulation library for my other patches so all I had to do was rewite the Standard Product Image routine to do some sums and use my existing library to do all the hard work.

So, so far we have Variables that you can set at the Site, Section or Product level:

DefaultProductImageHeight (e.g. 150)
DefaultProductImageWidth (e.g. 200)
ImageBackgroundColour (e.g. ffffff) leave blank to use existing image top-left pixel.
ScaledImageQuality (e.g. 100)

You use any image you like as the Product image and that's that.
There's no need for an Image folder or destination folder, the scaled images are written into the Site folder prefixed with "img_".

I'll bundle up a Snapshot for Malcolm and Lee to test. Email me so I've an address to send to.

UPDATE: Unfortunately, Actinic insists on uploading the image originals so that could be a server storage problem as mentioned.

[leehack]

I think it will require these options on resizing:

1 - specify width only and scale accordingly
2 - specify height only and scale accordingly
3 - specify height and width

This then allows you to cater for different ratio raw images, if you try and create a square image from a raw image with say a 4x3 ratio, you will end up with a squashed mess.

I personally on an actinic store like a 200 x 150 image. Its an ideal image size and can often be optimised to show a real good image and be a very small file. If possible it is great if every image on your site is the same in both height and width as these images can easily be incorporated into section images and alike and you dont get the ugly step that different heights can create.

[leehack]

UPDATE: Unfortunately, Actinic insists on uploading the image originals so that could be a server storage problem as mentioned.

This will be the sticking point if it is integral. Storage aside, its an upload nightmare too.

If the script creates images prefixed with IMG_xxxxx.jpg, can actinic somehow be set to only allow images with this prefix? Or maybe it only loads images from the created "ProductPictures" folder and ignores everything else. It will of course need to also allow any images of its own in the site1 folder.