Template:Dropimage/doc

Usage

Template name: DROPIMAGE. Place text for a heading in parameter one position. Place definitions for images, galleries, text, or an HTML table in parameter two position. The content hides initially in the collapsed state, and drops when the link button is clicked. The link toggles to collapse and expand the drop control.

The initial width of the control is not necessarily the dropped width, since the control expands to display the contents. The width option sets the initial width. the drop contents can contain links. The template can be nested.

Three simple examples of its use, with results, are shown:

Image example code:

{{dropimage|width=200px|align=left|Image|[[image:Primula_aka.jpg|thumb|300px|center]]'''Primula'''   :
    [http://en.wikipedia.org/wiki/Primula ''Main article.'']}}

Image Primula  :     Main article.

Gallery example code:

{{dropimage|width=200px|align=center|Gallery|<gallery Caption="Gallery Markup Code Example">
Image:Jonquil flowers06.jpg|Jonquil
Image:Chamomile@original size.jpg|Chamomile
Image:2006-10-18Dahlia03m.jpg|Dahlia
Image:Galanthus nivalis close-up aka.jpg|Galanthus
Image:Tulipa suaveolens floriade to Canberra.jpg|Tulip
Image:Krokus-kih.jpg|Crocus
Image:Nymphaea tetragona.jpg|Nymphaea Tetragona 
Image:Primula aka.jpg|[http://en.wikipedia.org/wiki/Primula Primula]
</gallery>}}

Gallery Gallery Markup Code Example Jonquil Chamomile Dahlia Galanthus Tulip Crocus Nymphaea Tetragona Primula

Text box example code:

{{dropimage|width=200px|align=right|Text|<pre>Drop-down Images

For all the space saving qualities of the gallery,
it can be useful to save even more. If space is at
a premium, and there are just too many images to show,
then an image or even a  gallery o 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 gallery and restores the page to a
more tidy state.</pre>}}

Text Drop-down Images For all the space saving qualities of the gallery, it can be useful to save even more. If space is at a premium, and there are just too many images to show, then 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 gallery and restores the page to a more tidy state.

HTML Table Example Code:

<!-- This is the code for an HTML table within a drop-control-->  
{{dropimage
| cp= 10px 0 30px 10px
| chta=center
| 1=HTML Table Example
| 2=<table class="wikitable" width=100%;">
<caption>This is the table caption.</caption>
<tr>
 <th>Description</th>
 <th>Column Heading 1</th>
 <th>Column Heading 2</th>
</tr>
<tr>
 <th>Row Heading 1</th>
 <td>Text</td>
 <td>Text</td>
</tr>
<tr>
 <th>Row Heading 2</th>
 <td>Text</td>
 <td>Text</td>
</tr>
</table>
}}

HTML Table Example This is the table caption. Description Column Heading 1 Column Heading 2 Row Heading 1 Text Text Row Heading 2 Text Text

Limitations

The width option sets the ititial width of the control. It expands on opening, and has been observed to involve some overlap of adjacent structures. This can be avoided by care in basic layout. The width option should be set to avoid an overtight fitting of the heading text, bearing in mind the width of the show/hide text.

No attempt has been made to limit the width of the 'open content' state. It will be limited to the width of the widest block or image structure, and unformatted text will then wrap in that width. In the event that long lines of code in pre tags are to be used, the width might extend to an unreasonable extent; In this event consider the use of the poem tags instead of the pre tags so that long lines will be wrapped. Alternatively, when control of the open-width for text wrapping is essential, as well as having the initial width set to a smaller value, make an HTML one-celled table around the right hand side of the content parameter, and set its width; this will set a convenient open-width for wrapping text, though as mentioned above, block elements like pre will still need some other form of control.

These few bulleted points relate to using tables as contents:

• The content cannot reliably be a Wikitext table, since the pipe symbols confuse the code; use an HTML table instead.
• The HTML attribute cellspacing can cause problems. Use the CSS styles for any spacing.
• Use the HTML heading tags instead of wikitext headings. Headings within content will not be listed in the table of contents since most drops default to the closed state.
• Use a numbered parameter for the content.

Bear in mind that the use of <pre></pre> tags will be needed for verbatim text layout, and if the block of text itself has these same tags within it, that the literals should be used to replace the ones within the text. (ie: use these instead; &lt;pre&gt; and &lt;/pre&gt;). This avoids the corrupted functioning which would otherwise result.

Options

Container

myclass rewrite an alternative table class declaration without quotes

mystyleT rewrite an alternative table style statement fully without quotes

width

initial width of the container, (collapsed), not including borders (default 300px)

align

horizontal alignment of container (default left) - left, center, and right

border

the container border (default 1px solid black)

padding

the padding for the container (default 0px)

background

the background color of the container,(seen for padding > 0px), (default white)

Heading

mystyleH rewrite an alternative heading cell style statement fully without quotes

hff

heading font family (face) (default Arial)

hfs

heading font size (default 10pt)

hfw

heading font weight(default normal)

hbgc

heading background color (default white)

hfc

heading font color; (default black)

hhta

heading horizontal text alignment (default center)

Content

mystyleC rewrite an alternative table-cell style statement for contents, fully without quotes

cff

content font family (face) (default Arial)

cfs

content font size (default 10pt)

cfw

content text font weight(default bold)

cbgc

content background color (default white)

cfc

content font color; (default black)

chta

content horizontal text alignment (default center)

cp

content text padding (default 10px)

clh

content line-height (default normal)

cws

content word-spacing (default normal)

cls

content letter-spacing (default normal)