Edit Image Attributes

Edit Images

This screen allows you to rename or change the size of images, as well as modify attributes for the <img> tags for the image and any existing resized images. The Image Configure screen allows you to set default options for many fields on this screen.

URL

Displays the full URL of the image. This is the value used in the <img> tag src attribute for the original image. Use Rename to or Images > Move Images if you want to change the image URL.

Rename to

The image name is displayed in this field. If you want to change the name of the image, change the name in this box. The name will be changed when you click on Save Changes. You can not change the format of the image.

Resize to

This field allows you to reduce the size of the original image either by a percent value or by specifying maximum dimensions.

To leave the image the same size, leave the percent radio button selected, and the percent value 100. Selecting the dimension option and leaving the original values will have the same effect.
To reduce the image to a percentage of the original size, leave the percent radio button selected and enter a percentage (whole numbers between 1 and 100).
To specify maximum dimensions for the image, select the dimension radio button and change the max. width and max. height values. Dimension values are in pixels, and can not be larger than the original image size. The image will be reduced in size so it is no larger than either the specified maximum dimensions, but will maintain the original aspect ratio (proportion of height:width).

The image will be resized when you click the Save Changes button.

Note:

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

<img> Tag Attributes

This section allows you to modify the attributes which will be included in the HTML <img> tag. Making changes to any of these fields will not modify the image itself, just the way it looks on HTML pages. The Alternate Text value is applied to the image and any resized images; all other values can be individually set for the resized images.

Note:

Image tag attributes can be overriden by CSS definitions. If the attributes you set here are not displaying on store pages after publishing, check to see if the store pages have any CSS rules that may be modifying the appearance of the image.

Alternate text

The contents of this field are put in the required alt attribute of the tag for the original and any resized images. The default value is the image name. This attribute is especially important for describing the contents of the image to search engines and browsers for the visually impaired.

Size

This specifies the image height and width values (in pixels) included in the tag for the original image. It does not affect the size of the actual image. The browser will display the image with these dimensions regardless of the size of the actual image. If either of the fields has no value, the corresponding attribute will not be included in the tag.

Border

This specifies the 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) the image border will be.

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).

Image Tag

This is a full image tag using the attributes indicated above. The contents of this tag will change dynamically when you make changes to the fields above. You can copy and paste this tag to include this image in any HTML content (either a ShopSite field that allows HTML, or an HTML page not generated by ShopSite).

Resized Image Attributes

If the original image has any resized images associated with it, fields for editing the <img> tag attributes for each of those images will be displayed. Resized images use the same alt attribute as the original image. These fields all function the same way they do for the original image.

If you aren't seeing the resized images you expect, check your settings on the Configure screen, then use the Create Resized Images feature to create resized images.

Size

These values are used in the tag height and width attributes. The default values are the height and width of the actual image.

Border

This is the width (in pixels) of the image border.

Image Spacing

These are used to create padding between the image and other HTML content.

Other Attributes

This allows you to add other attributes into the tag.

Image Tag

The full image tag for the resized image

After you have finished making changes, click on Save Changes to save your changes and return to the Images screen, or click Cancel to return without saving your changes. You can use the Reset Images feature to restore default attributes.