[Vyřešeno] Katalog - šířka a výška pro <img> tag u chybějících náhledů

jp007 · 2013-09-10 09:37:32

Zdravím,

ještě jsem narazil na jednu věc, co se katalogu týče. U některých položek chybí náhledy stránek (pravděpodobně se generují automaticky a u nových položek to prostě chvilku trvá), takže někdy dojde k mírnému rozhození ostatních položek (prostě nejsou všechny zarovnány přesně v mřížce). Dochází k tomu např. ve chvíli, kdy chybí náhled u položky na pozici 4 (2 zleva, 1 shora), tudíž položka nezabírá dostatek místa a položka pod ní (pozice 6) se posune o něco nahoru.

Celé by to vyřešilo přidání atributů "width" a "height" k <img> tagům. To by neměl být problém, protože všechny náhledy mají rozměr 300x225px. A pak by možná stálo za zvážení přidání atributu "alt" s prázdnou hodnotou, aby na náhledy neupozorňovaly čtečky obrazovek (nevidomým uživatelům je upozornění na náhled naprosto k ničemu, akorát je to zdržuje při průchodu stránkou). Takže ideálně by <img> tag měl vypadat asi takto:

<img src="http://www.endora.cz/thumbs/<obrazek>.png" width="300" height="225" alt="">

Taková změna by měla být záležitostí pár sekund

Díky.

kksmirice · 2013-09-10 09:53:46

S přidáním atributů width a height přímo do tagu moc nesouhlasím, tag alt je povinným atributem tagu <img>, spíše ve tvaru alt="*", tedy neprázdný řetězec atributu.
Jednodušší a efektnější je přidání parametrů šířky a výšky do souboru stylu.

Možná by také bylo lepší testovat existenci náhledu a pokud není k dispozici, vložit standardní obrázek - "Náhled není k dispozici", třeba i s logem Endora.
Pak by se ani nemusel měnit stylopis, protože obrázek by měl požadované rozměry.

jp007 · 2013-09-10 11:20:06

U tagu <img> je jediným povinným atributem atribut src (viz specifikaci). Atribut alt slouží pro zadání textové alternativy k obrázku, pokud obrázek z nějakého důvodu není možné zobrazit (třeba z důvodu jeho neexistence). Zároveň atribut alt využívají čtečky obrazovek (čtou jeho obsah). To se hodí nevidomým uživatelům, kteří obrázek jednoduše nevidí. Je několik situací, jak se může čtečka obrazovky s atributem alt poprat:

Atribut alt není uveden - v takovém případě čtečka oznámí uživateli přítomnost obrázku slovek "GRAFIKA" (či podobně)
Atribut alt obsahuje nějaký text - čtečka přečte tento obsah. Mělo by se jednat např. o popis, co se na obrázku nachází ("červený míč", "muž na pláži",...), pokud je na obrázku nějaký nápis (a je to hlavní motiv obrázku), pak by měl atribut alt obsahovat přepis tohoto nápisu, apod.
Atribut alt je uveden, ale je prázdný alt="" - čtečka nic nečte, nic nehlásí, dělá jako by tam ten obrázek nebyl

Proč se zrovna čtečky chovají takto je na jiné povídání, souvisí to s historickým vývojem, atd. Jde o to, že pokud máme na stránce obrázek, který nemá pro uživatele naprosto žádný informační smysl, uvádí se u takového obrázku prázdný atribut alt="". Jakýkoli jiný obsah tohoto atributu je k ničemu, naprosto nevhodný a navíc zdržující (nevidomý uživatel musí čekat, až mu ho čtečka přečte). V případě náhledů v katalogu je jakýkoli obsah taktéž k ničemu - ty obrázky nemají žádný informační význam (pro nevidomé uživatele). Nabízelo by se např. uvést v atributu alt název domény, ale to bude akorát zbytečně duplikovat na stránce již obsaženou informaci (z pohledu čtečky obrazovky: "OBRÁZEK example.com, ODKAZ example.com"), stejně tak je nesmyslný i jiný obsah, např. vámi navrhovaná hvězdička "OBRÁZEK hvězdička, ODKAZ example.com"). S prázdným alt atributem by to bylo jen "ODKAZ example.com, ODKAZ example2.com, ODKAZ example3.com,...".

K atributům width a height - může se to např. nahradit zápisem ve stylopisu, přesto bývá vhodnější u obrázků tyto atributy uvádět. Např. se tím o pár ms zrychlí vykreslení stránky, protože prohlížeč při vykreslování jednoduše vyhradí na základě těchto atributů pro obrázek na stránce odpovídající prostor, aniž by musel obrázek nebo stylopis načítat. Navíc může mít uživatel zakázáno zobrazování obrázků, nebo se mu nemusí načíst stylopis (nebo ho také může mít zakázaný), nebo může mít starou verzi stylopisu bez informaci o šířce a výšce...

jp007 · 2013-09-20 20:07:00

Koukám, že asi vyřešeno nastavením rozměrů nadřazenému elementu v CSS a vynecháním <img> tagu pro neexistující obrázky. Takže označuji topic jako vyřešený.

#1 2013-09-10 09:37:32

[Vyřešeno] Katalog - šířka a výška pro <img> tag u chybějících náhledů

#2 2013-09-10 09:53:46

Re: [Vyřešeno] Katalog - šířka a výška pro <img> tag u chybějících náhledů

#3 2013-09-10 11:20:06

Re: [Vyřešeno] Katalog - šířka a výška pro <img> tag u chybějících náhledů

#4 2013-09-20 20:07:00

Re: [Vyřešeno] Katalog - šířka a výška pro <img> tag u chybějících náhledů

Zápatí