Difference between revisions of "Mixing Text and Images"

Latest revision as of 09:56, 23 April 2008

Adding one picture

Left align

TYPE: [[Image:Documents_fr2.jpg|left|150px|]]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec in enim. Aliquam erat volutpat. Maecenas id nibh ut turpis lobortis commodo. Phasellus sed neque. Proin fringilla euismod libero. Etiam vel lectus. Aliquam dui. Curabitur venenatis molestie neque. Integer mi dolor, gravida at, accumsan eget, fringilla eget, arcu. Suspendisse euismod. Nam et lorem accumsan magna venenatis pellentesque. In et ante. Etiam magna. Cras rutrum mi quis tellus.

Sed mi eros, lacinia mattis, gravida vel, placerat posuere, lacus. Duis accumsan tincidunt sapien. Morbi sed velit. Etiam quis orci. Donec at velit sed lorem elementum feugiat. Curabitur ut ligula. Quisque in eros. Morbi sed enim id sapien tristique fringilla. Nunc ligula augue, pellentesque ac, nonummy id, semper eget, ante. Sed mi eros, lacinia mattis, gravida vel, placerat posuere, lacus. Duis accumsan tincidunt sapien. Morbi sed velit. Etiam quis orci. Donec at velit sed lorem elementum feugiat. Curabitur ut ligula. Quisque in eros. Morbi sed enim id sapien tristique fringilla. Nunc ligula augue, pellentesque ac, nonummy id, semper eget, ante.

RESULT:

Right align

TYPE: [[Image:Documents_fr2.jpg|right|200px|]]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec in enim. Aliquam erat volutpat. Maecenas id nibh ut turpis lobortis commodo. Phasellus sed neque. Proin fringilla euismod libero. Etiam vel lectus. Aliquam dui. Curabitur venenatis molestie neque. Integer mi dolor, gravida at, accumsan eget, fringilla eget, arcu. Suspendisse euismod. Nam et lorem accumsan magna venenatis pellentesque. In et ante. Etiam magna. Cras rutrum mi quis tellus.

Sed mi eros, lacinia mattis, gravida vel, placerat posuere, lacus. Duis accumsan tincidunt sapien. Morbi sed velit. Etiam quis orci. Donec at velit sed lorem elementum feugiat. Curabitur ut ligula. Quisque in eros. Morbi sed enim id sapien tristique fringilla. Nunc ligula augue, pellentesque ac, nonummy id, semper eget, ante. Sed mi eros, lacinia mattis, gravida vel, placerat posuere, lacus. Duis accumsan tincidunt sapien. Morbi sed velit. Etiam quis orci. Donec at velit sed lorem elementum feugiat. Curabitur ut ligula. Quisque in eros. Morbi sed enim id sapien tristique fringilla. Nunc ligula augue, pellentesque ac, nonummy id, semper eget, ante.

RESULT:

Right align with caption

TYPE: [[Image:Documents_fr2.jpg|right|200px|thumb|Caption]]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec in enim. Aliquam erat volutpat. Maecenas id nibh ut turpis lobortis commodo. Phasellus sed neque. Proin fringilla euismod libero. Etiam vel lectus. Aliquam dui. Curabitur venenatis molestie neque. Integer mi dolor, gravida at, accumsan eget, fringilla eget, arcu. Suspendisse euismod. Nam et lorem accumsan magna venenatis pellentesque. In et ante. Etiam magna. Cras rutrum mi quis tellus.

Sed mi eros, lacinia mattis, gravida vel, placerat posuere, lacus. Duis accumsan tincidunt sapien. Morbi sed velit. Etiam quis orci. Donec at velit sed lorem elementum feugiat. Curabitur ut ligula. Quisque in eros. Morbi sed enim id sapien tristique fringilla. Nunc ligula augue, pellentesque ac, nonummy id, semper eget, ante. Sed mi eros, lacinia mattis, gravida vel, placerat posuere, lacus. Duis accumsan tincidunt sapien. Morbi sed velit. Etiam quis orci. Donec at velit sed lorem elementum feugiat. Curabitur ut ligula. Quisque in eros. Morbi sed enim id sapien tristique fringilla. Nunc ligula augue, pellentesque ac, nonummy id, semper eget, ante.

Two pictures

TYPE: [[Image:Documents_fr2.jpg|left|200px|thumb|Caption]]

TYPE: [[image:building3.jpg|right|200px|thumb|Caption]]

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec in enim. Aliquam erat volutpat. Maecenas id nibh ut turpis lobortis commodo. Phasellus sed neque. Proin fringilla euismod libero. Etiam vel lectus. Aliquam dui. Curabitur venenatis molestie neque. Integer mi dolor, gravida at, accumsan eget, fringilla eget, arcu. Suspendisse euismod. Nam et lorem accumsan magna venenatis pellentesque. In et ante. Etiam magna. Cras rutrum mi quis tellus.

Sed mi eros, lacinia mattis, gravida vel, placerat posuere, lacus. Duis accumsan tincidunt sapien. Morbi sed velit. Etiam quis orci. Donec at velit sed lorem elementum feugiat. Curabitur ut ligula. Quisque in eros. Morbi sed enim id sapien tristique fringilla. Nunc ligula augue, pellentesque ac, nonummy id, semper eget, ante. Sed mi eros, lacinia mattis, gravida vel, placerat posuere, lacus. Duis accumsan tincidunt sapien. Morbi sed velit. Etiam quis orci. Donec at velit sed lorem elementum feugiat. Curabitur ut ligula. Quisque in eros. Morbi sed enim id sapien tristique fringilla. Nunc ligula augue, pellentesque ac, nonummy id, semper eget, ante.

Other Help Pages

The Wiki Guide

@@ Line 1: / Line 1: @@
+[[Category:Help|Text]]
 __NOEDITSECTION__
-[[image:building3.jpg|center|frame|Page being edited by [[User:Caroline|Caroline]]]]
+[[image:mixtop.jpg]]
+{|  width="100%" border="0" cellspacing="5" cellpadding="5"
+|-valign="top"
+| style="width:250px"| __TOC__
+|Adding pictures and text vertically down the page is not a problem, but if you want your text to wrap around one or more pictures, then you need to add special codes to the pictures.
-==Basic code==
+For more information, see '''[[Working With Images]]'''
-This method is rather unpredictable, especially if you need the list of Contents (TOC) to show and/or captions underneath either or both of the pictures.
+You need to put the code in for the picture first, then all your text.
+The picture will align to the left by default.
-N.B. If the image has no "built in" border you need to use |''thumb''| not |''frame''| as you cannot cotrol the size of the image with |''frame''|.
+This method is rather unpredictable, especially if you need the list of Contents (TOC) to show and/or captions underneath either or both of the pictures as this can cause problems with getting the line spacing correct for every viewer.
-This causes problems with getting the line spacing correct for every viewer.
+'''A more controlled layout can be achieved by using tables: [[Working With Tables]]'''
+|}
+==Adding one picture==
-See [[Adding Content to The Wiki ~ Images and Tables]] for explanation of codes for images.
+====Left align====
+'''TYPE:''' <nowiki>[[Image:Documents_fr2.jpg|left|150px|]]</nowiki>
-[[Image:Documents_fr2.jpg|left|150px|]]
-[[image:building3.jpg|right|200px|]]
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec in enim. Aliquam erat volutpat. Maecenas id nibh ut turpis lobortis commodo. Phasellus sed neque. Proin fringilla euismod libero. Etiam vel lectus. Aliquam dui. Curabitur venenatis molestie neque. Integer mi dolor, gravida at, accumsan eget, fringilla eget, arcu. Suspendisse euismod. Nam et lorem accumsan magna venenatis pellentesque. In et ante. Etiam magna. Cras rutrum mi quis tellus.
 Sed mi eros, lacinia mattis, gravida vel, placerat posuere, lacus. Duis accumsan tincidunt sapien. Morbi sed velit. Etiam quis orci. Donec at velit sed lorem elementum feugiat. Curabitur ut ligula. Quisque in eros. Morbi sed enim id sapien tristique fringilla. Nunc ligula augue, pellentesque ac, nonummy id, semper eget, ante. Sed mi eros, lacinia mattis, gravida vel, placerat posuere, lacus. Duis accumsan tincidunt sapien. Morbi sed velit. Etiam quis orci. Donec at velit sed lorem elementum feugiat. Curabitur ut ligula. Quisque in eros. Morbi sed enim id sapien tristique fringilla. Nunc ligula augue, pellentesque ac, nonummy id, semper eget, ante.
-==Using tables to control layout on a page==
+'''RESULT:'''
-==How tables are constructed==
+[[image:basic1.jpg|center]]
-'''A table is created by starting a line with a "|" character, separating each cell with  a "|", and ending each row with a "|".
-For example, a 3x3 table is created with:'''
+====Right align====
+'''TYPE:''' <nowiki>[[Image:Documents_fr2.jpg|right|200px|]]</nowiki>
-<nowiki>   |cell 1|cell 2|cell 3| </nowiki><br>
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec in enim. Aliquam erat volutpat. Maecenas id nibh ut turpis lobortis commodo. Phasellus sed neque. Proin fringilla euismod libero. Etiam vel lectus. Aliquam dui. Curabitur venenatis molestie neque. Integer mi dolor, gravida at, accumsan eget, fringilla eget, arcu. Suspendisse euismod. Nam et lorem accumsan magna venenatis pellentesque. In et ante. Etiam magna. Cras rutrum mi quis tellus.
-<nowiki>   |cell 4|cell 5|cell 6|</nowiki><br>
-<nowiki>   |cell 7|cell 8|cell 9|</nowiki><br>
+Sed mi eros, lacinia mattis, gravida vel, placerat posuere, lacus. Duis accumsan tincidunt sapien. Morbi sed velit. Etiam quis orci. Donec at velit sed lorem elementum feugiat. Curabitur ut ligula. Quisque in eros. Morbi sed enim id sapien tristique fringilla. Nunc ligula augue, pellentesque ac, nonummy id, semper eget, ante. Sed mi eros, lacinia mattis, gravida vel, placerat posuere, lacus. Duis accumsan tincidunt sapien. Morbi sed velit. Etiam quis orci. Donec at velit sed lorem elementum feugiat. Curabitur ut ligula. Quisque in eros. Morbi sed enim id sapien tristique fringilla. Nunc ligula augue, pellentesque ac, nonummy id, semper eget, ante.
-'''The entire table is encased with curly brackets and a vertical bar character (a pipe).
-So use {| to begin a table, and |} to end it. Each one needs to be on its own line:'''
+'''RESULT:'''
+[[image:basic2.jpg|center]]
-<nowiki>{|</nowiki>
-'''table code goes here'''
+====Right align with caption====
-<nowiki>|}</nowiki>
+'''TYPE:''' <nowiki>[[Image:Documents_fr2.jpg|right|200px|thumb|Caption]]</nowiki>
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec in enim. Aliquam erat volutpat. Maecenas id nibh ut turpis lobortis commodo. Phasellus sed neque. Proin fringilla euismod libero. Etiam vel lectus. Aliquam dui. Curabitur venenatis molestie neque. Integer mi dolor, gravida at, accumsan eget, fringilla eget, arcu. Suspendisse euismod. Nam et lorem accumsan magna venenatis pellentesque. In et ante. Etiam magna. Cras rutrum mi quis tellus.
-'''To start a new table row, type a vertical bar and a hyphen on its own line: "|-".
+Sed mi eros, lacinia mattis, gravida vel, placerat posuere, lacus. Duis accumsan tincidunt sapien. Morbi sed velit. Etiam quis orci. Donec at velit sed lorem elementum feugiat. Curabitur ut ligula. Quisque in eros. Morbi sed enim id sapien tristique fringilla. Nunc ligula augue, pellentesque ac, nonummy id, semper eget, ante. Sed mi eros, lacinia mattis, gravida vel, placerat posuere, lacus. Duis accumsan tincidunt sapien. Morbi sed velit. Etiam quis orci. Donec at velit sed lorem elementum feugiat. Curabitur ut ligula. Quisque in eros. Morbi sed enim id sapien tristique fringilla. Nunc ligula augue, pellentesque ac, nonummy id, semper eget, ante.
-The codes for the cells in that row will start on the next line.'''
+[[image:basic3.jpg|center]]
-====The Code====
-<nowiki> {| border="1" </nowiki><br>
+'''N.B.''' If the image has no "built in" border you need to use |''thumb''| not |''frame''| as you cannot cotrol the size of the image with |''frame''|. Unless you want a caption, you are better off making a frame on your image before uploading it.
-<nowiki> |-</nowiki><br>
-<nowiki> | Content of Cell 1 || Content of Cell 2 || Content of Cell 3</nowiki><br>
-<nowiki> |-</nowiki><br>
-<nowiki> | Content of Cell 4 || Content of Cell 5 || Content of Cell 6</nowiki><br>
-<nowiki> |-</nowiki><br>
-<nowiki> | Content of Cell 7 || Content of Cell 8 || Content of Cell 9</nowiki><br>
-<nowiki> |}</nowiki><br>
-====The Result====
+==Two pictures==
-{| border="1" cellspacing="5" cellpadding="5"
+'''TYPE:''' <nowiki> [[Image:Documents_fr2.jpg|left|200px|thumb|Caption]]</nowiki>
-|-
-| Content of Cell 1 || Content of Cell 2 || Content of Cell 3
-|-
-| Content of Cell 4 || Content of Cell 5 || Content of Cell 6
-|-
-| Content of Cell 7 || Content of Cell 8 || Content of Cell 9
-|}
+'''TYPE:''' <nowiki> [[image:building3.jpg|right|200px|thumb|Caption]]</nowiki>
-=====You can add a caption above the table=====
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec in enim. Aliquam erat volutpat. Maecenas id nibh ut turpis lobortis commodo. Phasellus sed neque. Proin fringilla euismod libero. Etiam vel lectus. Aliquam dui. Curabitur venenatis molestie neque. Integer mi dolor, gravida at, accumsan eget, fringilla eget, arcu. Suspendisse euismod. Nam et lorem accumsan magna venenatis pellentesque. In et ante. Etiam magna. Cras rutrum mi quis tellus.
-<nowiki> {| border="1"</nowiki><br>
-<nowiki> |+THIS IS THE CAPTION</nowiki><br>
-<nowiki> |-</nowiki><br>
-<nowiki> | Content of Cell 1 || Content of Cell 2 || C Content of Cell  3</nowiki><br>
-<nowiki> |}</nowiki><br>
-{| border="1" cellspacing="5" cellpadding="5"
-|+ '''THIS IS THE CAPTION'''
-|-
-| Content of Cell 1 || Content of Cell 2 || C Content of Cell  3
-|}
-'''Type the codes for each table cell in the next row, starting with a bar.'''
-<nowiki> {|</nowiki><br>
-<nowiki> |+ The table's caption</nowiki> '''''If you don't want a caption, leave out this row.'''''<br>
-<nowiki> |-</nowiki><br>
-<nowiki> | cell codes go here</nowiki><br>
-<nowiki> | more cells in the same row here</nowiki><br>
-<nowiki> |-</nowiki><br>
-<nowiki> | cells in the next row go here</nowiki><br>
-<nowiki> | more cells in the same row here</nowiki><br>
-<nowiki> |}</nowiki><br>
-{| border="1" cellspacing="5" cellpadding="5"
-|-
-| cell codes go here
-| more cells in the same row here
-|-
-| cells in the next row go here
-| more cells in the same row here
-|}
-'''Cells can be separated with either a new line and new bar "|", or by a double bar "||" on the same line.'''
-Both produce the same output:
-<nowiki> {|</nowiki><br>
-<nowiki> |-</nowiki><br>
-<nowiki> |Cell 1 || Cell 2 || Cell 3</nowiki><br>
-<nowiki> |-</nowiki><br>
-<nowiki> |Cell A </nowiki><br>
-<nowiki> |Cell B</nowiki><br>
-<nowiki> |Cell C</nowiki><br>
-<nowiki> |}</nowiki><br>
-{| border="1" cellspacing="5" cellpadding="5"
-|-
-|Cell 1 || Cell 2 || Cell 3
-|-
-|Cell A
-|Cell B
-|Cell C
-|}
-----
-==Two columns, two rows.==
-'''This example consists of 2 columns and two rows.'''
-====The Code====
-'''Setting up the table''' <nowiki> {| width="100%" border="0" cellspacing="5" cellpadding="5"  </nowiki><br>
-'''Text aligned to the top of the row'''<nowiki>|-valign="top" </nowiki><br>
-'''FIRST ROW'''
-'''First column'''<nowiki>| '''The southern border of the county is formed by the coastline between Hampshire and Kent with its northern border adjoining Surrey. It is divided for local government into West Sussex and East Sussex and the City of Brighton and Hove.
-Mainly still a rural county apart from the coastal strip, there are few large towns. In the past fishing was an important industry and there are still working harbours at Rye, Hastings, Newhaven and Shoreham. The county now relies heavily on the tourist industry, both by the sea and inland where tourists can explore the South Downs.</nowiki><br>
-'''Fixed width for the second column'''<nowiki>| style="width:250px" align="right"| __TOC__ </nowiki><br>
-'''SECOND ROW'''
-'''Text aligned to the top of the row'''<nowiki>|-valign="top"</nowiki><br>
-'''First column''' <nowiki>| Sussex was the home of the Greenwich Royal Observatory at Herstmonceux until 1998. There are castles at Hastings, Lewes, Pevensey and Bodiam while  the site of the Battle of Hastings is to be found at Senlac Hill near the town of Battle. There is a Roman Villa in Fishbourne. The Weald and Downland Museum is in Singleton. </nowiki><br>
-<nowiki>The seat of the Duke of Norfolk is in Sussex at Arundel Castle. Rudyard Kipling lived in a Jacobean ironmaster's house, Bateman's, near Burwash in Sussex. The county has a song dedicated to it called "Sussex by the Sea" written in 1907 by William Ward-Hicks. </nowiki><br>
-<nowiki>'''East Sussex county town:''' Lewes </nowiki><br>
-<nowiki>'''West Sussex county town:''' Chichester</nowiki><br>
-<nowiki>'''Other major towns:''' Brighton, Eastbourne, Hove, Bognor Regis, Crawley </nowiki><br>
-<nowiki>'''[[Places_of_Worship:Sussex| Sussex Places of Worship]]'''</nowiki><br>
-<nowiki>'''[http://www.familytreeforum.com/regional-projects/ Regional projects Forum]''' </nowiki><br>
-'''Second column''' <nowiki>| [[Image:EnglandSussex.jpg|right|175px|thumb|Source: Wikipedia]]</nowiki> <br>
-'''End of table''' <nowiki>|}</nowiki><br>
-====The Result====
-[[image:Model6b.jpg]]
-==Three columns, four rows==
-'''This example consists of three columns with four rows in each column.'''
-====The Code====
-<nowiki> {|  width="100%" border="0" cellspacing="5" cellpadding="5"  </nowiki><br>
-<nowiki> |-valign="top" </nowiki><br>
-<nowiki> | <div align="center">'''Family History''' </div></nowiki><br>
-<nowiki> | <div align="center">'''Military History''' </div></nowiki><br>
-<nowiki> | <div align="center">'''Learning and Research''' </div></nowiki><br>
-<nowiki> |-valign="top"</nowiki><br>
-<nowiki> | <div align="center">[[image:fammenu.jpg]] </div></nowiki><br>
-<nowiki> | <div align="center">[[image:milmenu.jpg]] </div></nowiki><br>
-<nowiki> | <div align="center">[[image:learnmenu.jpg]] </div></nowiki><br>
-<nowiki> |-valign="top"</nowiki><br>
-<nowiki> |Direct links to sources and background information for Census records,   Births, marriages &amp; deaths, Wills, Adoption records and Outward passenger   lists. ||Direct links to sources and background information for the British Army,   Royal Navy, Royal Marines, Royal Air Force, WW1 medals, Merchant navy, WW1   soldiers&rsquo; records. ||Direct links to The Catalogue and Documents Online together with very detailed (searchable) lists of what is available at The National Archives in Kew.</nowiki><br>
-<nowiki>|-valign="top"</nowiki><br>
-<nowiki>|<span class="plainlinks">[http://www.nationalarchives.gov.uk/familyhistory/?homepage=fr-more more family history...]</span> takes you to a detailed explanation about how to begin your research into your family history.||<span class="plainlinks">[http://www.nationalarchives.gov.uk/militaryhistory/?homepage=mh-more more  military history..]</span> takes you to a detailed explanation about how to research military history.</nowiki><br>
-|}
-====Explanation of the code====
-[[image:tabletop.jpg]]
-[[image:toprow.jpg]]
-[[image:table2row.jpg]]
-[[image:table3row.jpg]]
-[[image:table4row.jpg]]
-====The Result====
-{|  width="100%" border="0" cellspacing="5" cellpadding="5"
-|-valign="top"
-| <div align="center">'''Family History''' </div>
-| <div align="center">'''Military History''' </div>
-| <div align="center">'''Learning and Research''' </div>
-|-valign="top"
-| <div align="center">[[image:fammenu.jpg]] </div>
-| <div align="center">[[image:milmenu.jpg]] </div>
-| <div align="center">[[image:learnmenu.jpg]] </div>
-|-valign="top"
-|Direct links to sources and background information for Census records,   Births, marriages &amp; deaths, Wills, Adoption records and Outward passenger   lists. ||Direct links to sources and background information for the British Army,   Royal Navy, Royal Marines, Royal Air Force, WW1 medals, Merchant navy, WW1   soldiers&rsquo; records. ||Direct links to The Catalogue and Documents Online together with very detailed (searchable) lists of what is available at The National Archives in Kew.
-|-valign="top"
-|<span class="plainlinks">[http://www.nationalarchives.gov.uk/familyhistory/?homepage=fr-more more family history...]</span> takes you to a detailed explanation about how to begin your research into your family history.||<span class="plainlinks">[http://www.nationalarchives.gov.uk/militaryhistory/?homepage=mh-more more  military history..]</span> takes you to a detailed explanation about how to research military history.
-|}
-==Help Pages for The Wiki==
-====Adding content====
-* [[Help:Notes for Users|Help for Users]] being rewritten
-* [[Help:Notes for Editors|Help for Editors]] being rewritten
-* [[Authoring|Formatting Text]]
-* [[Style and Presentation in The Wiki]]
-* [[Adding Content to The Wiki ~ New Pages]]
-* [[Adding Content to The Wiki ~ Images and Tables]]
-* [[Adding Content to The Wiki ~ Images and Tables 2]]
-* [[Adding Content to The Wiki ~ Mixing Text and Images]]
-====Visual Reference====
-* [[Navigating the Wiki|Navigating The Wiki]]
-* [[Searching the Wiki|Searching The Wiki]]
-* [[Help:Hyperlink Code|Coding a Hyperlink for The Wiki]]
-* [[Uploading images to The Wiki]]
+Sed mi eros, lacinia mattis, gravida vel, placerat posuere, lacus. Duis accumsan tincidunt sapien. Morbi sed velit. Etiam quis orci. Donec at velit sed lorem elementum feugiat. Curabitur ut ligula. Quisque in eros. Morbi sed enim id sapien tristique fringilla. Nunc ligula augue, pellentesque ac, nonummy id, semper eget, ante. Sed mi eros, lacinia mattis, gravida vel, placerat posuere, lacus. Duis accumsan tincidunt sapien. Morbi sed velit. Etiam quis orci. Donec at velit sed lorem elementum feugiat. Curabitur ut ligula. Quisque in eros. Morbi sed enim id sapien tristique fringilla. Nunc ligula augue, pellentesque ac, nonummy id, semper eget, ante.
-* [[Editing Your User Page]]
-* [[Surname Help|Adding Surnames to The Surname Directory]]
+[[image:basic4.jpg|center]]
-* [[County model|Template for County Pages]]
-* [[Examples of useful code|Miscellaneous Code]]
+==Other Help Pages==
-*[[Main Page]]
+[[image:minibad.jpg]] '''[[:Category:Help|The Wiki Guide]]'''