Joomla 3.0 Tutorial – How to Wrap Text Around Images in Articles

by Elaine on December 18, 2012

Joomla 3.0 Tutorial on How to insert images into articles and wrap text around theme.  You can easily do this by inserting an article that is aligned to the ‘Left’.  If you leave the Alignment option to be ‘Not Set’ the text will not wrap around the images.  Below I will show you how I inserted an image and my text was wrapped around the image.

See my screenshot below of the difference between aligning the image to the ‘left’ and ‘not set’.

joomla 3 0 tutorial how to wrap text around image in article 4 Joomla 3.0 Tutorial   How to Wrap Text Around Images in Articles Joomla 3.0 – Wrap Text Around Images in Articles

Overview of How to Wrap Text Around Images in Articles

  1. Edit an Article in Article Manager
  2. Insert Image – Select Alignment in the Article Text Editor
  3. Edit Image and Select Left Alignment in Article Text Editor
  4. See Text Wrapped Around Image in Article Text Editor

Steps:

1.  Edit an Article in Article Manager

You will edit your article in Joomla 3.0 Article Manager.  I don’t have an image that I want to use so I will be uploading a new image.  If you already have an image in your article and you want to wrap text around that one, jump to step 3.

joomla 3 0 tutorial how to wrap text around image in article 1 Joomla 3.0 Tutorial   How to Wrap Text Around Images in Articles Joomla 3.0 Tutorial – Insert Image to Wrap Text around in Article
  • Login to your Joomla 3.0 Administrator Backend
  • Click on ‘Content’,’ Article Manager’
  • Click on the Article you want to edit
  • Click on ‘Insert‘ to insert a new image

2.  Insert Image – Select Alignment in the Article Text Editor

I will be inserting a new image.  Align the new image to the left so it will be aligned to the left and text will wrap around it on the right.  If you want to align it in the middle, text will wrap around it on the left and right.  You can play around with the alignment to see how text will wrap around it.  The only setting where text will not wrap is when the alignment is set to ‘Not Set’.

joomla 3 0 tutorial how to wrap text around image in article 2 Joomla 3.0 Tutorial   How to Wrap Text Around Images in Articles Joomla 3.0 Tutorial – Insert New Image into Article and Align Left
  • Click on image to insert
  • Click  on the Align – set to ‘Left
  • Click on ‘Insert

3.  Edit Image and Select Left Alignment in Article Text Editor

If your image is already inserted and you want to wrap text around that image, click on the image and click on the ‘insert image’ icon.  You can change the alignment to ‘left’ from there.  If you set the alignment to ‘Not Set’ then text will not wrap around the image.

joomla 3 0 tutorial how to wrap text around image in article 5 Joomla 3.0 Tutorial   How to Wrap Text Around Images in Articles Joomla 3.0 – Wrap Text around image in article
  • Click on the image
  • Click on the ‘Insert/Edit Image’ icon
  • In the ‘Insert/Edit Image Window’, set the following value:
    • Alignment = Left
  • Click on ‘Update’
  • Click on ‘Save & Close’

Now when you refresh your article on the frontend, you will see that your text is wrapped around your article.  In my example above, you can see that the first image has text wrapped around it because the alignment is set to ‘Left’ and the second image does not have text wrapped around it because I changed the alignment for it back to ‘Not Set’.

I hope that helps you,

Thanks,

Elaine

 Joomla 3.0 Tutorial   How to Wrap Text Around Images in Articles

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: