Vzhled
Obrázky
Fotografie ze života školy, učeben, praxí a školních akcí dodávají webu důvěryhodnost a přehlednost. Tato příručka je určená redaktorům školy a vysvětluje, jaké formáty obrázků Než zazvoní CMS podporuje, jak systém připravuje menší velikosti pro mobily, jak vyplnit alternativní text a na co pamatovat u fotografií žáků a zaměstnanců.
Kde to najdete
Obrázky své školy spravujete v levém menu v sekci Knihovna médií. Obrázek můžete vybrat nebo nahrát také přímo při úpravě záznamu v sekci Obsah webu, například u Stránky (pole Náhledový obrázek, případně pole Fotka, Obrázek, Fotky nebo Loga v sekcích) a u Aktuality (pole Hlavní fotka a Fotogalerie).
Na snímku vidíte okno výběru obrázku otevřené přímo z formuláře:
Postup krok za krokem
- Při úpravě stránky nebo aktuality klikněte v poli pro obrázek na Přidat soubor (nebo v sekci Knihovna médií klikněte na tlačítko Nové a zvolte Nahrání souborů).
- Existující fotku vyberte na kartě Procházet knihovnu. Novou nahrajte v dialogu Nahrát soubory na kartě Z počítače (případně tlačítkem Nahrát ze zařízení) přes Procházet soubory a potvrďte tlačítkem Nahrát do knihovny (počet) souborů.
- Klikněte na ikonu úprav u obrázku pro otevření okna Podrobnosti souboru.
- Do pole Alternativní text napište stručný popis toho, co je na fotce zachyceno.
- Pro viditelný popisek pod fotkou v článku nebo ve fotogalerii vyplňte pole Popisek.
- Potřebujete-li fotku otočit nebo oříznout, klikněte v náhledu na Oříznout, případně pomocí Otočit o 90° doprava upravte natočení a zvolte Použít (nebo Uložit jako kopii).
- Klikněte na Uložit změny.
Na snímku níže vidíte okno s podrobnostmi souboru, kde upravujete název souboru, alternativní text a popisek:
Pole a nastavení
V okně Podrobnosti souboru a v polích pro obrázky narazíte na tato nastavení:
| Pole | K čemu slouží | Povinné | Tip |
|---|---|---|---|
| Název souboru | Technický název souboru v knihovně médií. | Ano | Pojmenujte soubor srozumitelně před nahráním (den-otevrenych-dveri.jpg). |
| Alternativní text | Popis obrázku pro čtečky obrazovky a případ, kdy se obrázek nenačte. | Ne (doporučeno) | Popište děj na fotce jednou větou (do 300 znaků), nepište název souboru. |
| Popisek | Viditelný popisek pod obrázkem v detailu aktuality, v textu článku a ve zvětšené galerii. | Ne | U sekce Loga partnerů slouží i jako záložní popis loga, pokud chybí Alternativní text. |
| Umístění | Složka, ve které je soubor uložen. | Ano | Soubory leží vždy ve složce vaší školy a umístění neměníte. |
| Styl fotky | Vzhled obrázku v sekci Text a obrázek. | Ne | plain (stín), polaroid (bílý rámeček), circle (kruh), rounded (zaoblené rohy). |
Tipy a doporučení
Podporované formáty a velikost souboru
- Fotografie: Nahrávejte ve formátu JPEG (
.jpg,.jpeg), WebP (.webp) nebo AVIF (.avif). - Loga, znaky a grafika s průhledností: Používejte formát PNG (
.png). U pole Znak školy nahrajte průhledné PNG, které se na webu zobrazí jako vodoznak na pozadí vybraných sekcí a u aktualit bez fotky. - Zákaz formátu SVG: Soubory
.svg(image/svg+xml) systém z bezpečnostních důvodů nepovoluje nahrát, protože mohou obsahovat skripty. Loga vyexportujte do PNG. - Limity velikosti: Jeden soubor může mít nejvýše 50 MB, celková kvóta složky školy v Knihovně médií je 2 048 MB (2 GB). Běžné fotografie nahrávejte s delší stranou přibližně 1 600 až 2 500 px.
Automatické velikosti a přizpůsobení obrazovce
Při nahrání obrázku Než zazvoní CMS zmenší datovou velikost souboru a vytvoří z něj sadu rozměrových variant: náhled (thumbnail, do 245 × 156 px), malou (small, do 500 px šířky), střední (medium, do 750 px šířky) a velkou (large, do 1 000 px šířky). Web si sám vybírá vhodnou velikost podle zobrazení na displeji.
Web návštěvníkovi automaticky pošle vhodnou variantu podle velikosti obrazovky a typu sekce:
- Velká (
large): úvodní sekce Hero, Fotka v hlavičce podstránek, Hlavní fotka v detailu aktuality, zvětšená fotka v galerii a široké obrázky v textu. - Střední (
medium): sekce Text a obrázek a fotodlaždice v sekci Karty (variantatiles). - Malá (
small): karty ve výpisu aktualit, náhledy fotogalerie, portréty v sekcích Kontakt a Reference, odznaky v kartách (badges) a Loga partnerů.
V editoru textu web přizpůsobí šířku obrázku jeho rozměrům: malé obrázky (do 400 px) a čtvercovou grafiku PNG/GIF (do 1 200 px) vykreslí menší (12rem), čtvercové fotky a fotky na výšku v užším sloupci (24rem) a široké fotky přes celý sloupec.
Na následujícím snímku vidíte sekci Galerie na webu, která v mřížce zobrazuje malé náhledy a po kliknutí otevře velkou variantu fotky s popiskem:
Orientace fotek z mobilu, ořez a střed zájmu
Fotografie z mobilu mají uloženou informaci o natočení (EXIF). Zapnutá funkce Automatická orientace fotku při nahrání sama správně otočí.
Pokud je přesto potřeba fotku otočit nebo oříznout ručně, otevřete Podrobnosti souboru a klikněte na Oříznout:
- Tlačítkem Otočit o 90° doprava obrázek otočíte.
- Tažením rohů obdélníku upravíte výřez (volbou Zamknout poměr stran udržíte proporce).
- Tlačítkem Použít přepíšete původní obrázek, tlačítkem Uložit jako kopii vytvoříte nový soubor.
- Tlačítkem Nastavit střed zájmu můžete označit nejdůležitější místo na fotce a potvrdit volbou Uložit střed zájmu.
Alternativní text a přístupnost
Podle zákona č. 99/2019 Sb. musí mít obsahové obrázky vyplněný Alternativní text:
- Co psát: Popište věcně, co je na snímku (
Žáci druhého ročníku při chemické laboratoři). Nezačínejte slovy „Obrázek ukazuje…“. - Automatický filtr názvů z fotoaparátu: Pokud v poli Alternativní text nebo Popisek zůstane jen název souboru s příponou (
.jpg,.png,.webp,.heic) nebo kód fotoaparátu (IMG_1234,DSC_0306,DCIM100MEDIA), web ho automaticky zahodí, aby čtečce obrazovky neškodil. - Dekorativní obrázky: U fotek na pozadí (hlavička podstránek, Hero ve variantě
coverapage, vodoznak znaku) a u náhledů v kartách aktualit či dlaždicích vedle textového nadpisu web vkládá prázdný atributalt="", aby čtečka nečetla tutéž informaci dvakrát.
Fotky osob a souhlas (GDPR)
Fotografie žáků a zaměstnanců jsou osobními údaji podle GDPR:
Pozor
Před zveřejněním detailních fotografií žáků nebo zaměstnanců (v aktualitách, fotogaleriích, referencích či kontaktech) vždy ověřte, že má škola platný souhlas nebo jiný právní titul.
- Úplné smazání na žádost: Požádá-li rodič nebo žák o stažení fotografie, nestačí ji odebrat ze stránky. V Knihovně médií otevřete Podrobnosti souboru a zvolte Smazat tento soubor. Tím se trvale vymaže původní soubor i všechny vygenerované velikosti.
- Když fotku osoby nemáte: V sekcích Kontakt (pole Fotka) a Reference (pole Fotka obličeje) je fotka nepovinná. Bez ní web zobrazí kroužek s iniciálami nebo prvním písmenem jména.
Časté chyby
- Nahrávání loga v SVG: Nahrávání skončí chybou nepovoleného typu. Převeďte logo do průhledného PNG.
- Smazání používaného obrázku: Smažete-li soubor z Knihovny médií, místa pro obrázek na webu zůstanou prázdná. Pro výměnu souboru za novější verzi použijte v detailu souboru tlačítko Nahradit tento soubor.
- Plakát jako jediná informace: Vložíte-li do aktuality jen obrázek letáku, čtečka obrazovky ani vyhledávač z něj text nepřečtou. Klíčové termíny a údaje vždy napište i do textu stránky nebo do sekce Termíny.