Template:ThumbnailLeft: Difference between revisions
Jump to navigation
Jump to search
CptTwinkie (talk | contribs) mNo edit summary |
CptTwinkie (talk | contribs) mNo edit summary |
||
| (5 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<includeonly><table><td><div class="thumbcaption" style="border: 1px solid #ccc; border-radius: .33em; border-width: 1px 4px; margin-right: 10px;">[[File:{{{1|No.png}}}| | <includeonly><div style="display: flex;"><table><td><div class="thumbcaption" style="border: 1px solid #ccc; border-radius: .33em; border-width: 1px 4px; margin-right: 10px;">[[File:{{{1|No.png}}}|{{{4|200}}}px]]<br/><strong><center>{{#if:{{{2|}}}|<!--TRUE-->{{{2}}}|<!--FALSE-->{{PAGENAME}}}}</center></strong></div></td><td style="vertical-align: top; text-align: justify;">{{{3}}}</td></table></div></includeonly><noinclude><!-- | ||
==Example== | -->==Example== | ||
{{ThumbnailLeft|StoneCube.png|Stone Cube|Chicken cupim pork short loin turkey. Pork belly jerky tenderloin, shankle burgdoggen porchetta short ribs venison swine chuck pork loin cupim pig. Jowl tongue beef, tenderloin flank frankfurter turducken bacon meatloaf. Ball tip pancetta ground round short loin biltong meatloaf porchetta meatball flank filet mignon. Bresaola leberkas turkey corned beef tri-tip. Bresaola bacon sirloin, drumstick corned beef biltong picanha chuck ham hock andouille hamburger ball tip meatball tail burgdoggen. Corned beef ham meatball pork loin pancetta ground round turducken filet mignon shank cupim shoulder andouille.}} | {{ThumbnailLeft|StoneCube.png|Stone Cube|Chicken cupim pork short loin turkey. Pork belly jerky tenderloin, shankle burgdoggen porchetta short ribs venison swine chuck pork loin cupim pig. Jowl tongue beef, tenderloin flank frankfurter turducken bacon meatloaf. Ball tip pancetta ground round short loin biltong meatloaf porchetta meatball flank filet mignon. Bresaola leberkas turkey corned beef tri-tip. Bresaola bacon sirloin, drumstick corned beef biltong picanha chuck ham hock andouille hamburger ball tip meatball tail burgdoggen. Corned beef ham meatball pork loin pancetta ground round turducken filet mignon shank cupim shoulder andouille.}} | ||
<div style="clear: both;"></div> | <div style="clear: both;"></div> | ||
==Usage== | ==Usage== | ||
The | The ThumbnailLeft template is meant to solve issues with text when used with floating images. The standard for floating images on wikis is on the right hand side. On some image-rich pages it's helpful to also place images on the left side. When there are floats on both sides of the page, the text can become very difficult to manage in regard to padding and wrapping. | ||
<pre>{{ThumbnailLeft|<imagename>|<caption>|<inlineText>}}</pre> | |||
Fortunately, HTML 5 comes to our rescue with flex containers that have more respect for float positioning. This template formats an image and block of text inside of a table which is then wrapped in a flex container (not like a [https://en.wikipedia.org/wiki/Turducken turducken]). This aligns the image with the text, using proper padding, and with wrap the text if it encounters any floating objects that touch its borders. The text also uses justified alignment to make nice crisp edges for the cleanest presentation. | |||
<pre>{{ThumbnailLeft|<imagename>|<caption>|<inlineText>|<size>}}</pre> | |||
*The code above can be pasted into your page and edited. | *The code above can be pasted into your page and edited. | ||
*The second variable (caption) can be omitted. The caption will use the <nowiki>{{PAGENAME}}</nowiki> variable to fill the caption. | *The second variable (caption) can be omitted. The caption will use the <nowiki>{{PAGENAME}}</nowiki> variable to fill the caption. | ||
*The third variable (inline text) is a second column for content. Text is justified. | *The third variable (inline text) is a second column for content. Text is justified. | ||
*The fourth variable (size) sets the width of the image. You can leave this value out completely to get a 200 pixel (default thumbnail) size. | |||
==Example Source== | ==Example Source== | ||
Latest revision as of 14:33, 29 June 2018
Example
 | Chicken cupim pork short loin turkey. Pork belly jerky tenderloin, shankle burgdoggen porchetta short ribs venison swine chuck pork loin cupim pig. Jowl tongue beef, tenderloin flank frankfurter turducken bacon meatloaf. Ball tip pancetta ground round short loin biltong meatloaf porchetta meatball flank filet mignon. Bresaola leberkas turkey corned beef tri-tip. Bresaola bacon sirloin, drumstick corned beef biltong picanha chuck ham hock andouille hamburger ball tip meatball tail burgdoggen. Corned beef ham meatball pork loin pancetta ground round turducken filet mignon shank cupim shoulder andouille. |
Usage
The ThumbnailLeft template is meant to solve issues with text when used with floating images. The standard for floating images on wikis is on the right hand side. On some image-rich pages it's helpful to also place images on the left side. When there are floats on both sides of the page, the text can become very difficult to manage in regard to padding and wrapping.
Fortunately, HTML 5 comes to our rescue with flex containers that have more respect for float positioning. This template formats an image and block of text inside of a table which is then wrapped in a flex container (not like a turducken). This aligns the image with the text, using proper padding, and with wrap the text if it encounters any floating objects that touch its borders. The text also uses justified alignment to make nice crisp edges for the cleanest presentation.
{{ThumbnailLeft|<imagename>|<caption>|<inlineText>|<size>}}
- The code above can be pasted into your page and edited.
- The second variable (caption) can be omitted. The caption will use the {{PAGENAME}} variable to fill the caption.
- The third variable (inline text) is a second column for content. Text is justified.
- The fourth variable (size) sets the width of the image. You can leave this value out completely to get a 200 pixel (default thumbnail) size.
Example Source
{{ThumbnailLeft|StoneCube.png|Stone Cube|Chicken cupim pork short loin turkey. Pork belly jerky tenderloin, shankle burgdoggen porchetta short ribs venison swine chuck pork loin cupim pig. Jowl tongue beef, tenderloin flank frankfurter turducken bacon meatloaf. Ball tip pancetta ground round short loin biltong meatloaf porchetta meatball flank filet mignon. Bresaola leberkas turkey corned beef tri-tip. Bresaola bacon sirloin, drumstick corned beef biltong picanha chuck ham hock andouille hamburger ball tip meatball tail burgdoggen. Corned beef ham meatball pork loin pancetta ground round turducken filet mignon shank cupim shoulder andouille.}}
- Example bacon generated at https://baconipsum.com/