Editing Wikitext/Pictures/Images in Containers
From Wikibooks, the open-content textbooks collection
|
 Purple Crocus: 293x220 pixels |
 Clematis: Hybrid; 251x220 pixels |
[edit] Images in Containers
[edit] 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 acheive 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.
 |
 |
 |
 |
| Aegopodium podagraria | Adam and Eve Dactylorhiza sambucina | Alisma plantago-aquatica | Antennaria dioeca |
|
|
|
|
|
|||||
| Aegopodium podagraria | Adam and Eve Dactylorhiza sambucina | Alisma plantago-aquatica | Antennaria dioeca |
|
Press for Table and Top-section code
Extract from the Code Listing:
The code makes use of the many table-formatting options available. The main formats are set in the table section and then various other formats are set in rows and cells. The first table row has the code to align any contents of the row horizontally to the center: the second row formats do the same and also set the vertical alignment for the row to top. The color scheme has been set to white text on a grey background. The images are all placed in the cells of the first row, and their captions have been placed below each in the cells of the second row. Widths of the columns have been set in the cells of the second row. The captions have been formatted to bold type. Note that the table caption has been formatted separately to bold, black on white. The image spacing is done with the padding number in the table definition. Use the link at the bottom of the page, (Help:Table), for assistance with additional table styles and formatting, such as the CSS properties of font-family and font-weight.(eg: Verdana and bold). In addition, both cell and table borders could be set in various widths, styles, and colors. Note that the images were all forced to the same height by setting an arbitrarily high value for their horizontal dimensions, as described elsewhere in this article. The disadvantage of this method is clearly the complexity in coding required for a beginner, though by copying such code into the Sandbox, it can be tested and adjusted to any extent without damage. Another example of the use of a table can be found in the top section of this page, where the table of contents and two images share a table. This configuration was chosen to stabilise the top section layout. The code is:
|
|
Press for Spaced Table code
Extract from the Code Listing:
The spaced table code is similar to that of the previous example, except that the addition of five extra columns allow the images to be spaced at any point horizontally across the page. Simply adjust the width entries for the blank cells in the second row to do this. Additional code to change formats is to be found by following the Help:Table link at the foot of the main page. |
|
CSS Properties Summary
Commonly used style rules for Wiki markup tables :
 There are two different sets of syle 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.
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.
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
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
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>.
Main Points to Avoid
These have Latitude
In addition
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
|}
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 appplies for two similar attributes in a line; the second is ignored. |
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 , and can be modified. 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.
[edit] 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, eg; 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 and the drop-box has simply been expanded to the size that is needed by this block element.
There are problems with the centering of the gallery function, and the problem seems to be connected with the use of the HTML align attribute. It is likely that a CSS style in a stylesheet has invoked a priority over the use of an HTML attribute. However there is hope; 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 widths, but the styles need carefully adjusted for each gallery that is to be displayed.
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, it has been found awkward to view the default gallery without the use of scrollbars. Adjusting the width of the gallery with these options helps to overcome this problem.
In the third example, many other font and formatting options have been added, though readers should notice that because the HTML align attribute was used instead of the CSS version, that the gallery is not properly centered. These formats use style-sheet rules. (See CSS2 Properties Reference for more). All of the font family, style, color, ect, 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 works on the space between the border and the mask. In addition, some slight difference in appearance for backgrounds has been noted for 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
|
|
Press for The Image Gallery code
Extract from the Code Listing:
Notes on the code: The image code in each case must occupy a separate line, Text can occupy a line instead of an image. See the code for the format. The comments below have been written for the last code example, since it has the most options. The description applies also to the other two cases.
Notes on style entries:
The gallery class is modified here using in-line style rules.
The above style entries have two different formats; in one,
the format is:
style="Property1:value; Property2:value; ... ;Property-last:value"
where the combination of a property and its value is called a "rule".
Note that the whole set of rules with this format is enclosed
within double quotes, and each rule is separated from the next with
a semi-colon. In addition, properties and values are separated
by a full colon.
The other format is:
Property1=Value Property2=Value ect.
In this case also the combination of a property and its value is
called a "rule". Note the absence of double quotes. Each rule
here is separated from the next with a space. In addition,
properties and values are separated by an equals sign.
The format within quotes is known as the CSS style,
(Cascading Style Sheet), and other property values can be found in
listings such as the one at the site:
http://www.w3schools.com/css/css_reference.asp,
and within WikiBooks under the keywords: CSS Programming.
If there is faulty syntax used within the quotes, then the whole style
expression might not work, and the format of the work will look strange.
The properties must be appropriate for the gallery tag, or for the tag
that is being modified; (for example, text would not have image
properties). Any reasonable number of expressions can be placed
between the double quotes.
The other part of the style rules that lie outside the double quotes,
belong to an earlier syntax that is nonetheless still useful.
Both of these formats can coexist in style modifications, provided that
care is taken as to which rules need which format. Although this comment
applies to the gallery tag, it applies to ''any'' tag used in HTML.
The styles for the gallery class definition, wherever it has been made,
is changed by including these rules within the tag at the point that it
is used. This is called an ''in-line style'', (within the text itself),
and it has priority over any other styles created in external stylesheets,
or in the heading of the web page.
In short, such in-line styles are necessary, when the the other style
settings are out of reach.
Note that links can be added in captions. The second example above
replaces simple captions with links to pages with more information.
The following notes list the properties and a few of their values.
In the order that they are written:
color: This is the font color. Other colors from "W3",
the site mentioned above or from http://en.wikipedia.org/
wiki/Web_colors#X11 color names Example values; red,
blue,papayawhip,lghtyellow,maroon,dimgray,teal,linen,darkgray,
black,royalblue,ect. Color names are often written as
one word.
background: Usually refers to the general background color though in
the gallery, fails to color the off-white photo mask. When
padding is used then the background has the same color.
In a drop-box this format changes a little compared the page.
Uses the same color set as above.
font-family: The face name of the font; Garamond, Courier, Arial,
Verdana, Impact, Fixedsys, ect. Items with spaces all
in quotes. Note that for a priorities list of fonts
to use for a tag, use font-face.
font-size: The font size; e.g. in points; 10pt, 12pt, 14pt...xx-small,
x-small,small,medium,large,x-large,xx-large,smaller,
larger,length,%. Worded terms relate to the default.
font-weight: The thickness of the font. eg bold, bolder, lighter,
normal, 100-900. See CSS reference link for more.
text-align: The horizontal position of text in the space; left,center,
and right, and in paragraphs, justify.
It affects the captions and any text in cells.
border: Specified as width, type, color, where width is
often in pixels, type is single, double ect, and any color can
be used.
padding: This refers to the gallery space between the outside border
and the edge of the white photo-mask, and takes the
background color. It can disappear in a drop-box!
The sequence is top, right, bottom, left. If only one is stated
then it applies to them all. It two figures are given, then
opposite sides are given equal padding.
align: This refers to the left, center, or right positions
in the page. It moves the whole gallery. Note that the
gallery follows the same rules as images for wrapping of
text; left and right do it but center follows-on.
caption: This refers to the text used for the top caption, (above the
gallery). It can be formatted with wikitext or HTML tags.
widths: Peculiar to the gallery, it sets the width of the image
and white mask combination for every cell, eg 150px.
heights: Peculiar to the gallery, it sets the height of the image
and white mask combination for every cell, eg 170px.
perrow: Peculiar to the gallery, it sets the number of images per
row; an integer. If blank spaces are produced then they
are the color of the mask; (always off-white!.
Images are placed on separate lines. If text is used
on a line instead, its length is limited.
|
[edit] Drop-down Images
t can be useful to save space or to unclutter 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 apostrophes. 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 will cause corruption. 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!
 |
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 160 pixels, though the image within it is greater, with a base width of 250 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.
| Other Pictures Pages |
| The Quick Course Tiled Images |
[edit] See Also
- Sandbox Editor : The Wikibooks editing window for users to try their code.
- How to edit a page : A Wikipedia article
- Extended Image Syntax : A Wikipedia text
- Help:Table : A Wikipedia text
- Web Colors : A Wikipedia text
- Mayflower Image Search : The Wikipedia image search engine
- Wikimedia Commons : The Wikimedia main media resource page
- CSS2 Properties Reference : An excellent external CSS reference
- Template : Dropimage : A WikiBooks drop-box for images, galleries, or text, with many formatting options.
- Template : Imageontop : A WikiBooks template for an in line TOC and two image spaces. Same as on this page
- Template:Hidden : Another WikiBooks drop-box
- Description of the Gallery tag : A Wikipedia article on the 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 WikiMedia basis for drop-controls.
Other Pages
|
