# Editing Wikitext/Pictures/Images in Containers

| Other pages The Quick Course Tiled Images | Purple Crocus: 293x220 pixels | Clematis: Hybrid; 251x220 pixels |

## Images in Containers
### Images in a table

n-line, tiled images are simple to do, though they lack the positional stability of images in table cells. Although the matter rarely becomes important for images placed at the left or right of a page, when a more ambitious layout is needed, tables come into their own.
Tables allow many formatting options but do require some knowledge of Wiki's table-making code. To learn how to make tables see the page Tables, and to remind yourself of the styles used, see the drop-box later on this page.
After trying different methods, it is found best to use a table with two rows; one for the images, and the row below that for their captions. This allows the captions to be formatted separately from anything in the image cells and generally gives the best flexibility in working. When table borders are removed in such an arrangement, the images seem to stand on their own without the table being visible at all. The first example below uses this method, with the mark-up code for its implementation shown nearby.
To space out the images across the page against the prevailing background it is best to add extra columns to the tables. Do this by adding extra cells in the existing rows, and set their widths to achieve the necessary spacings. To avoid the need for additional styling of the table's background it can be made transparent. In this way the page color shows though, regardless of what color is set. An example using these points is shown, and the code to produce it is also displayed nearby.
For those who find tables a bit awkward to use, the image gallery may be more to their liking. It is much simpler, and quite good results are to be had without formatting. It is described below with varying complexity.
Table-based image display of selected northern flora :
| Aegopodium podagraria | Adam and Eve Dactylorhiza sambucina | Alisma plantago-aquatica | Antennaria dioeca |
The same table display, but with a transparent background, and five extra 25 pixel-wide columns, for spacing :
| Aegopodium podagraria | Adam and Eve Dactylorhiza sambucina | Alisma plantago-aquatica | Antennaria dioeca |
Press for Table and Top-section code :
* <!--Table-based gallery of 4 images-->
* <!--Ref: See http://en.wikipedia.org/wiki/Help:Table-->
* <!--Ref: See http://en.wikipedia.org/wiki/Web_colors-->
* <!--Start of table definition-->
* {|style="background:darkgray; border:1px solid dimgray;color:white" border="0" height="230" align="center" valign="bottom" cellpadding=10px cellspacing=0px
* <!--Start of the details for the top-of-table heading-->
* |+style="background:white; color:black"|'''''Selected Northern Flora'''''
* <!--Start the first row and add row formats-->
* |-align="center"
* <!--Start of individual cell details for the first row-->
* |[[Image:Aegopodium podagraria NF.jpg|border|500x130px|none]]
* |[[Image:Adam och Eva.jpg|border|500x130px|none]]
* |[[Image:Alisma plantago-aquatica nf.jpg|border|500x130px|none]]
* |[[Image:Antennariadioeca.jpg|border|500x130px|none]]
* <!--Start of a second row and add formats-->
* |-align="center" valign="top"
* <!--Start of individual cell details for the second row-->
* |width="100"|'''Aegopodium Podagraria'''
* |width="100"|'''Adam and Eve'''
* |width="100"|'''Alisma Plantago-aquatica'''
* |width="100"|'''Antennariadioeca'''
* <!--Table for contents (TOC) and 2 images with extra columns for spacing, used for top section of Editing Wikitext Pictures-->
* <!--Ref: See http://en.wikipedia.org/wiki/Help:Table-->
* <!--Ref: See http://en.wikipedia.org/wiki/Web_colors-->
* <!--Start of table definition-->
* {|style="background:transparent; color:black" border=0 height="230" align="left" cellpadding=0 cellspacing=5px width=100%
* <!--Start the first row and add row formats-->
* |- align="center"
* <!--Start of image details in the first row-->
* | valign=top align=center width=25%|__TOC__{{tocbox|width=150px|align=center|Other pages|[[Editing Wikitext/Pictures/The Quick Course|The Quick Course]]<br>[[Editing Wikitext/Pictures/Tiled Images|Tiled Images]]}}
* | valign=top align=left width=37%|[[Image:Crocus 4.jpg|500x220px|none]]{{caption|Purple Crocus: | 293x220 pixels}}
* | valign=top align=left width=38%|[[Image:Clematis_hybrid3_ies.jpg|500x220px|none]]{{caption|Clematis: | Hybrid; 251x220 pixels}}
* <!--Start of a second row and add formats-->
* |-align="center" valign="top"
Press for Spaced Table code :
* <!--Table-based gallery of 4 images with extra columns for spacing-->
* <!--Ref: See http://en.wikipedia.org/wiki/Help:Table-->
* <!--Ref: See http://en.wikipedia.org/wiki/Web_colors-->
* <!--Start of table definition-->
* {|style="background:transparent; color:black" border="0" height="230" align="center" valign="bottom" cellpadding=10px cellspacing=0px
* <!--Start of the details for the top-of-table heading-->
* |+style="background:transparent; color:black"|'''''The same table display, but with a white background, and five extra 25 pixel-wide columns, for spacing'''''
* <!--Start the first row and add row formats-->
* |-align="center"
* <!--Start of individual cell details for the first row-->
* |[[Image:Aegopodium podagraria NF.jpg|border|500x130px|none]]
* |[[Image:Adam och Eva.jpg|border|500x130px|none]]
* |[[Image:Alisma plantago-aquatica nf.jpg|border|500x130px|none]]
* |[[Image:Antennariadioeca.jpg|border|500x130px|none]]
* <!--Start of a second row and add formats-->
* |-align="center" valign="top"
* <!--Start of individual cell details for the second row-->
* |width="25"|
* |width="100"|'''Aegopodium Podagraria'''
* |width="25"|
* |width="100"|'''Adam and Eve'''
* |width="25"|
* |width="100"|'''Alisma Plantago-aquatica'''
* |width="25"|
* |width="100";;|'''Antennariadioeca'''
* |width="25"|
* CSS Properties Summary
* Commonly used style rules for Wiki markup tables :
* There are two different sets of style rules in use; a set of HTML attributes that is associated with the specific elements in tables, and a Cascading Style Sheet set, CSS properties, that is of more general use.
* Each of table, caption, row, and cell can be considered as separate elements in the more general building of tables. In each case where an attribute refers to the same format as a CSS property at the same level of the same element, the CSS property takes priority.
* A short list of each style-set is given for quick reference though these listings are by no means complete. A link has been provided at the bottom of this drop-list for a full CSS properties reference.
* HTML Attributes for Tables; use the format;
* attribute1=value1 attribute2=value2 attributeN=valueN
* Example Values Element* Purpose
* align=left** left,right,center, T, R, C positions table or text**
* (plus justify for text) in immediate container
* valign=top**** top, middle, bottom R, C vertical alignment of TEXT
* border=1***** 0 for none, 1-7 T all borders at once
* cellpadding=5px 0 for none, px, pt, em T padding for all cell text
* with one entry
* cellspacing=5px****** 0 for none, px, pt, em T between all table cells
* with one entry
* height=100px*** px, pt, cm, em, % C cell height, though likely
* to increase with contents
* width=200px*** px, pt, cm, em, % T, C table or cell width
* colspan="2" number of columns. C joins cells rightward
* rowspan="2" number of rows. C joins cells downward
* * T=Table, R=Rows, C=Cells of any kind
* ** Align in cells applies horizontal text-alignment.
* *** If not specified, the dimensions will adjust to the text.
* **** If not specified, the default is middle
* ***** Do not use border spacing styles with this attribute; only ''cellspacing''.
* ****** Do not use border styles with this attribute; only the ''border'' attribute.
* CSS Style Rules; use the format;
* style="property1:value1; property2:value2; propertyN:valueN;"
* Example Values Elements** Purpose
* caption-side:top top,right,bottom, T only some browsers
* and left
* text-align:right left,right,center, T, R, C horizontal alignment of text
* and justify
* vertical-align:top top, middle, bottom C Vertical-align text or image
* background:yellow name, rgb, hex, T, R, C background color
* and transparent
* color:blue name, rgb, hex T, R, C text color
* mix-blend-mode:multiply mode T blend mode
* font-family:arial font or family name T, R, C font or font-list
* font-size:20pt px, pt, cm, em, % T, R, C text size
* font-style:italic italic, normal T, R, C text style
* font-weight:bold bold, normal T, R, C text weight
* padding:5px 0 0 0 px, pt, cm, em T, C sequence top,right,bottom,left
* margin:0 0 5px 0 px, pt, cm, em, % T sequence top,right,bottom,left
* border:2px solid red* width, type, color T, C border on all four sides
* border-collapse: separate or collapse T cell spacing or not
* border-spacing:10px px, pt, cm, em T cell spacing all-round
* border-spacing:7px 5px px, pt, cm, em T in form horizontal vertical
* table-layout:fixed auto or fixed T expands with text or not
* width:400px px, pt, cm, em % T, C sets table or cell width
* height:200px px, pt, cm, em % T, C sets table or cell height
* line-height:2em*** px, pt, cm, em T, R, C height between text lines
* letter-spacing:5px px, pt, cm, em T, R, C space between text characters
* word-spacing:10px px, pt, cm, em T, R, C space between words of text
* white-space:pre-wrap browser issues T long line text wrapping,(soon)
* * Separate border properties also exist; border-top,border-right,border-bottom, and border-left.
* ** T=Table, R=Rows, C=Cells of any kind
* *** Line-height applies only to Block Level Elements; e.g. <blockquote>, <center>,<div>,
* <h1-h6>, <hr>, <ol>, <p>, <pre>, <table>, and <ul>. Line-height fails within a <span>.
* Style Expression Spacing Rules for WIKITEXT
* Main Points to Avoid
* Line breaks are not permitted within style expressions. Let the software do the wrapping.
* Spaces are not permitted immediately before colons or semi-colons.
* These have Latitude
* Space between the various table symbols and the word style is OK.
* Space around any equals symbol is OK.
* Space between the style rules and their outside parentheses is OK.
* Spaces after colons and semi-colons are OK.
* A semi-colon can be placed immediately after the last style rule.
* In addition
* Compound values like '2px solid black' must be space-separated.
* HTML attributes must be separated from CSS style expressions with space.
* HTML element line-spacing is permitted but not for Wikitext elements.
* Wikitext and HTML table elements can be indented for clarity.
* Long lines in code LISTINGS can wrap only if there are some spaces added.
* Combining the two style rule methods:
* It is possible to mix the attributes with CSS styles provided that they keep to their own local formats.
* That is to say; nothing with an equals sign between the quotes, and no CSS rules outside
* of them. Note that the Wiki apostrophe codes and various HTML tags can still be used directly on text. An example of mixed styles is shown below.
* {| border=1 width=300px style="background:lightyellow;color:maroon;"
* | height=100px| <u>''First''</u> cell
* | style="background:black;color:white;" width=200px align=center|''Second'' cell
* Priorities for Inline Styles.
* When there is a contest at the same level between an attribute and a style, the style will have priority.
* When two similar properties exist in a style expression, each having a different value, the second value will be taken.
* When there are two entire style expressions in the same table line, the second is ignored. The same situation applies for two similar attributes in a line; the second is ignored.
* Refer to CSS Reference List for more detailed descriptions of properties and values.
In addition, the images at the top of this article are both housed in table cells, with the table of contents, (TOC), in another; this was deemed necessary to constrain the positioning of the TOC in its various contortions. The code can be found in the drop-down box and if required, can be pasted into an editing window, or the Sandbox for modification. For those who are unfamiliar with table handling, a set of templates, Imageontop, Image1ontop, Image2ontop, and Image3ontop,have been prepared and allow the user to make similar top sections to the one on this page. If the requirement is just for a table of contents with text all the way to the top, then use the template Textontop.

### The Image Gallery

onsider the three image gallery examples in the drop-down box. In the most simple example of its use, the user need not even scale the images, and need not know their sizes. The software makes all of the calculations and adjusts all of the dimensions to fit the images neatly into the gallery layout. Captions are available for both the images and the gallery itself, and any reasonable number of images can be added, with each image's coding typed onto a separate line. If required, a small amount of text can be inserted instead of an image.
The first example is the simplest and is ordered in rows of four images. This four-to-a-row format is provided by default, but can be adjusted as will be shown in the second example. Blank places are left for any unused image space in a row, e.g.; for a gallery of seven images, there would be one blank space in the second row. Although this gallery uses an HTML align attribute in an attempt to center it, centering has failed within the drop-box and it merely appears to be centered because it is the widest inclusion, and has simply been expanded to the size that is needed by this block element.
There are problems with the centering of the gallery function within a drop-box, though not necessarily when galleries are used on the open page. The problem seems to be connected with the use of the HTML align attribute. It is likely that a CSS style in a style sheet has invoked a priority in drop-boxes over the use of an HTML attribute. However there is a way to overcome the problem within a drop-box; in the second example below the HTML align attribute has been replaced by CSS styles for width and margin, and the use of this alternative styling overcomes the problem. The method can use percentages as dimensions to allow for different container (screen) widths, but the styles need careful adjustment for each gallery that is to be displayed. Notice too that whereas the relative percentages for values of width always refer to the immediate container, the values used for margin refer to percentages of the table width. Once the point is understood, there is rarely any confusion.
Note the use of the CSS width style; this allows an adjustment of the image masks; e.g., by setting a gallery width, any difference between it and the width calculated for the layout, is adjusted by changing the widths of the image masks.
In the second example, row height, column width, and the number of images per row have been added as options. In this way the layout can be changed greatly, and in this particular case, the display made smaller. The position is centered, using CSS styles. Since some viewing screens are narrower than others, reducing the number of images across the gallery with this method helps to keep the whole thing visible at the same time.
In the third example, many other font and formatting options have been added. These formats use many style-sheet rules. (See CSS2 Properties Reference for more). In this way all of the font family, style, color, etc., can be adjusted, as well as the text padding. Some properties remain obstinate; the notion of background color does not extend to the off-white photo mask, but can work on the space between the border and the mask. In addition, some slight difference in appearance for backgrounds has been noted between galleries on a page and galleries in a drop-down box.
The Wikitext markup code used to produce the three results is given in another drop-down box with descriptive notes. The modules can be copied into the Sandbox for further testing and use. Bear in mind that not all of the available text rules have been included. There is some distance still to go in experimenting with useful formats, and some kind soul might even devise a way to expose the photo mask for background coloring.
* Press for The Image Gallery Examples
* Default
* Narcissus
* Chamomile
* Dahlia
* Snowdrop
* Tulip
* Gerbera
* Waterlily
* Primula
* Narcissus
* Camomile
* Dahlia
* Snowdrop
* Tulip
* Gerbera
* Waterlily
* Primula
* Made with CSS Style Properties in the Gallery Tag
* Cichorum
* Coleistephus
* Hatiora
* Leucanthemum
* File:The options for the Gallery have been given as just widths, heights, perrow, and caption. However, various true CSS properties and values can be used within the gallery tag also. For example, style="color:maroon;'' to change the font color.
* File:The properties tested include the align, border, padding, letter-spacing, background, text-align, color, font-family, font-size, font-weight, and font-style. The cream picture mask is not available as the background property, and its syntax is unclear.
Press for The Image Gallery code :
* <!--THE DEFAULT: Code for the first example-->
* <!--This version has least options-->
* <gallery Caption=Default Example align="center">
* Image:Jonquil flowers06.jpg|Narcissus
* Image:Chamomile@original size.jpg|Camomile
* Image:2006-10-18Dahlia03m.jpg|Dahlia
* Image:Galanthus nivalis close-up aka.jpg|Snowdrop
* Image:Tulipa suaveolens floriade to Canberra.jpg|Tulip
* Image:Gerbera pink.jpg|Gerbera
* Image:Nymphaea tetragona.jpg|Waterlily
* Image:Primula aka.jpg|Primula
* </gallery>
* <!--ADDED DIMENSIONS: Code for the second example-->
* <!--This version has a few options-->
* <gallery style="width:60%;margin:0 20% 0 20%;" widths="80px" heights="80px" perrow="3" caption="Adjusted Dimensions and Added Links">
* Image:Jonquil flowers06.jpg|[http://en.wikipedia.org/wiki/Narcissus_(flower) ''Narcissus'']
* Image:Chamomile@original size.jpg|[http://en.wikipedia.org/wiki/Asteraceae ''Camomile'']
* Image:2006-10-18Dahlia03m.jpg|[http://en.wikipedia.org/wiki/Dahlia ''Dahlia'']
* Image:Galanthus nivalis close-up aka.jpg|[http://en.wikipedia.org/wiki/Galanthus ''Snowdrop'']
* Image:Tulipa suaveolens floriade to Canberra.jpg|[http://en.wikipedia.org/wiki/Tulip ''Tulip'']
* Image:Gerbera pink.jpg|[http://en.wikipedia.org/wiki/Gerbera ''Gerbera'']
* Image:Nymphaea tetragona.jpg|[http://en.wikipedia.org/wiki/Nymphaeaceae ''Waterlily'']
* Image:Primula aka.jpg|[http://en.wikipedia.org/wiki/Primula ''Primula'']
* </gallery>
* <!--ADDED CSS STYLES: Code for the third example-->
* <!--This version has the tested options-->
* <!-- though many of the CSS properties affecting font and text will apply-->
* <gallery caption="Made with CSS Style Properties in the Gallery Tag" widths="160px" heights="100px" perrow="3" align=center style= "color: darkslategray;background: dimgray;font-family:garamond;font-size:1.1em;font-weight: normal;text-align:left;font-style: italic;letter-spacing: 1px;border:10px double lightgray; cellspacing= 30px;padding: 20px 20px 30px 20px;">
* Image:Cichorium_intybus-alvesgaspar1.jpg|Cichorum
* Image:Coleostephus_February_2008-2.jpg|Coleistephus
* image:Hatiora_×graeseri_flower.jpg|Hatiora
* Image:Leucanthemum_vulgare_'Filigran'_Flower_2200px.jpg|Leucanthemum
* The options for the Gallery have been given as just widths, heights, perrow, and caption. However, various true CSS properties and values can be used within the gallery tag also. For example, style="color:maroon;'' to change the font color.
* The properties tested include the align, border, padding, letter-spacing, background, text-align, color, font-family, font-size, font-weight, and font-style. The syntax for the picture mask remains a mystery.
* </gallery>

### Drop-down Images

t can be useful to save space or to un-clutter a page. For all the space saving qualities of tables or the gallery, it can be useful to save even more. An image or even a gallery of images can be tucked away in a drop-down box. The display will appear when the bar is clicked with the mouse; clicking it again closes the control and restores the page to a more tidy state.
For those writing within WikiBooks, there is a template ready-made to make things easy. Refer to Template : Dropimage for its use, limitations, and options. All of the drop-boxes on this page made use of it.
For those who write within Wikipedia there is also a version of Dropimage. In addition, for Wikipedia, Wikimedia, and WikiBooks, there are collapsible tables. See Collapsible Tables, and Tables, for the details.
Whether the enclosure is text, an image, an animation, or a whole gallery of images, the method of using the Dropimage template is the same. The code that will produce the text, image, or gallery is placed in the last parameter space, and the message for the top heading goes into the first parameter. Although it is sometimes found useful to use the named parameter method, (2=parameter text), for most text and images it will be OK to just place the material as it is. If the parameter text is very complicated, it is often a good idea to view it first on its own to make sure it is as expected.
Avoid using Wiki heading codes for your first characters since this messes things up; i.e.; use the HTML <h2></h2> tags instead of the equals signs. If your intention is to place a table in a drop box, be sure that it is an HTML table, since the pipe symbols of a Wiki table might be misinterpreted. Refer to the WikiBooks Template:Dropimage page for an example.
The typical syntax for the Dropimage template and its result are shown below.
* Press me!
* Flower Power
When previewed in a page being edited or in the Sandbox , the above code block makes a drop control identical to the one above; the control is centered, has a top caption of Press me !, and an inside caption also. The initial width of the control is 120 pixels, though the image within it is greater, with a base width of 200 pixels. Take time to change the image and the other settings to see how the template works.
WikiBooks templates will work in other projects, such as Wikipedia, provided that they are first imported by their administrator, though in the case of Dropimage it was easier to simply reproduce it there instead.

## See also

* Wikibooks:Sandbox – The Wikibooks editing sandbox for users to try their code.
* Help:Editing – How to edit a page
* Help:Files – Working with files
* Editing Wikitext: Tables from this series, and Help:Tables in another piece
* Web colors – The Wikipedia article on web colors
* Wikimedia Commons – The Wikimedia shared media repository
* CSS2 Properties Reference – An excellent external CSS reference
* {{Dropimage}} – A Wikibooks drop-box for images, galleries, or text, with many formatting options.
* {{Hidden}} – Another Wikibooks drop-box
* Description of the <gallery> tag – Information on gallery syntax
* {{Imageontop}} – A Wikibooks template to make a top section with TOC and two images
* {{Textontop}} – A Wikibooks template to make a top section with TOC and text right to the top
* Collapsible Tables – Notes on the basis for drop-controls.