Starter Kit for an Article Containing a Series of Rows,
Each Row Containing an Image with Associated Text

To make use of this Article as a Starter Kit....

  • start the Joomla Article Editor to create your own new Article,
  • switch the Article Editor to HTML view,
  • follow this link,
  • copy the text displayed, which is the HTML for the page you are now looking at
  • paste the text into your new Article while in HTML view,
  • then switch your Article back to 'Normal' view. 

Then you will have something you can chop around as much as you please to create a new Article in this style.  The Article which now follows gives you detail about how you might make use of this style and layout of text, incorporating pictures in these ways, within your own Article.

If you want to use the text style used from here on, you will need to start typing within the text of any appropriate paragraph.  If you type elsewhere, you will get the system default font type and text size. 

--------------------------------------------------------------------------------------- TABLE FOLLOWS ---------------------------------------------------------------------------------------

Christian Aid

This is a template for a two-column table.  That kind of layout can be useful when you want to display a series of images, each with its corresponding supporting text.  See Other Useful Web Sites for an example.

hazard

In this way of defining the layout, it is likely that the text beside any one picture is not part of a single story told by the Article.  For Articles like that see the template for a story with pictures.

Methodist logo You may wish to provide a short description of a picture as a subtitle beneath the image, perhaps using a distinctive text format, e.g. italic text, smaller text, distinctive font.  Alternatively you could write text on top of the image (using an image editor) or specify 'mouse-over' text.

--------------------------------------------------------------------------------------- TABLE ENDS ---------------------------------------------------------------------------------------

In this Article, images are kept apart from the text by specifying that there should be a 10-pixel margin round every table cell: 'cell padding'.

This page layout for an Article uses a fixed width for the column of images, but the column of text will occupy whatever space remains in the page template you are using.

The widths of the cells containing the images have been defined to be just 20 pixels more than the widths of the pictures.  If that is not done, the cells containing pictures will be roughly the same width as the adjacent cells containing supporting text, leaving lots of white space around the pictures.

If you find you are having to scroll from side to side as you edit you can click the icon on the editor palette to toggle fullscreen mode.  It is currently the last icon in the palette.  Let your mouse/pointer hover over any icon in the palette and explanatory text will appear ('mouse-over' text).

MHA logo 100x55

If you have been editing after toggling to fullscreen mode, when it is time to save the Article you need to toggle from fullscreen mode back to normal mode.

orb cross 80x80