Difference between revisions of "Template:Rextthumb"

Latest revision as of 22:49, 7 June 2024

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, the third is the height in pixels. 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

@@ Line 1: / Line 1: @@
-<includeonly>{{#css:.extimg img{cursor:default;}
+<includeonly>{{#css:.extimg img{cursor:default}.extimg .extimg-container img{width:100%;height:100%}.extimg .thumbinner{padding-right: 4px;word-break:break-word}}<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>
-img[src="{{{1}}}"] {
+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, the third is the height in pixels. 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>.
-width: {{{2|auto}}};
-height: {{{3|auto}}};
-}}<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:calc({{{2|300}}}px + 2px)">|}}{{{1}}}{{#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.
-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>.
-{{Rextthumb|https://upload.wikimedia.org/wikipedia/commons/6/6c/Bouncywikilogo.gif|100|}}
+{{Rextthumb|https://upload.wikimedia.org/wikipedia/commons/6/6c/Bouncywikilogo.gif|100px|}}
-{{Rextthumb|https://upload.wikimedia.org/wikipedia/commons/6/6c/Bouncywikilogo.gif|100|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|100|thumb=true|caption=right floated|float=right}}
+{{Rextthumb|https://upload.wikimedia.org/wikipedia/commons/6/6c/Bouncywikilogo.gif|200px|thumb=true|caption=right floated|float=right}}
 [[Category:Design templates]]
 </noinclude>