Have the option of multiple layouts within one module without the need for additional fields by using the editor-focus attribute.
In this example, one module contains all the options you need for both an image left/text right layout, and an image right/text left layout.
Start off with a three column module, with text in the left hand column, an image in the middle column and text again in the right hand column.
The editor focus attribute will enable you to type in the content you need once and it will apply to both of the text columns. It also means you can have one editable apply to both pieces of text and when you click it, you'll be taken to the relevant field in the editor. You can then use rules and checkbox/dropdown fields to remove the left or right column depending on whether you want an image left layout or image right layout. In this example we'll be using a dropdown field.
In the first column, put the text you want to apply to both columns inside an editable:
<td> <editable name="headline" label="Headline" rich> Headline </editable> </td>
Then with the same bit of text in the right hand column you can use the editor focus attribute:
<td>
<div replace="{{editables.headline.content}}" editor-focus="editables.headline"></div>
</td>
The original editable from the first column is being referenced in the replace attribute, so whatever you write there will also apply to the text in the right hand column. Even though there is only one editable in the first column, the editor-focus attribute will take you to this editable in the editor when the text in the <div> tag is clicked on.
So far you will have a three column module with text either side of an image. You are then able to use rules on the two text columns to either include or remove them depending on the value that is set for a certain field in the editor.
In this example we're going to include a dropdown field at the top of the module. This will have the options of left or right depending on where you want the image to appear:
<module name="img_text" label="image and text"> <field type="dropdown" name="left_right" label="image left or right" default="right"> <choice value="left"></choice> <choice value="right"></choice> </field>
Once you have this field you will need to use it to remove or include the two text columns depending on whether you want the image on the left and the text on the right or vice versa.
On each of the <td> tags containing the two text columns you can use rules to control which bit of text will show in the Taxi preview.
On the left hand column you can have a rule to remove that entire <td> if the 'left' option is chosen from the dropdown:
<td rule="{% if left_right =='left'%}{%remove%}{%endif%}"></td>
On the right hand column you can have a rule to remove that entire <td> if the 'right' option is chosen from the dropdown:
<td rule="{%if left_right =='right'%}{%remove%}{%endif%}"></td>
So if left is selected from the dropdown it will create an image left, text right layout, and if right is selected then it will create a text left, image right layout.
The default layout of the module can be set by using the default attribute on the dropdown field.
You can also use this technique with a checkbox field. This will create a toggle in the editor to control the layout of the module.
<module name="img_text" label="image and text">
<table width="600px" align="center">
<field type="dropdown" name="left_right" label="image left or right">
<choice value="left"></choice>
<choice value="right"></choice>
</field>
<field type="number" label="body font size" name="font_size_body" default="16"></field>
<field type="number" label="headline font size" name="font_size_headline" default="28"></field>
<table align="center">
<tr>
<td rule="{% if left_right =='left'%}{%remove%}{%endif%}" width="300px" valign="top">
<table>
<tr>
<td replace-style="padding:10px;font-size:{{font_size_headline}}px;" >
<editable name="headline" label="Headline" rich>
Headline
</editable>
</td>
</tr>
<tr>
<td replace-style="padding:10px;font-size:{{font_size_body}}px;" >
<editable name="text" label="Body Copy" rich>
Text
</editable>
</td>
</tr>
</table>
</td>
<td width="300px">
<img src="IMAGE URL GOES HERE">
</td>
<td rule="{%if left_right =='right'%}{%remove%}{%endif%}" width="300px" valign="top">
<table>
<tr>
<td replace-style="padding:10px;font-size:{{font_size_headline}}px;">
<div replace="{{editables.headline.content}}" editor-focus="editables.headline"></div>
</td>
</tr>
<tr>
<td replace-style="padding:10px;font-size:{{font_size_body}}px;">
<div replace="{{editables.text.content}}" editor-focus="editables.text"></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</table>
</module>