How do I align image frames to left or right of text?

Posted in: , ,

Overview

This article describes how to align image frames to the left or right of text. Also called “wrapping text” this will enable you to float images along side text within your website.

General Instructions:

The process entails first inserting your image frame just as you normally would, and then wrapping the shortcode within a bit of HTML to enable the floating image / wrapping text.

  1. Insert your image frame shortcode just as you normally would using Karma’s Visual Shortcode Manager.
  2. Switch to the Text/HTML view of the WordPress content editor.
  3. Wrap the Image Frame Shortcode using the code samples below.
  4. That’s it! Enjoy :)

Align Image Frame to the Left:

<div class="alignright">...<em>Insert Image Frame Shortcode here...</em></div>

Example:

<div class="alignleft">[frame style="modern" image_path="" link_to_page="" target="" description="" size="portrait_thumb"]</div>

Align Image Frame to the Right:

<div class="alignright">...<em>Insert Image Frame Shortcode here...</em></div>

Example:

<div class="alignright">[frame style="modern" image_path="" link_to_page="" target="" description="" size="portrait_thumb"]</div>

Please note:

If the wrapping text appears to be misaligned simply add the following code right after the text content.

<div class="clear"></div>

(click screenshots for full-size view)

wrap text, float image frame, wrapping text, floating image, floating image frame