Help:Wiki University Wikitext--Images and Text





<< Previous Chapter Next Chapter >>

How text behaves around images
When images and text load on a page they appear in the order they were put in the edit box. However, it has some draw backs. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ac finibus odio. Nulla efficitur lorem odio, vitae commodo lacus rhoncus in. Nullam imperdiet dui ligula. Nulla varius congue urna, egestas molestie turpis tincidunt vitae.
 * If the image is first and text follows, the text will appear beneath the image like so:
 * NOTICE the text follows the image.
 * NOTICE the text does not fill in the space to the right of the image.

Floating text to the right of the image
If we want to have the text "wrap" around the image or in this case appear to the right of the image, we need to put in a pipe and the word "left" in the image code:  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ac finibus odio. Nulla efficitur lorem odio, vitae commodo lacus rhoncus in. Nullam imperdiet dui ligula. Nulla varius congue urna, egestas molestie turpis tincidunt vitae.
 * This should remind you of how we can place an image either on the left or right side of a page.

Floating text to the left of the image
If we want to have the text "wrap" around the image on the left side of the image we either put in |right in the image code or |Thumb if we want a border on the image as well. The code for text "wrap" around the left of the image:  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ac finibus odio. Nulla efficitur lorem odio, vitae commodo lacus rhoncus in. Nullam imperdiet dui ligula. Nulla varius congue urna, egestas molestie turpis tincidunt vitae. The code for text "wrap" around the left of the image with a border:  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin ac finibus odio. Nulla efficitur lorem odio, vitae commodo lacus rhoncus in. Nullam imperdiet dui ligula. Nulla varius congue urna, egestas molestie turpis tincidunt vitae.

Try these out


 Exercises


 * Using the above image, install our Lorem ipsum paragraph on the right side of the image.
 * Using the above image, install our Lorem ipsum paragraph on the left side of the image using the thumb attribute.

Check your answers

 Quick Quiz
 * To float the text to the right of an image, you need to:
 * A. Do nothing, it does so in default.
 * B. Place |left in image code.
 * C. None of the above.


 * To float the text to the left side of an image, you can only use |right coding
 * A. True.
 * B. False.

Check your answers

<< Previous Chapter Next Chapter >>