Loading...
JoomlaJoomla 1.6Joomla 1.7Joomla ArticlesJoomla Tutorials

Joomla 1.7 Tutorial – How to Wrap Text Around Images

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 1.7 Image has no wrap text
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 1.7 - Insert/Edit Image Float Left
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 1.7 - Wrap Text around image
Joomla 1.7 - Wrap Text around image

Hope that helps,

Elaine

Leave a Reply

Your email address will not be published. Required fields are marked *

Captcha Captcha Reload