Line 1:

−

<!--Drop-down image display in Wiki markup code-->

+

<td><div class="NavFrame" style="border: none;"> <div class="NavHead" style="font-family:{{{hff|Arial}}};font-size:{{{hfs|10pt}}};font-weight:{{{hfw|normal}}}; background-color:{{{hbgc|white}}};color:{{{hfc|black}}}; padding-right:3em;text-align:{{{hhta|center}}};">{{{header|{{{1}}}}}}</div> <div class="NavContent" style="font-family:{{{cff|Arial}}};font-size:{{{cfs|10pt}}};font-weight:{{{cfw|normal}}};padding:{{{cp|10px}}};color:{{{cfc|black}}};background-color:{{{cbgc|white}}};line-height:{{{clh|normal}}};word-spacing:{{{cws|normal}}};letter-spacing:{{{cls|normal}}};text-align:{{{chta|left}}};"> {{{content|{{{2}}}}}} </div> </div></td>

−

<!--Notes: table width must be set at least wide enough-->

+

</table>

−

<!--for the drop's top caption+link button to layout well--> 

−

<!--If the image is bigger, it will-->

−

<!--expand when it drops - if smaller it will center it-->

−

<!--in the default table width-->

−

<!--Table definition starts-->

−

{|style="background:{{{background|white}}};" border={{{border|1 solid black}}} align={{{align|left}}} width={{{width|300px}}} cellpadding={{{padding|0px}}} 

−

<!--drop-down template starts-->

−

|<div class="NavFrame" style="border: none;"> <div class="NavHead" style="font-family:{{{hff|Arial}}};font-size:{{{hfs|10pt}}};font-weight:{{{hfw|normal}}}; background-color:{{{hbgc|white}}};color:{{{hfc|black}}}; padding:{{{hp|5px}}};text-align:{{{hhta|center}}};">{{{header|{{{1}}}}}}</div> <div class="NavContent" style="display:none;font-family:{{{cff|Arial}}};font-size:{{{cfs|10pt}}};font-weight:{{{cfw|normal}}};padding:{{{cp|10px}}};color:{{{cfc|black}}};background-color:{{{cbgc|white}}}; text-align:{{{chta|left}}};"> {{{content|{{{2}}}}}} </div> </div>

−

|}

<noinclude>

<noinclude>

−

<br clear=all>

−

==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:'''

−

'''<pre>{{dropimage|width=150px|align=left|Image|[[image:Primula_aka.jpg|thumb|300px|center]]'''Primula'''   :

−

&nbsp;&nbsp;&nbsp;&nbsp;[http://en.wikipedia.org/wiki/Primula ''Main article.'']}}</pre>'''

−

'''Gallery example code:'''

−

'''<pre>{{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>}}</pre>'''

−

'''Text box example code:'''

−

'''<pre>{{dropimage|width=150px|Text|&lt;pre&gt;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.&lt;/pre&gt;}}</pre>'''

−

{{dropimage|width=150px|align=left|Image|[[image:Primula_aka.jpg|thumb|300px|center]]'''Primula'''   :   ''&nbsp;&nbsp;&nbsp;&nbsp;[http://en.wikipedia.org/wiki/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.</pre>

−

[http://en.wikibooks.org/wiki/Editing_Wikitext/Pictures/Images_in_Containers#The_Image_Gallery  '''The Image Gallery''']}}

−

===Limitations===

−

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'''.

−

Attempts at setting ''vertical'' text alignment have so-far failed.

−

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  '''&lt;pre&gt;&lt;/pre&gt;'''  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;   '''&amp;lt;pre&amp;gt;''' and '''&amp;lt;/pre&amp;gt;''').   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).

−

===Options===

−

----

−

====Container====

−

----

−

;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,ect. )

−

;background: background color of container,(seen for padding > 0px), [http://en.wikipedia.org/wiki/Web_colors '''Options;Any'''], Default;white

−

----

−

====Heading====

−

----

−

;hff:     heading font family (face) (default, Arial); (Options,many named faces )

−

;hfs:     heading font size (default, 10pt); (Options,points,pixels,em,ect.)

−

;hfw:     heading font weight(default, normal); (Options,normal or bold )

−

;hbgc:    heading background color (default, white); [http://en.wikipedia.org/wiki/Web_colors '''(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,ect.) 

−

----

−

====Content====

−

----

−

;cff:     content font family (face) (default, Arial); (Options,many named faces )

−

;cfs:     content font size (default, 10pt); (Options,points,pixels,em,ect. )

−

;cfw:     content text font weight(default, normal); (Options,normal or bold )

−

;cbgc:    content background color (default, white); [http://en.wikipedia.org/wiki/Web_colors '''(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,ect. )

−

[[Category:Drop Control Templates]]

−

</noinclude>

Template:DropImage - Revision history

Tonyc at 19:48, 1 May 2009

Tonyc at 19:43, 1 May 2009

Tonyc: New page: