All About Images

This is a detailed walk-through on creating and using images with MonkCMS/ Ekklesia 360. For help uploading image files, refer to Adding Media.

Supported formats

The following formats are supported by the CMS and will be recognized as image files.

Other formats may be uploaded, but may not be compatible with the Image Resizing/caching system.

Color modes: RGB v. CMYK

All images used on your website should be using the RGB color mode.

An image file has both a file type and a color mode. While the file type dictates how the digital information is stored in the file, the color mode defines how the basic colors are mixed to form the resulting image. Color modes will vary depending on the usage intent of the image.

For images intended for print, the CMYK color mode is used to allow printers to read exactly how much Cyan, Magenta, Yellow, and Black ink should be used to make a print. For the web, images should use the RGB color mode, which is optimized specifically for screens which project Red, Green, and Blue light. Because CMYK images are intended for print, some web browsers do not support them.

If you have a CMYK image and are not sure how to convert it to RGB, you can use any good image editing tool, like the ones below, for conversion.

Automatic resizing

All sites using MonkCMS or Ekklesia 360® can take advantage of the fantastic Image Caching API, which automatically creates versions of your images resized specifically for your website.

For most e360 Theme designs, Image caching is already enabled. If you don't believe your images are fitting on your website well, contact Support to find out if image caching can be enabled.

There are two ways the Image Caching API can resize your images:

Specified Width & Height (cropping)

The image will be resized to fill the container's specified width and height (set in the template code). Then, the image is centered mathematically, and the excess on either side is cropped. This is best for images that need to fit a specifically-sized container exactly.

If the original image was not designed specifically for the container's proportions, you may or may not desire the cropping of the image from the exact center. For best results, note the dimensions of the container when producing your images.

Below is an example of this method:

Maximum Width & Height (no cropping)

With this method, the image will be resized proportionally only if the image exceeds the maximum width, maximum height, or both (set in the template code), and no cropping is used. This is great for gallery images which don't need to be confined to specific dimensions, but need to at least be smaller than the user's screen size. Below is an example of this method (shown for Width):

Important notes about image caching:

Images smaller than the specified size will not be enlarged.
Images are resized proportionally. If you wish, dimensions can be set in the HTML code to force the image to a specified size disproportionally ("stretching").
If you routinely optimize your images for your website, you may have no need of Image Caching. Contact us to have it disabled for the given containers. One benefit of disabling Image Caching is a very slight improvement in image quality (the system must recompress the resized image before storing it).

Deciding on image options

For each designated image area in a site template, a developer can build in your custom image options according to your specific preferences. See the flowchart below for determining your image options for rotators, header images, etc.

Image Options Flowchart