Čuňačíme v MediaWiki - responzivní obrázky

Portál AbcLinuxu, 4. května 2025 07:24

Čuňačíme v MediaWiki - responzivní obrázky

17.8.2018 16:50 | Přečteno: 2170× | Za vším hledej Linux | poslední úprava: 17.8.2018 17:00

Možná jste i vy, tak jako já, narazili na problém s responzivním zobrazením obrázků vložených do wiki založené na systému MediaWiki. Ta standardně pracuje s “natvrdo” nastavenou velikostí obrázku, což vede k tomu, že se při změně velikosti okna prohlížeče jejich rozměry nezmění. Důsledkem je, že se totálně rozhodí formátování stránky a větší obrázek z okna “vyteče”. Pro většinu uživatelů to je neřešitelný problém, protože vyžaduje sofistkovaná rozšíření, která nemusíte mít všude k dispozici. I tak bývá zápis syntaxe poměrně komplikovaný. Existuje ale poměrně elegantní řešení – šablona. Ovšem vytvoření takové šablony je záležitost, na kterou každý uživatel nemá. Pokud tedy máte zájem, nabízím vám tímto k dispozici svoji šablonu. Vyžaduje ale, abyste měli v konfiguraci vaší wiki povoleno použití html elementu img – proměnná $wgAllowImageTag musí mít hodnotu true.

Proč není element `img` povolen by default

Je to proto, že by pak bylo možné do wiki vkládat i obrázky ze kteréhokoliv jiného webu. Administrátoři by tak ztratili kontrolu nad obsahem vkládaným do wiki. To by mohlo vést k diskreditaci jejich wiki ze strany trollujících uživatelů (vkládání nežádoucí reklamy, obscénních obrázků, aj.)

U wiki, kterou nemohou editovat anonymní a neschválení uživatelé je ale riziko takového chování minimální – trollujícího uživatele lze poměrně rychle odhalit a jeho účet zablokovat.

Kombinace elementu `img` a šablony

Nebudu zdlouhavě opisovat manuálovou stránku ze svojí wiki. Pokud vás zajímá, jak lze zkombinovat element img s tzv. “magic word” koukněte přímo tam.

Tady vám chci nabídnout pouze finální kód mé šablony Image. Její syntaxe vychází z klasické wiki syntaxe, ale nabízí i jiné, poměrně neobvyklé možnosti – kupř. možnost rotace vloženého obrázku. Více o tom jak tuto šablonu používat viz u její dokumentace.

Její kód nabízím tímto prostřednictvím předevčím proto, že u mé wiki se anonymní uživatel k wiki kódu šablony nedostane.

<includeonly>{{#if: {{{1|}}}
  | {{#ifexist: Media:{{{1}}}
      | {{#vardefine:obr|{{{1}}}}}
        {{#vardefine:path|{{filepath:{{#var:obr}}}}}}
        {{#if: {{{rotate}}}
          | {{#vardefine:rotateimg|-webkit-transform: rotate({{{rotate}}}deg); -moz-transform: rotate({{{rotate}}}deg); -o-transform: rotate({{{rotate}}}deg); -ms-transform: rotate({{{rotate}}}deg); transform: rotate({{{rotate}}}deg);}}
          | {{#vardefine:rotateimg|}}
        }}
        {{#iferror: {{#expr: {{{2|}}} > 1}}
          | Parameter for relative percentual size is not valid. It must be a real number > 1. Actually value for size "{{{2}}}" is missing or not valid.
          | {{#vardefine:percent|{{{2|}}}}}
            {{#switch: {{{3|}}}
              | left={{#vardefine:align|style="{{#var:rotateimg}}float: {{{3}}}; margin: {{{border|15}}}px {{{border|15}}}px {{{border|15}}}px 0;"}}
              | right={{#vardefine:align|style="{{#var:rotateimg}}float: {{{3}}}; margin: {{{border|15}}}px 0 {{{border|15}}}px {{{border|15}}}px;"}}
              | center={{#vardefine:align|style="{{#var:rotateimg}}display: block; margin: {{{border|15}}}px auto {{{border|15}}}px auto;"}}
              |center
             }}
            {{#vardefine:popis|{{{4|}}}}}
            {{#ifeq: {{{orig}}}
              | no
              |{{#vardefine:thumbsize|{{#expr:
              trunc(
                ( {{#imgw:{{#var:obr}}}} * {{#var:percent}} )
                    / 200
                )
                }}px}}<img src="{{filepath:{{#var:obr}}|{{#var:thumbsize}}}}" width="{{#var:percent}}%" resource="./File:{{#var:obr}}" {{#var:align}} alt="{{#var:popis}}" title="{{#var:popis}}">
              |<img src="{{filepath:{{#var:obr}}}}" width="{{#var:percent}}%" resource="./File:{{#var:obr}}" {{#var:align}} alt="{{#var:popis}}" title="{{#var:popis}}">
            }}
        }}
      | Image {{{1|}}} not uploaded!
    }}
  | Parameter missing!
}}</includeonly>

Důležitá poznámka: Tahle šablona závisí na těchto rozšířeních: