Joomla 1.7 Tutorial – How to Wrap Text Around Images

by Elaine on September 7, 2011

Joomla 1.7 Help – How to Get Text to wrap around Images

This tutorial will help you wrap text around images in your articles.   There are two ways you can achieve this.

1.  Edit the html

2.  User interface in your Article Manager.

One thing you will need to do before editing the html is to enable ‘No Filtering’ option in the Article Manager Options – Click here to read that post.

Here is what my article looks like before wrapping text around my images:

joomla 17 elaine cmsmind no wrap images Joomla 1.7 Tutorial   How to Wrap Text Around Images

Joomla 1.7 Image has no wrap text

Below I will show you how to wrap your text around your images with

1: Edit the HTML

  • Login to your Joomla 1.7 Administrator Panel
  • Click on Article Manager and edit your article
  • Click on the HTML icon
  • Add in the code between the img src code brackets

float: left; margin-left: 5px; margin-right: 5px;

  • for example:

<img src=”images/paris-marathon-2010.jpg” border=”0″ style=”border: 0; float: left; margin-left: 5px; margin-right: 5px;” />

2.  User interface in your Article Manager. 

  • Edit your article
  • Click on the image and Click on the ‘Insert/Edit Image” icon
  • Set the following values in the window:
    • Alignment = Left
    • Horizontal space = 5
    • Click on Update
  • Click  on ‘Save & Close’
joomla 17 elaine cmsmind edit image wrap left Joomla 1.7 Tutorial   How to Wrap Text Around Images

Joomla 1.7 - Insert/Edit Image Float Left

After you are done saving the article, you can refresh your Joomla 1.7 website and article.  You will see that the article is now floating left and your text is wrapped around the article to the right.  You can modify these float settings in the options above.  See the below screenshot how the article will look like:

joomla 17 elaine cmsmind text wrap image left Joomla 1.7 Tutorial   How to Wrap Text Around Images

Joomla 1.7 - Wrap Text around image

Hope that helps,

Elaine

 Joomla 1.7 Tutorial   How to Wrap Text Around Images

Elaine

Elaine is the founder of CmsMind, an online blog providing Joomla and Wordpress tutorials. Elaine lives in Toronto and when she is not online, she is either Marathon and Triathlon training or travelling and racing somewhere in the world. Find her also at: Save Money, Premium Themes and Templates, and at Webhosting Tips.

More Posts - Website

Leave a Comment

Captcha Captcha Reload

Older Post:

Newer Post: