Configure Images

The Image Configuration options define how you will select images for use in your store, what default attributes to apply to new images, and how to create resized images.

Image Selection

Image selection allows you to configure how you will select images within the back office. Your choice does not affect what your customers see, but only how you work with images in the back office of your store.

Choose Selection Method

Select whether to choose images (in , for example, a product page) using a pop-up window or a pull-down menu. See Image and Button Selection Tool to learn how each of the available methods is used when selecting an image.

Image Upload

This setting allows the option to select multiple images if you are using a newer browser or the standard one image at a time upload if using an older browser like Internet Explore.

Choose image upload method

Unless you are using Internet Explorer, select "Advanced Multi-image upload".

Show Preview Image

Check this to display a preview of the image(s) you are about to upload.

Number of Simultaneous Uploads

When uploading multiple images indicate how many to upload simultaneously. Depending on network bandwidth and computer performance you may wish to leave it set to the default of 4.

Image Gallery

When selecting images in the back office, you can enable an image gallery to display the images for selection.

Enable

Set the "Enable" check box to turn on the image gallery feature; clear it to turn the feature off.

Image Size

Select the size of image to display in the gallery from the drop-down box. Options include: Original, Medium / More Info, Small / Thumbnail, and Extra Small / Cart. Defaults to Original.

Options

Set the check boxes for the desired options to further customize the gallery. For example, in addition to the check box next to each image in the gallery, you can choose to highlight image selections with a border. Another ooption is to change the default behavior when clicking on an image; the default bevaiour selects the image, just like setting the check box, but it can be changed to instead expand the view of the image. You can choose to have the image name appear when hovering over an image in the gallery. Lastly, you can have all of the images uniformly scaled in the gallery to a set width and height.

Border for highlighting selected images

If the highlight option is selected in the previous field, you can customize the appearance of the hightlight using this field. Choose the width (in pixels; default is 6), the style (double, dotted, dashed, solid, grooved, line; default is dotted), and the color (blue, red, green; default is red).

Image pagination (for a large number of images)

Use the text boxes to set the number of images to display in the gallery at one time (the number of images to view on each "page"; defaults to 100), as well as the number of individual page links to display at one time (defaults to 10). Too many images will increase load time and affect performance.

Image Layout Defaults

Select default settings to use for the original images. These defaults will be applied to new images when you upload them, and will be the default values on the Reset Images screen.

In addition to the configurable attributes below, when you upload an image, ShopSite will automatically use the image filename for the required alt attribute of the original and any resized images. You can customize the alternate text using the Edit Images feature.

Referenced as

Enter a name to be used to reference the original image size in the back office. This name will appear in the list of available image sizes that you can select to use when a product appears on a Store Page, More Information Page, Search Results Screen, or in the Shopping Cart contents.

Image size

When you upload a compatible image using the Upload an Image utility, ShopSite can check to see if it's larger than specified dimensions, and shrink it to fit within the dimensions if it is larger.

To have this happen, check the box beside If needed, reduce image on upload to:, then enter the maximum width and height (in pixels) you want the image to be. ShopSite will resize the image to fit within those dimensions without altering the original aspect ratio (height:width) of the image.

Note:

ShopSite can resize gif, jpg, and png images. Any other file type (including other image formats) will not be resized.

Border

This specifies the default value of the image tag border attribute.

If there is no value in this field, the attribute will not be included in the tag. The image will not have a border, unless it is within an <a> tag.
If you set the value to 0, the image will not have a border, even if it is within an <a> tag.
Any other number (positive integer) will set the width (in pixels) of the border.

Image spacing

These values are used in the tag vspace and hspace attributes. The image will be padded (separated by blank space) from other content on the page by the number of pixels specified. If either of the fields has no value, the corresponding attribute will not be included in the tag.

Other attributes

Use this field to add any other attributes you want included in the tag. Allowed attributes include: name, class, id, style, title, usemap, ismap, and align (using the align attribute is not recommended).

JPEG image compression quality

You can control how much compression to use when converting image files to the JPEG format. Higher compression will result in a poorer visual quality. The compression can be set between 0 (maximum compression) and 95 (minimum allowable compression) with 75 being accepted as a good compromise. If this field is left blank, default compression (75) will be used.

Resized Images

ShopSite allows you to create up to three resized copies, in addition to the original image. This makes it possible to upload one image, then include different sizes of the image in different locations.

Note:

ShopSite can resize gif, jpg, and png images. Any other file type (including other image formats) will not be resized.

One example of using resized images:

Use the Original Image on Product More Information Pages.
Resize the First Resized Image to 75% of the original image, and use this size on the Store Pages.
Resize the Second Resized Image to 50% of the original image, and use this size in Search Results.
Resize the Third Resized Image to a maximum of 60px wide or 60px high, and use this size in the Shopping Cart.

Resized images are created using these settings when you Create Resized Images or (optionally) when you Upload An Image.

Create Resized Image

Select whether or not this size will be used when resized images are created.

Referenced as

Enter a name to be used to reference this image size in the back office. This name will appear in the list of available image sizes you can choose to use when a product appears on a Store Page, More Information Page, Search Results Screen, or in the Shopping Cart contents.

Image size

This field allows you to specify the size of the resized image. You can specify either a percent value or maximum dimensions.

To reduce the resized image to a percentage of the original image, select the percent radio button and enter a percentage (whole numbers between 1 and 99).
To specify maximum dimensions for the resized image, select the dimension radio button and change the max. width and max. height values. Dimension values are in pixels. The resized image will be reduced in size so it is no larger than either of the specified maximum dimensions, but will maintain the original aspect ratio (proportion of height:width). If the original image is smaller than the maximum dimensions, the resized image will be the same size as the original.

Border

This specifies the default value of the image tag border attribute. This field functions the same way it does for the original image.

Image spacing

These are used to create padding between the image and other HTML content. These fields function the same way they do for the original image.

Other attributes

This allows you to add other attributes into the tag. This field functions the same way it does for the original image.

After making changes on this screen, click on Save to save the new settings, or Cancel to abandon your changes. Saving your settings will not automatically update existing images using the new default settings.