Widget:Teste

   {{#if:yes|
     <a href="{{fullurl:Arquivo:{{{file}}}}}">
       <img src="{{filepath:{{{file}}}}"
            
            class="thumbimage"
            alt=""
            loading="lazy"
            decoding="async" />
     </a>
   |
     <img src="

<style> /* ——— Estilos isolados do widget (não poluem o resto) ——— */ .widget-gifthumbright { margin: .5em 0; } .widget-gifthumbright.tright { float: right; clear: right; margin-left: 1.4em; } .widget-gifthumbright.tleft { float: left; clear: left; margin-right: 1.4em; } .widget-gifthumbright.tcenter{ float: none; margin-left: auto; margin-right: auto; display: table; }

.widget-gifthumbright .thumbinner {

 border: 1px solid #a2a9b1;
 background-color: #f8f9fa;
 padding: 3px;
 text-align: center;
 display: inline-block; /* permite responsivo quando sem width fixo */
 max-width: 100%;
 box-sizing: content-box; /* p/ largura = imagem + 2px da borda (1px cada lado) */

}

.widget-gifthumbright .thumbimage {

 display: block;
 max-width: 100%;
 height: auto;          /* mantém proporção se width não vier fixo */

}

.widget-gifthumbright .thumbcaption {

 margin-top: 3px;
 font-size: 88%;
 color: #202122;
 line-height: 1.3;

} </style>

<script> /* ——— JS opcional: se não passar "width", ajusta o contêiner ao tamanho real do GIF quando carregar ——— */ (function () {

 try {
   var root = document.currentScript.previousElementSibling; // <style> está antes do <script>, então root é o bloco do widget
   // Pode acontecer do previousElementSibling ser o <style>; então sobe mais um:
   if (root && root.tagName === 'STYLE') root = root.previousElementSibling;
   if (!root) return;

   var inner = root.querySelector('.thumbinner');
   var img   = root.querySelector('img.thumbimage');

   if (!inner || !img) return;

   // Se o editor não definiu width fixo, mantemos responsivo — mas setamos uma largura exata após o load
   var hasFixedWidth = inner.getAttribute('style') && /width\s*:/.test(inner.getAttribute('style'));
   if (hasFixedWidth) return;

   function fit() {
     // soma 2px de borda (1px de cada lado), imitando o thumb clássico
     var w = Math.round(img.getBoundingClientRect().width) + 2;
     if (w > 0) inner.style.width = w + 'px';
   }

   if (img.complete) { fit(); }
   else { img.addEventListener('load', fit, { once: true }); }
   // também reage a resize (caso o layout mude)
   window.addEventListener('resize', fit);
 } catch (e) {}

})(); </script>