1. Dokumentace
  2. Reference
  3. Controly

<je:img>

Control slouží pro vypsání obrázku uloženého v poli <SimpleImg>, <Img> nebo v prvku kolekce <ImgCollection> do stránky. Je ho také možné použít pro vytvoření odkazu na obrázek.

<je:img runat="server" field="someVariable.image" size="sizeName" />
<je:img runat="server" src="/images/image.jpg" />

Atributy

  • alt nepovinný [string, interpolace]

    Hodnota atributu bude přenesena do atributu alt výstupního HTML tagu <img>. Obsah atributu lze zadat natvrdo
    html <je:img runat="server" field="someVariable.image" alt="Toto je alt text" />
    nebo pomocí interpolace
    html <je:img runat="server" field="someVariable.image" alt="{someVariable.alt}" />
    (takto je možné vytvořit i jazykově závislý atribut alt)
    Není-li v controlu atribut alt uveden
    html <je:img runat="server" field="someVariable.image" />
    pak se použije obsah pole alt z dialogu uploadu obrázku v administraci, byl-li nějaký zadán a je-li pole alt povoleno atributem useAlt="true" v deklaraci příslušného typu (viz pole typů <Img> a <SimpleImg>). V opačném případě se do stránky vypíše tag <img> s prázdným atributem alt.

  • attributes nepovinný [definovaná syntaxe]

    Atribut umožňuje vypisovaný element doplnit libovolnými atributy:
    attributes="some-attribute: some value, another-attribute: different value"
    Pro hodnoty atributů lze použít interpolace:
    attributes="some-attribute: {someVariable.someField}"
    Některé znaky je třeba escapovat:

    Znak,:{}\"
    Escape sekvence\,\:\{\}\\&quot;

  • class nepovinný [string, interpolace]

    Hodnota atributu bude beze změny přenesena do výstupního kódu do atributu class.

  • container nepovinný [název containeru]

    ID containeru, který určuje kontejnerovou proměnnou controlu (viz Kontejnerování).

  • field nepovinný [název pole]

    Pole typu <Img>, <SimpleImg> nebo prvek kolekce <ImgCollection>, s jehož obsahem control pracuje. V případě prvku kolekce <ImgCollection> je název pole vždy item. Název pole lze zadat absolutně nebo relativně vzhledem ke kontejnetové proměnné (viz Kontejnerování).

  • idForClient nepovinný [string, interpolace]

    Hodnota atributu bude beze změny přenesena do výstupního kódu do atributu id.

  • size někdy povinný [název velikosti definovaný v Site.config]

    Jméno velikosti obrázku uvedené v deklaraci příslušného typu, která má být controlem vypsána; povinný jen a právě pro pole typu <Img> a prvky kolekce <ImgCollection>. Pro pole typu <SimpleImg> se neuvádí (nedává pro něj smysl).

  • src nepovinný [url]

    URL statického souboru s obrázkem (tj. jpg, png, gif, svg), tedy takového, který nebyl na web nahrán prostřednictvím administrace (byl např. nahrán přímo pomocí FTP). URL by měla být absolutní z kořene aplikace. Používá se v situaci, kdy URL obrázku není možné uvést absolutně – obvykle kvůli umístění ve virtuálním adresáři na vývojovém serveru – ale ani relativně – např. jsou přepisována URL stránek.

  • style nepovinný [string, interpolace]

    Hodnota atributu bude beze změny přenesena do výstupního kódu do atributu style.

  • title nepovinný [string, interpolace]

    Hodnota atributu bude beze změny přenesena do výstupního kódu do atributu title.

Lze také použít atributy HTML pro události myši a klávesnice (onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup). Jejich obsah je přímo přepsán do výstupu.

Vnitřní pole

Pole typu <Img>, <SimpleImg> a prvky kolekce <ImgCollection> obsahují vnitřní pole, jejichž obsah lze vypsat pomocí controlu <je:item>. Více viz popis pole typu <Img>, resp. <SimpleImg>.

Příklad

Mějme v Site.config proměnnou page typu PageWithImages:

<Var name="page" type="PageWithImages" />
...
<Type name="PageWithImages">
  <SimpleImg name="icon" />
  <Img name="photo">
    <Size name="original" />
    <Size name="fullHD" width="1920" height="1080" />
    <Size name="thumb" width="320" height="200" />
  </Img>
</Type>

icon je typu <SimpleImg>, vypíšeme ho tedy jednoduše:

<je:img runat="server" field="page.icon" />

photo je typu <Img>, controlu tedy musíme uvést i velikost, kterou chceme vypsat. Ve fullHD to uděláme takhle:

<je:img runat="server" field="page.photo" size="fullHD" />

Pokud bychom chtěli obrázek jen v náhledové velikosti, pak:

<je:img runat="server" field="page.photo" size="thumb" />

Připomínky a postřehy

Máte-li nějakou připomínku, dobrý nápad nebo jste našli v dokumentaci chybu, rádi od vás uslyšíme.