slscart logo

How images are handled in slscart

Image usage - where slscart images are used

Image storage - where images are stored in slscart

Image upload - how to copy images to your site

Image parameters - pertinent image settings

Image Usage

Large image

Thumbnail image

Category image

Catalog image

Product images

Packing slip logo

Web links image

Photo gallery image

Photo gallery thumbnail image

Blog image

Favicon images

Admin favicon images

Image Storage

slscart has seven places to store images. They are set in Administration > Site Setup > Advanced section.

thumbnail dir - product thumbnails are stored here.

 default directory: images/thumbs

large image dir - product images are kept here.

default directory: images/items

Blog Img Dir: - images used in the blog and the blog gallery are kept here.

default directory: images/blog

category Img Dir - category-related images: NAV, list, header.

 default directory: images/categories

general img dir - packing slip logo, web links images, catalog images are kept here.

 default directory: images

gallery image dir - Photo gallery images are kept here.

fixed at albums/gallery

gallery thumbnail image dir - Photo gallery thumbnail images are kept here.

fixed at albums/gallery/thumbs

To view the images in a particular directory, go to Web Site > Images > Image List. Select one of the following then click on 'Show Images' button.

Image Upload

There are several ways to copy an image to your site.

 The largest image file size is set in Administration > Catalog Setup > Images section at the Max Upload Size: setting. The default is 400 KB.

Product images

This will copy an image to be used with a product. There are large and thumbnail images.

E-store > Products > Add or Edit a product > Large Images section.

Click on the No Images image under Large Image(s). A pop-up box will appear.

In most cases, it is best to auto create the thumbnail image.

The Large Image is stored in the Large Img Dir and the thumbnail image is stored in the Thumbnail Dir.

sa/includes/imgload.php used to load product image and create thumbnail (if one is not specified) using GD library.

The autocreated thumbnail image (i.e. no thumbnail specified when loading large image in products) will have width and/or height of specified image height, width

In order to auto create a thumbnail, the GD library is necessary. You can see if it exists under Web Site > Images. Near the bottom there will be a message showing whether the GD library is available or not.

View images

To view the images in each directory, go to Web Site > Images > Image List. Select one of the following then click on 'Show Images' button.

The images may also be deleted or new ones added.

Image Parameters

Images section

In Administration > Catalog Setup > Images section

Set the width, height of auto created thumbnails. Thumbnails are created from the product's large image.

Upload Height - Enter the pixel height used when creating auto item thumbnails.

Upload Width - Enter the pixel width used when creating auto item thumbnails.

If the thumbnail to be created is not from a square image, the proportion is kept when creating the thumbnail. The width or height will not exceed the Upload Width or Upload Height, though it may be smaller.

 For example, if the large image was 640x427 and Upload Width and Height were both set to 195 then the thumbnail created would be 195x130, thus maintaining the same proportion as the large image.

If the large image was 191x147 and Upload Width and Height were both set to 195 then the thumbnail created would be 191x147.

Note that if the Upload Width or Upload Height are changed, existing thumbnails do not change. The new settings will only take effect on thumbnails created after the change. For example, if the current Upload Width and Height were 200 and 200 then changed to 150 and 150, the current thumbnails will remain at 200 x 200.

Max Img Height (in pixels) - Enter the maximum pixel height at which your thumbnail images should display, or leave blank to use the actual height of the thumbnail

Max Img Width (in pixels) - Enter the maximum pixel width at which your thumbnail images should display, or leave blank to use the actual width of the thumbnail

if both width, height entered it is used (might not be a square)

if only width entered, it is used for width and height (i.e. a square)

if only height entered, it is used for both (a square)

if nothing entered, default is used 100=width, 100=height (a square)

if image's width and height are smaller than specified width, height then the image's width, height are used.

Watch out.

Lets say Max Img Height is initially set to 200. All the thumbnail images created will have a maximum height of 200px. Then the Max Img Height is changed to 150. All new thumbnails created will have a max height of 150px. Old thumbnails will still have max height of 200px. The thumbnails will be displayed with a max height of 150px. Note this means the old thumbnails will be rescaled by the browser to fit max height of 150px. This slows down the site especially if there are a lot of thumbnails on a page.

Items section

In Administration > Catalog Setup > Items section

The following settings are only for layout style of 'Multi Column Layout'. The number of products per row is automatically calculated based on the width of the ? and the Multi Width setting.

A product cell, akin to a table cell, contains the product's thumbnail image, price, short description with a link to a detailed page about the product.

Multi Height: Enter the pixel height of the multi column product entry, if desired. Default is 200 px. This is the minimum height of a product cell.

If Multi Height is specified and the actual image height is larger than Max Img Height, then the image height displayed as Max Img Height + 10px.

If it is less than Max Img Height, then the actual image is displayed inside a Max Img Height image cell (i.e. the minimum height of the product cell).

Multi Width: Enter the pixel width of the multi column product entry, if desired. Default is 200 px. This is the width of each product cell. If left blank, the width of the cell is Max Img Width + 10px margin. For example, if Max Img Width is 278px and Multi Width left blank, the width of the product cell would be 288px.

If value entered but Max Img Width is blank, then no margin is added; i.e. the product cell width will be what is entered.

***