Difference between revisions of "Template:Rextthumb"
Jump to navigation
Jump to search
Coppersalts (talk | contribs) |
Coppersalts (talk | contribs) (boom. fully functional, thumbable, independantly rescalable external image template that DOESN'T cause problems when you use too many of them on a page!) |
||
| Line 3: | Line 3: | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
| − | }}<span class="extimg">{{#ifeq:{{{thumb|}}}|true|{{#css:html .thumbinner img {background-color:#fff;border:1px solid #c8ccd1;}}<div class="thumb {{#switch:{{{float}}}|right=tright|left=tleft|#default=tright}}"><div class="thumbinner" style=width:min-content>|}}<div style="width:{{{2|auto}}};height:{{{3|auto}}};position:relative">{{{1}}}</div>{{#ifeq:{{{thumb|}}}|true|<div class="thumbcaption">{{{caption|}}}</div></div></div>|}}</span></includeonly><noinclude> | + | } |
| + | .extimg .thumbinner { | ||
| + | padding-right: 4px; | ||
| + | } | ||
| + | }}<span class="extimg">{{#ifeq:{{{thumb|}}}|true|{{#css:html .thumbinner img {background-color:#fff;border:1px solid #c8ccd1;}}<div class="thumb {{#switch:{{{float}}}|right=tright|left=tleft|#default=tright}}"><div class="thumbinner" style=width:min-content>|}}<div class="extimg-container" style="width:{{{2|auto}}};height:{{{3|auto}}};position:relative">{{{1}}}</div>{{#ifeq:{{{thumb|}}}|true|<div class="thumbcaption">{{{caption|}}}</div></div></div>|}}</span></includeonly><noinclude> | ||
Note: this template will apply the resizing to all copies of that image on the page. If this becomes a problem, I can fix it, but for now I'm leaving it like this. | Note: this template will apply the resizing to all copies of that image on the page. If this becomes a problem, I can fix it, but for now I'm leaving it like this. | ||
This is a template for resizing external images. It takes three arguments; first is the link to the media, second is the width in pixels, and optionally text which appears when you hover over the image. You can also put it in a frame using <code>thumb=true</code>. To add a caption, set <code>caption=</code>; to set the float, use <code>float=</code>. | This is a template for resizing external images. It takes three arguments; first is the link to the media, second is the width in pixels, and optionally text which appears when you hover over the image. You can also put it in a frame using <code>thumb=true</code>. To add a caption, set <code>caption=</code>; to set the float, use <code>float=</code>. | ||
| Line 9: | Line 13: | ||
{{Rextthumb|https://upload.wikimedia.org/wikipedia/commons/6/6c/Bouncywikilogo.gif|100px|}} | {{Rextthumb|https://upload.wikimedia.org/wikipedia/commons/6/6c/Bouncywikilogo.gif|100px|}} | ||
{{Rextthumb|https://upload.wikimedia.org/wikipedia/commons/6/6c/Bouncywikilogo.gif|100px|thumb=true|caption=left floated test test test lon long long caption|float=left}} | {{Rextthumb|https://upload.wikimedia.org/wikipedia/commons/6/6c/Bouncywikilogo.gif|100px|thumb=true|caption=left floated test test test lon long long caption|float=left}} | ||
| − | {{Rextthumb|https://upload.wikimedia.org/wikipedia/commons/6/6c/Bouncywikilogo.gif| | + | {{Rextthumb|https://upload.wikimedia.org/wikipedia/commons/6/6c/Bouncywikilogo.gif|200px|thumb=true|caption=right floated|float=right}} |
[[Category:Design templates]] | [[Category:Design templates]] | ||
</noinclude> | </noinclude> | ||
Revision as of 19:12, 7 June 2024
Note: this template will apply the resizing to all copies of that image on the page. If this becomes a problem, I can fix it, but for now I'm leaving it like this.
This is a template for resizing external images. It takes three arguments; first is the link to the media, second is the width in pixels, and optionally text which appears when you hover over the image. You can also put it in a frame using thumb=true. To add a caption, set caption=; to set the float, use float=.
left floated test test test lon long long caption
right floated