Difference between revisions of "Mixing Text and Images"

Revision as of 08:23, 11 April 2008

Page being edited by Caroline

Basic code

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.

For more information, see Adding Content to The Wiki ~ Working With Images

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

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

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

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 causes problems with getting the line spacing correct for every viewer.

To add two pictures:

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

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

A more satisfactory layout can be achieved by using tables: Working With Tables

Help Pages for The Wiki

Adding content

Help for Users being rewritten

Help for Editors being rewritten

Formatting Text

Style and Presentation in The Wiki

Working With Tables

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

Searching The Wiki

Coding a Hyperlink for The Wiki

Uploading images to The Wiki

Editing Your User Page

Adding Surnames to The Surname Directory

Template for County Pages

Miscellaneous Code

Main Page

@@ Line 5: / Line 5: @@
 ==Basic code==
-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. See '''[[Adding Content to The Wiki ~ Working With Images]]'''
+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.
+For more information, see '''[[Adding Content to The Wiki ~ Working With Images]]'''
@@ Line 21: / Line 23: @@
 '''TYPE:''' <nowiki>[[Image:Documents_fr2.jpg|right|200px|thumb|Caption]]</nowiki>
 [[image:basic3.jpg|center]]
-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.
+'''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''|.
-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 causes problems with getting the line spacing correct for every viewer.
+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 causes problems with getting the line spacing correct for every viewer.
-See [[Adding Content to The Wiki ~ Images and Tables]] for explanation of codes for images.
+'''To add two pictures:'''
+'''TYPE:''' <nowiki> [[Image:Documents_fr2.jpg|left|200px|thumb|Caption]]</nowiki>
-[[Image:Documents_fr2.jpg|left|150px|]]
+'''TYPE:''' <nowiki> [[image:building3.jpg|right|200px|thumb|Caption]]</nowiki>
-[[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.
+[[image:basic4.jpg|center]]