Using Image Styles for Better Page Design

The Internet Ministries Website Templates come with several image styles for better page design. Image styles can be applied with pre-defined Classes through the "Insert/Edit Image" popup.

Implementation

  1. While editing a page resource, click the "Insert/Edit Image" button. You can either insert a new image or add a class to an existing image. For the latter, click once on the image before clicking the "Insert/Edit Image"
  2. Choose your image. You can use the file browser to upload and/or select the image from your website's image repository
  3. Choose your class. A number of predefined classes are available. Keep reading to learn more about what is available to you.

Available Image Classes

The available classes are:

  • Image Left
  • Image Right
  • Image Center
  • Image Left 25%
  • Image Right 25%
  • Image Left 50%
  • Image Right 50%
  • Image Center 75%
  • Image Left No Border
  • Image Right No Border
  • Image Center No Border

These classes, based on their literal descriptions, are a combination of the following styles:

Alignment

  • Left - Image floats to the Left of the text
  • Right - Image floats to the right of the text
  • Center - Image is centered horizontally on the page

Sizes

  • (blank) - Image size is specified by user or displays image at its actual size.
  • 25% - Image resizes to always be 25% of the column width. 
  • 50% - Image resizes to always be 50% of the column width. For mobile devices, image centers horizontally on page.
  • 75% - Image resizes to always be 75% of the column width. For mobile devices, image centers horizontally on page.

Border

  • (blank) - A one pixel gray border is placed around the image as a frame
  • No Border - No border is used.

As an example, an image with the class "Image Right 50%" will float to the right of the text, be 50% of the column width (except for mobile devices) and have a border. 

Example of Image with the class 'Image Right 50'
Example of Image with the class "Image Right 50"