Responzivní obrázky a videa

16. 02. 2017

Nejčastěji vkládanými médii jsou jednoznačně obrázky a videa. Přestože si na inPage můžete vybrat jednu z responzivních šablon, je nutné zachovat responzivní také obsah. Nejvíce vám práci usnadní procenta. Pojďme se podívat, jak na to.

Při vkládání médií do stránek inPage si volíte zároveň jejich velikost. Každý z nahraných obrázků se do systému uloží ve čtyřech různých velikostech, o kterých si můžete přečíst více v článku Obrázky v inPage - velikost a použití nejen s novým WYSIWYG editorem. Pokud chcete, aby se obrázek nedeformoval, lze již tady zadat hodnotu 100%. Do pole šířky napíšete hodnotu 100%, druhé pole necháte prázdné a zaškrtnete Zachovat proporce. Při tomto nastavení bude prvek responzivní, ale bude se zobrazovat na celou šířku stránky i na velkých monitorech.

Tento zápis lze užít i při vkládání videí nebo jakéhokoliv jiného iframu.

Maximální šířka

Ne vždy je ale žádoucí, aby se média zobrazovala na plnou šířku. Nejčastěji se s tímto problémem setkáváme na mobilních zařízeních, kde se jednotlivé prvky seskládají kvůli čitelnosti a úspoře místa pod sebe. Pokud je některý z prvků na stránce širší než samotná stránka, zobrazí se ve spodní části prohlížeče horizontální posuvník (scrollbar) viz obrázek. Responzivita je narušena a obsah nevidíme celý. Abychom předešli takové situaci, je nutné zajistit, aby se prvek nezobrazoval i na jiných zařízeních širší než samotná stránka.

Nejjednodušším způsobem, jak se s responzivitou médií vypořádat, je procentuální vyjádření hodnoty maximální šířky. Tu si upravíte prostřednictvím CSS zápisu, kde si hodnotu maximální šířky nastavíte. Šířka takového prvku se začne přizpůsobovat až v okamžiku, kdy by přesahovala hodnotu povolené maximální šířky.

CSS zápis

img, iframe {
  max-width: 100%;
}

Tento zápis nastaví maximální šířku 100% všem obrázkům a iframům na webu. V šabloně Hanami je u obrázků (img) nastavena již ve výchozím stavu.

Bootstrap třída

Dalším způsobem, je přiřazení třídy img-responsive konkrétním prvkům v HTML editoru. Ve WYSIWYG editoru je HTML editor přístupný z červeně označeného tlačítka na obrázku. Třída img-responsive má 100% maximální šířku již předdefinovanou z frameworku Bootstrap, který využívají všechny inPage responzivní šablony. Nemusíte si tedy definovat vlastní.

Třídu lze přiřadit i k libovolnému iframu či jinému prvku, u kterého chcete tuto hodnotu uplatnit.

Ukázka přiřazení třídy img-responsive k obrázku