Quantcast
   
Titan CMS online support, find help and get answers

Configuring Automatic Image Sizes

  • Published: February 19, 2009
  • |
  • Version: 1
 Summary

This article describes how to modify the image management configuration parameters on your file pile. You can configure what image sizes are automatically generated for items in your file pile, and where these various sizes are used in the Titan CMS workstation.

 Background

Every website contains images, and along with this fact comes the need to maintain and modify those images to display in the correct manner. The new image management component of Titan CMS makes this process easy and user-friendly, without the need for complex photo editing software. With Titan CMS you can now crop, resize, and rotate your images. You can also automatically generate different sizes for each of your images. For example, perhaps you would like to automatically generate a small and medium-sized thumbnail of your original image for use in the photo block.

Titan CMS allows you to configure what size images are automatically generated, as well as where those different sizes are used throughout your site. This configuration is specific to a certain file pile, allowing the flexibility to maintain different configurations across file piles. This article will discuss how to manage these configuration items on your file pile.
 

 Details

In order to modify the image management configuration parameters, go to the file pile configuration screen. To do this:

  1. Log into the workstation, and go to the Titan Administration Module.
  2. In the left navigation area, expand the "File Piles" node.
  3. Click on the file pile that you are configuring.
  4. In the right pane, find the field labeled "Image Size Availability".

The "Image Size Availability" field contains XML data which can be modified for your purposes. This XML data lists the additional image sizes that will automatically be available for any image you upload. It allows you to define the size of each image, as well as the location where each size is used. Each image size is configured with an <Image></Image> XML element. This element, along with every attribute available for use, is shown below:

<Image Size=”xx” Height=”xx” Width=”xx” Clip=”Width|Height|Max” Freeform=”0|1” Browse=”0|1” Content=”0|1” Thumbnail=”0|1” PhotoLarge=”0|1” PhotoMedium=”0|1” PhotoSmall=”0|1”>[Name to be displayed throughout the workstation – no spaces allowed]</Image>

An image size is defined by the name that is specified between the <Image> opening/closing tags. This name can not contain any spaces; it must begin with a letter and contain only letters and digits. Choose a meaningful name for each size, as it will be displayed throughout the workstation.

The attributes placed on the <Image> element configure both the physical size of the image, as well as the location where that size should be used in the workstation. All of the attributes available for use are described below.

The following attributes define the physical size of each image:

Size – When specified, this attribute defines the pixel length of the largest dimension. If the image is taller than it is wide, this attribute will define the height; if it is wider than it is tall, it will define the width. The secondary, or smaller, dimension will be automatically calculated to maintain the original aspect ratio. That is, an image will always be resize proportionally to prevent distortion.

Height – When specified, this indicates the height of the image, in pixels. This attribute will be ignored if Size is specified.

Width – When specified, this indicates the width of the image, in pixels. This attribute will be ignored if Size is specified.

Clip – This attribute should be used when both Height and Width are specified. It is used to define what happens when the aspect ratio of Height to Width does not match the original image’s aspect ratio. In this case, the dimension specified here will be clipped (cropped) to avoid distorting the image. This attribute can have one of three values: Height, Width, or Max (E.G. use the largest dimension). When the image is clipped, it will be centered and clipped on each side evenly, instead of clipping everything from one side.

Each of the following attributes can be assigned to one and only one image size; every attribute must be used. They define where a particular image sized should be used within the workstation. If you add a particular attribute to more than one image size, or fail to assign an attribute to one of the image sizes, workstation errors will result. Multiple attributes can be defined on a single image size as long as the attributes are unique. For example, you could specify both the "Freeform" and "Browse" attributes on a size named “Large.” However, you can’t define the “Freeform” attribute on both a “Large” and “Medium” image size. Setting an attribute to 0 is the same as not defining that attribute on a particular element. Therefore if you’d like to set an attribute to 0, simply leave it off of the <Image> element you are configuring.

Freeform – When set to 1, this indicates that the size should be the default size used in the freeform editor. The freeform editor allows you to manually choose which size to use – this attribute merely defines the default.

Browse – When set to 1, this indicates that the size should be the default size displayed within the Web Content Management’s Results tab.

Content – When set to 1, this indicates that the size should be the default size displayed within the Web Content Management’s Content tab.

Thumbnail – When set to 1, this indicates that this size will be the default size for the File Picker dialog used by the properties tab, and other various components.

PhotoLarge – When set to 1, this indicates the size should be used as the "Large" photo size in the Photo Block.

PhotoMedium – When set to 1, this indicates the size should be used as the "Medium" photo size in the Photo Block.

PhotoSmall – When set to 1, this indicates the size should be used as the "Small" photo size in the Photo Block.

You may define as many image sizes as necessary for your purposes. For every new image size, simply declare a new <Image> element. Below is an example of a configuration defining four different image sizes:

<Image Size="640" PhotoLarge="1">Large</Image>
<Image Size="320" PhotoMedium="1" Content="1">Medium</Image>
<Image Size="160" PhotoSmall="1" Freeform="1">Small</Image>
<Image Width="80" Height="80" Clip="Max" Browse="1" Thumbnail="1">Thumbnail</Image>

Note: XML is always case-sensitive
 

 Related Documents

Knowledge Base Article: How to Crop Images

Knowledge Base Article: How to Resize Images

Knowledge Base Article: How to Rotate Images

Knowledge Base Article: How to Edit Multiple Images

Knowledge Base Article: Image Dimension Constraints in Image Management