Text contents

There are currently two kinds of textual editable content.


Single Line

A single line content without formatting except for hyperlinks. For a tag to be converted to a Single Line editable content, you simply have to add the ibr-single-line attribute as shown below.




Example:

  

<h2 ibr-single-line>My Title Here</h2>

  

Multi Line

A Multi Line content si a rich text content with full formatting. For a tag to be converted to a Multi Line editable content, you simply have to add the ibr-multi-line attribute as shown below.



Example: 

 

<div ibr-multi-line>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis ornare neque. Ut turpis ligula, vestibulum id cursus iaculis, sodales in augue. Integer imperdiet risus libero, eu dictum dui efficitur sit amet. Donec mollis enim efficitur lectus sodales, at viverra urna commodo.</div>

 


Image content


An image can be rendered editable by adding the ibr-image attribute to it.

  • If the image doesn't have a defined src attribute value, the editor will display a temporary placeholder image of the specified size.
  • If the image size is not specified then the image will be displayed in a default size.
  • When an image is uploaded, it is automatically resized. Depending If height or width is specified, the image will be resized proportionally.

We strongly recommend to you specify at least the width so that the template is optimally displayed in the editor.




Exemple:

 

<img width="580" ibr-image-height="200" ibr-image-width="580" ibr-image>

 


Custom layouts

You can define custom layout blocks in your templates. Those blocks can be added and moved using the editor while creating your campaign content. To define a custom layout block, you need to wrap the block contents inside a DIV tag and add the ibr-layout="My Custom Block" attribute. The text portion of the attribute is used to describe the custom block contents and will be displayed to the end user.




Example:

 

<div ibr-layout="Left image and text to the right">
    <table class="row">
        <tr>
            <td class="wrapper">
                <table class="five columns">
                    <tr>
                        <td class="text-pad-left">
                            <img width="220" ibr-image-height="160" ibr-image>
                        </td>
                        <td class="expander"></td>
                    </tr>
                </table>
            </td>
            <td class="wrapper last">
                <table class="seven columns">
                    <tr>
                        <td class="text-pad">
                            <h5 ibr-single-line>Lorem ipsum dolor sit amet</h5>
                            <div ibr-multi-line>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis ornare neque. Ut turpis ligula, vestibulum id cursus iaculis, sodales in augue. Integer imperdiet risus libero, eu dictum dui efficitur sit amet. Donec mollis enim efficitur lectus sodales, at viverra urna commodo.</div>
                        </td>
                        <td class="expander"></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>