To request editing rights on the Wiki, click here.

Help:Wiki University Wikitext--Images and Text

From FamilySearch Wiki
Jump to navigation Jump to search

Lessons


Intermediate


Advanced


Flexbox


Additional Helps

How text behaves around images[edit | edit source]

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.

  • If the image is first and text follows, the text will appear beneath the image like so:

Ireland Countryside.jpg
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[1].

  • NOTICE the text follows the image.
  • NOTICE the text does not fill in the space to the right of the image.
  • NOTICE if the text is beside the image and not below the photo add a space after the image code.

Floating text to the right of the image[edit | edit source]

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:

[[File:Ireland Countryside.jpg|250px|left]]

Ireland Countryside.jpg

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[edit | edit source]

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:

[[File:Ireland Countryside.jpg|250px|right]]

Ireland Countryside.jpg

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:

[[File:Ireland Countryside.jpg|250px|thumb]]

Ireland Countryside.jpg
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.

Embedding a PDF file[edit | edit source]

PDF.jpg

On occasion, you may have PDF document you wish to link to on a particular page, follow this procedure:

  1. You have to know the name of the PDF file such as: "File:Beginning Research Techniques.pdf"
  2. Next, change the word "File" to "Media" so it looks like this: "Media:Beginning Research Techniques.pdf"
  3. Then, place opening and closing brackets [[ and ]] on either end of this link like so: [[Media:Beginning Research Techniques.pdf]]
  4. When you place this coding on a page, it will appear like this: Media:Beginning Research Techniques.pdf
  5. If you would like to have a better title than the name of the link, you can add after "pdf" a pipe character "|" along with the name of the PDF file you would like your patrons to see such as "Beginning Research Techniques"
  6. Here is the what that bit of code will look like: [[Media:Beginning Research Techniques.pdf|Beginning Research Techniques]]. Notice the | character separating the name of the link from it's title.
  7. On your page this is what you will see: Beginning Research Techniques
  8. After you have created this link you can copy and paste it where you want it on the page.

Here are the steps abbreviated:

  • File:Beginning Research Techniques.pdf
  • Media:Beginning Research Techniques.pdf
  • [[Media:Beginning Research Techniques.pdf]]
  • [[Media:Beginning Research Techniques.pdf|Beginning Research Techniques]]
  • Don't forget the pipe | symbol between the link and the name you give it.


Try these out[edit | edit source]

Tests.gif
Exercises

Ireland Map.gif

  • 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.


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.
  1. If you wondering what this text is, it is called Lorem Ipsum. It is pseudo-Latin text which is just to illustrate layout so that the viewer will not get caught up reading the text instead of paying attention to the concepts being taught.