Alternating image and text rows #

Three stories with the picture alternately left and right.

Life cycle: Build, example 21 of 35. Worked out on the Fit & Healthy site of Exponential 6.0.15+.

Contents #

1. In the Layouts editor
2. With templates
3. Which to choose
4. Check

In the Layouts editor #

1. Open Layouts > Layouts and the layout Landing Page / Home; the editor opens it in a draft.
2. Open the block palette (+ at the top left) and drag Zig-Zag (List) (group Listing) into the zone main.
3. Fill its collection.
4. Publish layout. The pages that use the layout show the block on their next view.

The media design renders list_zigzag with explayouts/block/list/list_zigzag.tpl; the wrapper gets the class list-zigzag.

With templates #

1. Override explayouts/block/list/list_zigzag.tpl in your design extension to change the rows for every zig-zag list.

Which to choose #

The view is ready-made; override only to change its markup.

Check #

• The image side alternates from row to row.

Related pages #

• How a block maps to its templates
• Build examples, every page
• Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.