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

De Wiki Gla
Ir para navegação Ir para pesquisar
m
Etiqueta: Revertido
m (Limpou toda a página)
Etiquetas: Reversão manual anulando
 
(163 revisões intermediárias por 3 usuários não estão sendo mostradas)
Linha 1: Linha 1:
<!-- Widget:Teste — GifThumb (thumb fake que mantém GIF animado)
    Parâmetros:
      - file  (obrigatório)  ex: download.gif
      - cap    (opcional)    legenda
      - side  (opcional)    right | left | center  (padrão: right)
      - width  (opcional)    número em px (ex: 274). Se não passar, fica responsivo.
      - alt    (opcional)    texto alternativo
      - link  (opcional)    yes|no (padrão: yes) linka para a página do arquivo
    Requisitos: ParserFunctions (para #if, #ifeq, #expr) -->


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

Edição atual tal como às 19h10min de 12 de setembro de 2025

Disponível em “https://wiki.gla.com.br/index.php?title=Widget:Teste&oldid=39086”