Mudanças entre as edições de "Widget:Teste"

Edição das 01h59min de 14 de agosto de 2025

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

 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>

@@ Linha 1: / Linha 1: @@
-<!-- Widget:teste -->
+<!-- Widget:Teste — GifThumb (thumb fake que mantém GIF animado)
-<div class="thumb {{#if:{{{align|}}}|t{{{align}}}|tright}}">
+     Parâmetros:
-   <div class="thumbinner" style="width: {{#expr: {{{width|274}}} + 2 }}px;">
+       - file   (obrigatório)  ex: download.gif
-     <img
+       - cap    (opcional)     legenda
-       src="{{filepath:{{{file|}}}}"
+       - side   (opcional)     right | left | center  (padrão: right)
-      width="{{{width|274}}}"
+       - width  (opcional)     número em px (ex: 274). Se não passar, fica responsivo.
-      class="thumbimage"
+       - alt    (opcional)     texto alternativo
-      alt="{{{alt|}}}"
+       - link   (opcional)     yes|no (padrão: yes) linka para a página do arquivo
-      decoding="async"
+     Requisitos: ParserFunctions (para #if, #ifeq, #expr) -->
-     />
-     <div class="thumbcaption">{{{caption|}}}</div>
+<div class="widget-gifthumbright thumb
+  {{#ifeq:{{{side|right}}}|left|tleft|}}
+  {{#ifeq:{{{side|right}}}|right|tright|}}
+  {{#ifeq:{{{side|right}}}|center|tcenter|tright}}">
+   <div class="thumbinner"
+       {{#if:{{{width|}}}|style="width: {{#expr: {{{width}}} + 2 }}px;"|}}>
+     {{#if:{{{link|yes}}}|
+      <a href="{{fullurl:Arquivo:{{{file}}}}}">
+        <img src="{{filepath:{{{file}}}}"
+             {{#if:{{{width|}}}|width="{{{width}}}"|}}
+             class="thumbimage"
+             alt="{{{alt|}}}"
+             loading="lazy"
+             decoding="async" />
+      </a>
+    |
+       <img src="{{filepath:{{{file}}}}"
+           {{#if:{{{width|}}}|width="{{{width}}}"|}}
+           class="thumbimage"
+           alt="{{{alt|}}}"
+           loading="lazy"
+           decoding="async" />
+     }}
+     <div class="thumbcaption">{{{cap|}}}</div>
    </div>
 </div>
+<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>

Mudanças entre as edições de "Widget:Teste"

Edição das 01h59min de 14 de agosto de 2025

Menu de navegação

Pesquisa