grAdvanced Image Horizontal Display

AdvancedImage - Horizontal Display

The addition of text only capabilities has greatly added to versatility of Advanced Image. The display below is just one example of the capabilities of this module to produce great looking pages. A layout like this one has a lot of possibilities. It could be used for product listings, team rosters, employee lists, faculty member lists, etc.

In addition to laying out a page with images and text, Advanced Image my also be used to create a page with newspaper like columns.
The steps that we took to produce this demo are listed below. Download the free trial version and try your hand with Advanced Image.

Angel Island

This demo will illustrate the flexibility of Advanced Image. By selecting a combinatation of image items and text only items, you may arrange them in any order that you want. Thus, the text may appear above, below, to the left or right of the image.

British Columbia

Set Repeat Columns and Display Format

In this example, the 'Display Format' has been set to Horizontal and 'Repeat Columns' has been set to 2. This allows us to create a row with two columns, then repeat tis arrangement as needed.

PNG Image

Set View Order

To get the image on the left and the text area on the left, set the view order off the image and the text areas to alternating values. In this example the images are numbered a, c, e, g, and i. The text areas are numbered b, d, f, h, and j.

Lake Morraine

Choice of Ordering Values

I chose to use alphabetical ordering, but could have used numerical values. If you choose to use numerical values, keep in mind that the order is evalaluated on the value of the first character. Therefore, 10 comes before 9, as the 1 is evaluated as being lower that the 9. If you are going to use numerical ordering, plan your order carefully.

PNG Image

Text/HTML Editor Size

The width of the text editor takes its width from the item width settings. In the case of a narrow text block like this one, it is only 220px wide. This makes editing difficult. To over come this, temporarily set the text width to a convenient value to edit the text. Then return it to the display value.