{{{1}}} {{{2}}} |
Usage, Limitations, and Options
Usage
Template name: DROPIMAGE. Place text for a heading in parameter one position. Place definitions for images, galleries, or text in parameter two position. The content hides initially , and drops when the show or down-arrow 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's contents can contain hyperlinks, and the template can be nested.
Three simple examples of its use, with results, are shown:
Image example code:
{{dropimage|width=150px|align=left|Image|[[image:Primula_aka.jpg|thumb|300px|center]]'''Primula''' :
[http://en.wikipedia.org/wiki/Primula ''Main article.'']}}
Gallery example code:
{{dropimage|width=150px|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:Tulip - floriade 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>}}
Text box example code:
{{dropimage|width=150px|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>}}
{{dropimage|width=150px|align=left|Image|[[image:Primula_aka.jpg|thumb|300px|center]]'''Primula''' : '' [[Primula|Main article.'']]}}
{{dropimage|width=150px|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:Tulip - floriade 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>}}
{{dropimage|width=150px|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 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.
Limitations edit
The width option sets the initial 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 obviously be set to avoid an overtight fitting of the caption.
The content cannot be a Wikitext table, since the pipe symbols confuse the code; use an HTML table instead. Even when the pipe symbol problem is overcome, by using HTML or problem-fixing templates, there will be problems in assigning table styles. For these reasons, avoid the use of tables within DROPIMAGE. A selection of other templates related to this exists in WikiBooks.
Bear in mind that the use of <pre></pre> tags will be needed for preformatted text layout, and if the block of text itself has these same tags within it, the literals should be used to replace the ones within the text. (ie: use these instead; <pre> and </pre>). This avoids the corrupted functioning which would otherwise result.
Note that for all table-based structures, a white background default is preferred over a transparent one, to avoid the appearance of any heading underlines showing through the table. (See style sheets for more).
The template might benefit from being remade as an HTML table since it would be less sensitive to certain enclosures. In addition, in the event that the source classes become faulty, the control would work well as a collapsible table using the class collapsible.
Options edit
Container edit
- width
- initial width of the container, (closed), not including borders (default, 300px)
- align
- horizontal alignment of container (default, left); (Options,left,right,or center)
- border
- the container border (default, 1px solid black) (Options; in form width,type,color)
- padding
- the padding for the container (default, 0px); (Options,points,pixels,em,etc. )
- background
- background color of container,(seen for padding > 0px), Options;Any, Default;white
Heading edit
- hff
- heading font family (face) (default, Arial); (Options,many named faces )
- hfs
- heading font size (default, 10pt); (Options,points,pixels,em,etc.)
- hfw
- heading font weight(default, normal); (Options,normal or bold )
- hbgc
- heading background color (default, white); (Color options, any, hex or rgb or named )
- hfc
- heading font color; (default, black); (Options,any, hex or rgb or named )
- hhta
- heading horizontal text alignment (default, center); (Options,left,right,center,justify)
- hp
- heading text padding (default, 5px); (Options,points,pixels,em,etc.)
Content edit
- cff
- content font family (face) (default, Arial); (Options,many named faces )
- cfs
- content font size (default, 10pt); (Options,points,pixels,em,etc. )
- cfw
- content text font weight(default, normal); (Options,normal or bold )
- cbgc
- content background color (default, white); (Options,any, hex or rgb or named )
- cfc
- content font color; (default, black); (Options,any, hex or rgb or named )
- chta
- content horizontal text alignment (default, left); (Options,left,right,center,justify )
- cp
- content text padding (default, 10px); (Options,points,pixels,em,etc. )
}}