435-773-2558

PrimeAgile Image Management Module

Online Image Management Overview

In PrimeAgile, there is almost an unlimited amount of actions that can be done with images. We include many features such as: read, convert, resize, flip, mirror, rotate, distort, shear, transform, color adjustment, special effects, text, lines, polygons, ellipses and curves.

These features can be accomplished with software packages, but  ImageMagick, GraphicsMagick, dcraw, ufraw, exiftool, or jpegtran, but it can also be done in PrimeAgile.

Image management is an important module (building block) for PrimeAgile applications. We use the image management features in many types of applications, including these:

  • PrimeAgile CMS - a Content Management System for building and maintaining content on websites
  • A sign or shirt customization company which wants to allow a preview of text, color and font
  • The PrimeAgile Person Manager module - allows photos of staff, customers, and agents
  • Any application that requires uploading, storing, rotation, resizing or other image manipulation

If you want to know where to get images for your website, go to our List of Image Resources page.

Uploading an Image

Images can be added one at a time, or images can be uploaded in bulk. It is ok to upload a full size original upload and crop or decorate it on the site. More information about the bulk image uploader can be found here.

Auto Image Resizing

In most Content Management Systems the CMS allows image uploading for a page or post, however, the image has to be correctly sized to work properly with the page.  Sometimes users don't resize their images and they end up with a home page that has two 4 MB  images on it.  This means when loading the home page on a cell phone for example 8 MB of data has to be downloaded just to view the page. An experienced webmaster would know to reduce the size of those images down to something much smaller, but still doing so is a time consuming process.

The best way to put images on the website is to have the size of the actual image the same size as you want it to appear on the site.  Of course you can tell a 400  pixel image to fit in a 100 pixel space just fine, but it will take 4 times as much bandwidth to view it.  Ideally that image should be sized appropriately for the pages.  This means that if a page has a page preview, say a list of blog posts or a list of products, then it may have a small image.  If you clicked on the blog or product details, then you would want to use the large version of the same image.

To make it easier for users of PrimeAgile CMS to manage images, any time an image is uploaded, it is automatically loaded in all of the sizes appropriate for that website.  This saves tons of time for the person who is uploading the pictures.  This allows them to upload the original 4MB image.  PrimeAgile Image Manager will store the original image, and create sizes appropriate for that site based on the website settings.

If those settings change because a layout change was made that changed the required image size from 300px to 250px for example, all of the images can automatically be re-sized to the new requirement.

Rotating Images

When a picture is taken with a phone, ipad, or camera, the picture may be taken horizontally or vertically.  it is ok to just upload the image as is.  It is not necessary to pre-process it. After it is uploaded just click the rotate button to rotate it so that it appears how you want it.

Image Catalog

All of the images in a website can be managed in the image catalog. Images can be edited, deleted, re-sized, re-labeled and managed in this catalog.

Image Pages

Each image has its own page. This image page gives the details of that image and this page can be translated into any appropriate locale available for the website.

Watermarks, Coprights and Other Decorations

Optionally any image can have a watermark or other decorations added to it using the decorations tool.  Decoration settings can be configured for the site then applied to any image, or they can be applied on an image by image basis. This allows images which are uniquely the property of the company to be watermarked, while allowing images which are not original or owned by the company to not be watermarked. It also allows the creation of things like Custom Posters, Business Cards and other printed materials.  See Decorations for more information...

Cropping

Cropping is used to make images the right shape for a website. If a site uses a catalog for example the catalog pages look nice when all the images are the same shape, but when one is disproportionate to the others, say tall and skinny or short and wide, it can make a mess of the page layout.

Images when they are imported are automatically cropped based on our crop algorithm. Additionally they can be manually croped to make adjustments to the image.

For more details on the image cropper go to our image crop page.

Predefined Image sizes based on Width

Each template has a set of Pre-Defined Image Sizes. Images are automatically created the appropriate size for the template based on those sizes. If the template changes, then an auto-resize action can be initiated to resize an entire catalog of images.

By default the image size is determined by the width of the image with an automatic proportionate height. It is also possible to predefine images by the height with a proportionate width, but there has not been a request for this feature yet.

Predefined Image sizes based on width and height.

If an image has to fit into a certain size block, then a height and width are both specified and the image sometimes must be cropped to fit into that size block. In this case the Image AutoCrop and Manual Image Crop tools must be used to prevent the image from being distorted.  Sometimes a really narrow image may need to have blank transparent space provided at the bottom or sides of the image to make it fit into the appropriate block.

Auto Image Size

All original images are stored on the server.  If the image size being requested is 400px and a 400px is in the default image sizes for the template being used for that site then the image will already exist and be served up appropriately. If however the template doesn't use a 400px image and a 400px image is asked for, then a 400px image will be re-created from the original and placed on the server and made available for future viewing.

This may be a problem if for example a 100x100px image was requested and the original image dimensions where 400x800 because about 1/2 of the height of the image would need to be cropped.  in this case the Image AutoCrop tool would be used, however the crop could be modified using the Manual Image Crop tool to make the crop as good as possible.