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:
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’
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:
Hope that helps,
Elaine