Syndicate

Syndicate content

Sponsors

Many thanks to the following sponsors of this site!

Science & Health Network
 
Seventh Generation is the leading brand of non-toxic household products for a clean home, a healthy family and a safer world.
 

Home › Living Library › Pictures › About this book

Incorporating pictures inline

-->

Incorporating pictures inline

September 21, 2007 - 10:22am — Nancy Myers

This is an example of using tables to control inline display of photographs in the body of a page or story. This method is useful if you want to control how much white-space is shown around your images. This can also be controlled by working with style sheets for the Drupal Theme being employed but is only recommended for advanced users.

  1. To create a table, click on the Edit tab above the content in this page. Click on the Insert/Edit table icon in the Body block. A dialog window will open asking for Table Properties. Set the number of rows and columns and set the Border property to '0'. Also, to space things out nicely, set the Cell Padding value to '2'.

  1. In this example, we have a table with three rows, two columns and no border. Press Ok and you will now see a table inside the body block. Click in the first cell of the table and start typing...then move your cursor by clicking into the cell on the right. Use the Insert/Edit image icon and select an image to add. Browse to locate or upload your image. Click ok and you will now see your image in that cell.
  1. To align the photo properly, right click inside the cell region and select Cell then Cell Properties. In the dialog box that appears, you can change the horizontal or vertical alignment of the cell/image. In this example, we have the image aligned at the top of the cell and have used the Vertical Alignment set to 'Top' to accomplish this.

 

 

Alternatively, you can add images inline and use the align setting in Image Properties to control how the image is displayed INSTEAD of using tables. This is a simple method for adding photos into a page with sections of text. It will give a nice even spacing to paragraphs and wrapped text. Note though, that there is no control over how much padding (added space around the image) you can apply using this method. If that is a concern, see the above instructions for using tables.

To work with images in this fashion:

  1. Click on the Insert/Edit image icon and select an image to add to the page.
  2. Browse to locate or upload your image.
  3. In the 'Align' field, select Right (will produce layout as shown in this example) or Left.
  4. Press Ok to accept.
  5. The image will be justified depending on your selection for alignment. Start entering your text. You will see that the image will remain fixed in the position you've specified and your text will wrap nicely around it.

 

 

‹ About this bookupAnn Altman's Guardians ›

Powered by Drupal

Creative Commons License
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.