Image Sizes
About Image Sizes
When an image is uploaded to your Warehouse, several duplicate versions of the image are automatically created and saved as seperate copies. One copy will be created for each Image Size your site uses. Each of the Image Sizes are set to a specific resolution, and used for a different purpose. For example, "featured" Posts will use the "Featured" Image Size, while Image Galleries will use the "Photo Gallery" Image Size.
Images that are displayed within the Content Elements on your site are not actually the originally uploaded image file, but rather one of the Image Size copies that have been created and set to a standardized resolution. What this means is that when a set of images are, for example, added to an Image Gallery on a page, it is the "Photo Gallery" Image Size copies that are displayed, and not the original files. This is done to keep your Content Elements at a consistent size, regardless of the resolution of the original images - each of your Image Galleries will always take up the same amount of space on a page.
Along with keeping your various Content Elements at a consistent size, another benefit of using Image Sizes is that each copy can be edited independently of the others. For example, if you have one image that appears in both an Image Gallery and a featured Post, the copy attached to the Post can be cropped by editing the "Featured" Image Size, while the "Photo Gallery" Image Size can remain unedited.
Image Sizes Example
In this example, the original image (shown below) is uploaded to the Warehouse. When the image is uploaded, several different copies are automatically created - the Image Sizes.
Original
The originally uploaded image is 800 x 600 pixels. This image is automatically duplicated, and used to create the various Image Sizes, which are shown below. These copies are what will be displayed in the site's Content Elements.
Context
Medium 226x152 image. No specific usage/multi-purpose Image Size.
Display
Medium - Large 325x219 image. No specific usage/multi-purpose Image Size.
Featured
Large 470x320 image. Used to display images attached to "featured" posts, often on the home page of a Web site.
Photo Gallery
Large 800x539 image. Used to display the images added to Photo Gallery content elements.
Medium Square
Medium 200x200 image. No specific usage/multi-purpose Image Size.
Thumbnail
Small 100x67 image. No specific usage/multi-purpose Image Size.
Content Elements that use Specific Image Sizes
Content Elements on your site, such as Image Galleries, are assigned an Image Size. Going by the list of Image Sizes above, the images that appear in Image Galleries will always be displayed at 800x539, regardless of the size of the original image that was uploaded to the Warehouse.
If the image you have uploaded is not at or near the resolution of a Content Element's set Image Size, it will automatically be modified to fit. This may result in your image appearing "cut off" or "stretched," depending on its original resolution. As you can see in the example images above, the "Medium Square" Image Size appears to be cut off.
This occured because the original image resolution does not line up with the resolution of the "Medium Square" Image Size - the other image sizes have a "landscape" orientation, like the original, while the "Medium Square" does not.
As the Image Sizes are each separate files, however, they can be edited independently of one another. For example, the "Medium Square" Image Size can be cropped to better display the content of the original image (shown below), while the remaining Image Sizes can be left unedited, or modified in different ways.
Note, however, that if the original image resolution is smaller than the resolution listed for the Image Size, it may appear "stretched" or pixelated on the site, even if it has been cropped to fit the Image Size. The solution for this issue is to upload a higher resolution version of the image, or use an alternate image with a higher resolution. In a best-case scenario, the uploaded image will be at or slightly above the resolution for the largest Image Size (usually "Featured" or "Photo Gallery").
Selecting an Image Size when creating Content
When adding an image to the "Content" section of a Text Block or Post, you will be able to choose which of the Image Sizes you would like to use.
This allows you to choose an Image Size that best compliments your text. If you are adding multiple images, you can use this feature to keep the size of your images consistent, regardless of the size of the original files.
Reassigning the Image Size for Content Elements
The Text Block and Post Browser elements include the option to select an Image Size in their "Settings" menu.
The default "Display Image" setting is "No," however, when this is set to "Yes" and an image is attached to a Post, or the "Properties" section of a Text Block, it will be displayed at the at the selected Image Size. The Image Size setting can be used in combination with the "Layout" settings (where available) to customize your Content Elements, such as when creating "Image Blocks."
Creating New Image Sizes
If none of the existing Image Sizes meet your needs, you can create a custom Image Size. To do this, first mouse over the "Warehouse" link, located in the menu at the top of any Digital Bell page, to create a drop-down menu. In the drop-down menu, mouse over the "Files" link to create a second menu. In this menu, click the "Images" link.
In the "Images" section, click the "Image Sizes" link, located in the right sidebar of the page. This will bring you to a list of the existing Image Sizes. Here, click the "Add Image Size" button.
After clicking the button, you will be taken to the 'Add Image Size" form. The form fields are explained below.
Title: The title of your new Image Size
Name: This field will auto-complete, based on the title, and does not need to be modified.
Max Width: The width of the displayed image, in pixels.
Max Height: The height of the displayed image, in pixels.
Is exact: Selecting "Yes" will create the image with the exact Max Width and Height entered above. Selecting "No" will create an image that only meets one of the values entered above (either Width or Height), while keeping the aspect ratio of the originally uploaded image.
Fill Color: Enter a color in Hexidecimal format that will be used to fill in any blank space created when fitting the image to this image size.
Create Min Width: Enter a value in pixels. This value will be compared to the width of an uploaded image, to determine if this Image Size should be created for it.
Create Min Height: Enter a value in pixels. This value will be compared to the height of an uploaded image, to determine if this Image Size should be created for it.
Once you have completed the form, click the "Submit" button to create your new Image Size. Note, any images uploaded before this Image Size was created will need to manually create a copy at this size. This is done on the "Edit Image" page for the image.