— Currently under review and updates —- This section is important for setting your image sizes. This is an area that seems to cause many headaches for people. Some things to note about images: If you set only one of the dimensions, either width or height, the other will size proportionally, if you also have calculate image size set to On. If images are uploaded via the Admin. Console, then images will be resampled to match these sizes. If images are manually uploaded, then they should previously be sized to match these values, otherwise they will be resized, in some cases consuming bandwidth, in others producing poor quality images. See the notes at the bottom of this page.

==== Settings ==== (found under Admin Menu /Configuration/Images/Images)

• Small Image Width :: The pixel width of small images that are displayed in product listings - InfoBoxes (side boxes) and product thumbnails in particular.
• Small Image Height :: The pixel height of small images that are displayed in product listings.
• Heading Image Width :: The pixel width of heading images displayed in the heading of the center of each page.
• Heading Image Height :: The pixel height of heading images displayed in the heading of the center of each page.
• Subcategory Image Width :: The pixel width of subcategory images displayed on main category pages.
• Subcategory Image Height :: The pixel height of subcategory images displayed on main category pages.
• Calculate Image Size :: This setting tells osCommerce to calculate image sizes if enabled. This is needed if you want oscommerce to automatically keep your thumbnails proportional. If this is on, it is recommended that you only set one of the values for your image sizes, either width or height, but not both. Leave one of the values blank (Note, blank does not mean 0. If you set a value to 0, it will not display).
• Image Required :: Enable this to display broken images. Good for development. If you do not want broken images to display, set this to false.

• Product Image Width :: The pixel width of product images (mid-size) displayed on main product pages.
• Product Image Height :: The pixel height of product images (mid-size) displayed on main product pages.

• Product Popup Image Width :: The pixel width of product images (full-size) displayed on main category pages.
• Product Popup Image Height :: The pixel height of product images (full-size) displayed on main category pages.

For the past few releases of osCmax, a method called Slimbox has been used to control “Click to enlarge”. With osCmax 2.5 there is more control over how images are presented.

• Rotate Multiple Images :: This controls the Next/Previous functionality, where there are multiple images. Allows Next to rotate back to the first image, when the last image is reached.
• Background Opacity :: Control how much the background darkens when the popup image appears. This is a percentage expressed as a decimal value.

Other settings are fairly obvious with the exception of the following:

• Resize Easing :: The default fallback template includes a reference to jquery.easing. This allows various popup effects to be used. To glean any benefits from these, it is necessary to 'experiment' with the other settings and some of the available options show no appreciable effect. Enclose the intended effect with double quotes. The effects that are available are shown below.

swing (default); easeInOutQuad (appears to be the equivalent of the default); easeInOutCubic; easeInOutQuart; easeInOutQuint; easeInOutSine; easeInOutExpo; easeInOutCirc; easeInOutElastic; easeInOutBack; easeInOutBounce.

Additionally, you can specify only the 'In' and 'Out' parameter. Some examples are easeInCubic and easeOutBounce. As can be seen there is a lot of scope to customise the look of the popup images. Further customisation can be found in the slimbox2.css file, which should be part of your template.

Source: EJ Solutions, Ridexbuilder, osCMax.

• Created by E Jonsen 2009

1. Create a directory (folder) for the photos and copy all the photos there.
2. Create a subdirectory of this folder called thumbs.
3. Start up Irfanview
4. File, Batch/Convertion Rename - a new box opens
5. Work As: select Batch conversion
6. Look In: Browse to the directory containing the photos; Files of type : should set set as Common Graphic Files
7. Click on Add all.
8. Output Format: JPG - JPG/JPEG Format, Options Save Quality 75, OK
9. Click on Advanced Resize, Set width to - example 150 pixels (equivalent to Small Image Width, mentioned above).
10. Ensure Preserve aspect ratio and Resample are ticked.
11. Set DPI to 96
12. OK
13. Click on Use current directory, then add thumbs\ to the end of Output directory for result files.
14. Click on Start Batch.

To process pre-existing product/large images this sequence can be repeated for products/images_big. Obviously, change the subdirectory name in the second step from 'thumbs' to either 'products' or 'images_big'. It's suggested to set Quality in step 8 to 80 (85 for images_big), though this is entirely subjective and lower values may be suitable.

For images_big only, In step 9, set the height to match Product Popup Image Height (mentioned above).

Note: for a large image, on-screen height is normally the limiting factor - you don't want the image expanding below the users browser window, thus hiding the description/close prompt. You can't help those people who insist on showing numerous browser toolbars but a size of 600-700pixels would be appropriate.