Když chystáme web "na slepo" a grafik nám nepřipraví dostatečně obsáhlou textovou stranu, daný problém zpravidla neřešíme. Pokud ovšem vytváříme novou grafiku již existujícího webu, který má dostatek obsahu pro kontrolu, můžeme formátování textů nachystat mnohem lépe. 

První věc, kterou musíme rozhodnout, je odsazování pomocí marginů či paddingů. Setkal jsem se s obojím, ale sám budu vždy preferovat spodní padding oproti hornímu a spodnímu marginu. Marginy mají tu výhodu, že se slijí dohromady, nicméně je to pořád neintuitivní chování, které se musíme v hlavě představit kdykoli, když skládáme libovolné elementy za sebe. 

Proto je za mě lepší vždy a jenom spodní odsazení. Pro * > :last-child pak stačí resetovat na nulu a máme hotovo. 

Jakmile si nastavníme nějaké globální odsazení základních typografických elementů, můžeme se zamyslet nad celkovou strukturou očekávaných článků. Používá klient 2 nadpisy za sebou? Používá klient nadpisy jen jako grafické zdůraznění nebo se jedná o logické celky, které je potřeba oddělit víc? Má klient rád vzdušné stránky, kde není vše namačkáno na sebe? 

Pokud je odpověď na většinu z těchto otázek kladná, stačí nám přidat opravdu jen pár definic, aby se výše uvedené věci začaly dít samy. Tady na blogu to dělám úplně stejně.

Globální definice

Začneme jednoduchou ukázkou kódu. Z ní je na první pohled jasné, že všechny seznamy a nadpisy, které budou natvrdo v šabloně musíme redefinovat. Ale ono se stačí zamyslet nad poměrem: Omezený počet elementů v šablonách vs. libovolný počet html textu, který nám do šablony dodá systém? Nutnost ručně přidávat všechny definice pokaždé, když přidám novou typovou šablonu? Ne, děkuji. Raději si těch pár prvků mimo obsahovou oblast zresetuji sám. 

h1 {padding-bottom:4rem;}

p,
h2,
h3 {padding-bottom:2rem;}

ul, 
ol, 
table {margin-bottom:2rem;}

h4,
h5 {padding-bottom:1rem;}

Mějme základní definice odsazení. 40 pixelů pro nadpis první úrovně, 20 pixelů pro zbytek. Následující kód vyřeší groupování jednotlivých sekcí tak, abychom v administraci nemuseli řešit vůbec nic navíc. (Komponenty, x různých html bloků pod sebou, oddělovače...) 

Logický blok začíná nadpisem

Každý nadpis bude odsazen o dalších 20 (10, 5) pixelů, pokud před ním není jiný nadpis stejné nebo vyšší úrovně. 

.article-detail {

	*:not(h2) + h2 {padding-top:2rem;} 
	*:not(h2):not(h3) + h3 {padding-top:1rem;} 
	*:not(h2):not(h3):not(h4) + h4 {padding-top:0.5rem;} 

}

Je to takhle jednoduché. 

Dvojité odsazení

Použití padding-bottom namísto dvojitého marginu má ještě další výhodu, kterou je automatické zvedání hodnot u prvků typu <table>. Tabulka musí být vždy odsazena marginem. Pokud chceme pro náš příklad zvednout její odsazení na dvojnásob, nemusíme se bát spojení marginu s předchozím prvkem. 

Chceme-li zdůraznit tabulku, která je přesně mezi dvěma odstavci, stačí jednoduše:

p + table {margin-top:2rem;}
p + table + p {padding-top:2rem;}

Spolu s výchozím odsazením, které prvky zdědily z prvního bloku kódu, máme krásných 40 pixelů z obou stran. 

Kontrolní otázka

Jako třeba "Napište, kolik je jedna plus jedna" je sice stará, ale stále efektivní metoda. Ona čeština je mnohdy nejúčinnější antispam. Já kontrolní otázku používám stále, ovšem už delší dobu ji za vás vyplní JavaScript. Robot ale JavaScript neumí (tedy stále v to pevně doufám), takže by se dál neměl dostat. A kdyby náhodou, je tu ještě spousta dalších kontrol. 

Povinně prázdné pole

Zatím jsme stále u robotů. Kdyby náhodou první kontrola selhala, je tu ještě skryté pole (stylama v externím souboru, nikoli jako hidden input), které musí zůstat prázdné, jinak se formulář neodešle. Spamboti zpravidla vyplňují vše, co ve formu naleznou. Alespoň dřív tomu tak bylo. A když pole pojmenujeme nějak výstižně, například "skype" nebo "company", robot se na něj chytí. Tato pole jsem měl dvě, ale jedno musí stačit, a tak šlo druhé pryč. 

Prohozené názvy polí

Email a web měly prohozený name, a tak když někdo zadal zavináč do pole e-mail (podle labelu určeného pro webovou adresu), formulář se neodeslal. Funkcionalita chytrá, ovšem působí takové zmatky v procesingu, že od ní budu všechny zrazovat. 

Test HTTP_REFERERa

Většina spambotů je chytrá a odesílá stejného referera jako stránky, kam se snaží poslat komentář. Pokud na to autor spambota zapomněl, budu ve výhodě. Užitkem si nejsem příliš jistý, takže vypínám. 

Kontrola odeslaných dat

Roboty bychom měli vyřešené, takže teď ještě živé spammery. A protože kontrolní otázka je pro pohodlí těch slušných komentujících skrytá, musím nasadit další úroveň kontrol pro živé lidi, co jedou copy+paste+enter na každém webformu, který najdou. 

Spamwords

Dříve to byla viagra, nyní spammeři nabízejí půjčky. Mám uložený seznam slov, která se nesmí v komentáři objevit. Tohle zpravidla odradí cizokrajné spammery, proti tuzemským to moc efektivní není: proto tu mám co pár týdnů jeden až dva spamy. Což není zlé.

Počet odkazů v těle zprávy

Další způsob, jak odradit cizokrajné spammery, je spočítat hypertextové odkazy v těle zprávy. Spamy totiž často obsahují jen kýbl odkazů, a právě proti nim jsem takto chráněný. Spolu s testováním BB kódu v rámci předchozího bodu  odchytím velkou část nevyžádaných zpráv. (BB kód nepoužívám, a proto, když se ho někdo snaží odeslat, napíšu mu zprávu, ať to nedělá.) Tady jsem provedl jenom aktualizaci, protože knihovnu jsem psal už hodně dávno, a nepočítala s https variantou odkazů. 

Jak vidíte, žádná otravná captcha není potřeba. Těch kontrol je sice požehnaně, ale pohodlí uživatele je na prvním místě. 

V něm si napíšeme takovou mini-aplikaci, kde tohle všechno spojíme dohromady. Vysvětlování bude méně, jelikož je vše popsáno v předchozích článcích. A na závěr dostaneme funkční řešení.

Miniaplikaci jsem se snažil napsat tak, aby tam bylo co nejméně kódu i souborů. Proto je na hulváta všechno v indexu, proto ani neparsuji jedinou GET proměnnou, byť ve všech tutoriálech o mod_rewrite to doporučuji. Cílem je podchytit 3 stavy (výpis článku, filtr podle kategorie, detail článku) s fallbackem do 404ky, tak, aby kódu bylo co nejméně a já vám necpal nějakou strukturu aplikace, kterou vůbec nechcete. Zařazení článku do kategorie PHP: Základy má proto své opodstatnění; článek je určený začínajícím kodérům. 

Kód #1: SQL

Tabulky mají nějakou základní strukturu a sloupce, které u kterých se očekává, že je mít budou. Do těla článku je zbytečně vkládat nebudu, můžete si je prohlédnout zde.

Kód #2: PHP

.htaccess na ukázku není potřeba, takže můžeme přejít rovnou ke skriptům. V configu nastavíme přístupové údaje k databázi a root url, více nastavení zatím nepotřebujeme. Obojí si navíc mohu podmínit pro localhost a ostrý server. 

Výchozí stránkování bude po čtyřech, abych nemusel do tabulek vkládat kýble testovacích dat. 

config.php

$config['paging_limit'] = 4;

$config['root'] = 'http://localhost/ajaxarticles2/';

$config['db_host'] = 'localhost'; 
$config['db_user'] = 'root';
$config['db_pass'] = ''; 
$config['db_name'] = 'evil';

index.php - kostra

Jak jsem zmínil výše, cílem miniaplikace je co nejmenší množství kódu i souborů, takže vše naplácáme do indexu a opustíme ho až při načtení šablony. To je základní minimum, které je dobré vždy oddělit. Tady už je čistě na vás, jak si vše poskládáte. Já doporučuji alespoň inicializaci nějaké základní třídy, která se o zbytek postará. Pokud tedy nevyužíváte hotový framework.

To jen pro úplnost, ať nemusím každý blok kódu uvádět a popisovat. Proto se nyní pustíme do samotného načítání obsahu. 

<?php

// #0 zapnu zobrazeni chyb, pro jistotu
// #1 includy
// #2 funkce
// #3 pripojeni k databazi
// #4 inicializace promenne $tpl, sem budu predavat sablonova data
// #5 nacteni sdilenych komponent (menu), pouze pres standardni request
// #6 sekvecne podminek na filtraci dle kategorie, vypis a detail clanku
// #7 nacteni templaty

?>

Víceméně každý z bloků by měl mít nějaký vlastní layer v systému, já mám oddělenou pouze funkční část od templatů. 

Sdílené komponenty

A protože je ukázka opravdu jednoduchá, více věcí, které chci načítat na každé stránce, tu nemám. Do následujícího bloku ale přijde vše, co se přímo netýká výpisu článků: vše, co chceme z Ajaxového requestu vyjmout. V uvedeném příkladu tedy pouze hlavní menu. 

Z následující ukázky je také jasné, co se asi dělo ve skriptu předtím - aniž byste se hned museli dívat do kódu.  

if (!isAjax()) {
	$cats_query = "
		SELECT * 
		FROM `article_categories` 
		WHERE `active` = '1' 
		ORDER BY `sort_order` ASC
	";
	
	$cats = $sqli->query($cats_query);
	$tpl['categories'] = array();
	while ($item = $cats->fetch_assoc()) {
		$item['href'] = $config['root'] . '?cat=' . $item['seourl'];
		$tpl['categories'][] = $item;
	}
}

Výpis článků

Ukázce předchází filtrace dle kategorie, ale na tu se můžete podívat až ve výsledném souboru. Je to pouze funkce navíc, abych mohl ukázat, že Ajaxové stránkování jde nalepit na více modulů zaráz. Proměnná $category_condition bude nabývat jedné z následujících hodnot:

$category_condition = ''; // OR
$category_condition = "AND `category_id` = '{$category['id']}'";

A nyní živá ukázka stránkovací knihovny. Odpálíme SQL dotaz na počet záznamů, vytvoříme instanci Pagingu a hurá na SQL dotaz pro výběr objektů. Zde jenom připomenu informaci z minulého článku, že ošetření vstupu si třída ohlídá sama. Nemusíme řešit. 

$total_query = "
	SELECT COUNT(`id`) 
	FROM `articles` 
	WHERE `active` = '1' {$category_condition}
";

$total_row = $sqli->query($total_query)->fetch_row();
$total = $total_row[0]; // kvuli php5
$paging_limit = 4;

$paging = new Paging($total, $paging_limit, 'page'); 
$paging->set_around(1)
       ->set_drop_vars(array('ajax'))
       ->set_paging();
$paging_start = $paging->get_start();

$tpl['paging'] = array(
	'desktop' => $paging->export_paging(),
	'limit' => $paging_limit,
);

$articles_query = "
	SELECT * FROM `articles`
	WHERE `active` = '1' {$category_condition}
	ORDER BY `timestamp` DESC
	LIMIT {$paging_start}, {$paging_limit}
";

$articles = $sqli->query($articles_query);
$tpl['articles'] = array();
while ($item = $articles->fetch_assoc()) {
	$item['href'] = $config['root'] . '?art=' . $item['seourl'];
	$tpl['articles'][] = $item;
}

A to je z PHP vše.

Co mi tu jednoznačně chybí, je podmínka na výběr článků pouze z aktivní kategorie, nemáme-li zúžený filtr. Pro úplnost uvedu, ale ukázku tím komplikovat nechci. Musel bych totiž ještě řešit výjimku z podmínky, kde články z neaktivní kategorie vybrat chci, jsem-li v jejím detailu. Ale to bychom se příliš zamotali v blogové funkcionalitě, když chci jenom ukázat Ajaxové stránkování. Každopádně pro požadované chování stačí zjoinovat tabulky v obou SQL dotazech. Opět na to jdeme nejjednodušší možnou cestou.  

SELECT a.* // COUNT(a.`id`)
FROM `articles` a
LEFT JOIN `article_categories` c ON c.`id` = a.`category_id`
WHERE a.`active` = '1' AND c.`active` = '1' 

A to je vlastně úplně vše. Frontend zde znovu rozebírat nemusím, tomu se věnoval předchozí článek. Article detail v aplikaci mám, nicméně to není důležitá funkce k tématu. Tu si můžet prohlédnout v náhledu kompletního zdrojáku. 

Bug fix

Při testování jsem narazil na jeden zajímavý bug, kterým je ukládání do cache na straně prohlížeče. Uživateli se pak zobrazí pouze tělo stránky bez načteného headeru a footeru. 

A právě to je důvod těch pár nenápadných drobností v kódu, kterých si možná na první pohled nevšimnete; Ajax Request posílám na jinou URL, než na které obsah zobrazuji při stisku F5. Ono by to tak i správně mělo být (unikátní URL pro unikátní response), ale člověk často na podobné věci kašle... Proto parametr ?ajax=1, který bug vyřeší. 

Ukázka: index.php

Kód: index.php
Kód: templates/index.php
Kód: tables.sql
ZIP: archív ke stažení zde

Je to nutné zlo, které člověk musí trpět poměrně často. Ale technologie pokročily, takže se s tím dá poprat velice snadno i bez použití složitých frameworků. Ty buď máte zvládnuté a neřešíte nic, nebo vám činnost spíš zkomplikují. U formulářů to platí dvojnásob.

Základní resety

Relativní jednotky zatím řešit nebudeme. Hezky všechno v pixelech, ať v tom nedělám ještě větší zmatky. 

* {
	border:0;
	margin:0;
	padding:0;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
:focus {outline:none;}

button,
input,
textarea,
select {
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	border-radius:0;
}

Appearance je nejdůležitější vlastnost, které je třeba se zbavit, ať nám to neblbne na telefonech a iOS zařízeních. A pak můžeme úplně v klidu nastavit globální styl pro základní formulářové prvky. Dřív platilo, že hvězdičkový reset na formulářové prvky ne. To už naštěští nějakou dobu nemusíme řešit, takže ušetříme spoustu zbytečností ve stylech.

Nesmíme zapomenout nastavit kompletní vlastnosti fontu. Tohle bohužel mnohé prohlížeče neumí zdědit z body. Stejně tak box-sizing: nemáme-li ho v resetu, je potřeba nastavit pro uvedené elementy. Pro textareu zvedneme výšku a omezíme resize na směr i hodnoty.

body, 
input, 
textarea, 
select, 
button {
	font:400 16px/1.5 Arial,Helvetica,sans-serif;
}

input:not([type="radio"]):not([type="checkbox"]),
select,
textarea {
	display:block;
	color:#000;
	padding:10px 15px;
	height:50px;
	width:100%;
	border:1px solid #e1e1e1;
	/*
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	*/
}

textarea {
	height:200px;
	min-height:100px;
	max-height:1000px;
	resize:vertical;
}

A to je k základním prvkům vše. Všimněte si, že základní pole nemám jako výčet hodnot, ale jako výjimku ze všech. HTML5 nám nabízí mnohem vyšší škálu typů, než jenom [text] a [password]. 

Tlačítko si pak můžeme upravit jakkoli uznáme za vhodné, já ho vykreslím jen jako šedý obdélník. Pod tag <form> ho mám vnořené cíleně, protože grafik nám často naplánuje různě vypadají buttony pro formulář a mimo něj. 

form button, 
form input[type="submit"] {
	cursor:pointer;
	background:#e1e1e1;
	transition:.25s;
	min-width:100px;
	border:0;
	height:50px;
}
form button:hover, 
form input[type="submit"]:hover {
	background:#888;
	color:white;
}

Placeholder

Než nám moderní technologie povolily atribut placeholder, museli jsme výchozí hodnoty složitě měnit JavaScriptem. Nyní je ale vše mnohem jednoduší, snad s výjimkou stylování. Tam malý zádrhel je. Vlastnosti musí být zapsané tak, jak je mám na následující ukázce. Pokud totiž vše zapíšeme za sebe s čárkou, IE Edge nás s tím pošle do háje. Takže pro každý prefix jedna ukončená definice. 

textarea::placeholder,
input::placeholder {color:#e1e1e1;} 

textarea:-ms-input-placeholder,
input:-ms-input-placeholder {color:#e1e1e1;}

input:not([readonly]):not([disabled]):focus,
textarea:not([readonly]):not([disabled]):focus {border-color:#a1a1a1;}

Grafický selecbox

Další problematický prvek je selectbox. V minulosti bylo potřeba na jeho složitější vykreslení povolat JavaScriptovou knihovnu, nyní se však obejdeme bez ní. Pokud ale potřebujeme komplexnější prvky uvnitř drop-down nabídky, čistým stylováním to bohužel nezvládneme. JS knihoven jsem vyzkoušel větší množství, ale nakonec jsem vždy došel k závěru, že je lepší, když si to prostě napíšu sám. Žádná není na 100 % dokonalá. U každé narazíme na nějaké bugy, či události, které neumí. Nejnovější knihovnička mi zabrala asi 3 hodiny, což zhruba odpovídá času, který bych strávil studiem a debugováním nějakého hotového řešení... Často je lepší, když si to člověk napíše sám.

Ale zpět ke stylování klasického selectu. Jediné omezení, které musíme překousnout, je nemožnost upravit samotný drop-down. Jediné, k čemu nás prohlížeče pustí, je velikost písma a barvy. 

Hlavní select se dá ovšem nastylovat se vším všudy, bez jakýchkoli problémů. Pokud stále řešíme IE 11, definici backgroundu je nutné rozepsat, protože IE 11 ji nepochopí, když obsahuje funkci calc(). A já raději použiju calc, než abych naschvál ukládal png obrázek s bílým místem, kvůli marginu.

form select {
	padding-right:50px;
	cursor:pointer;
	background:url(select.png) no-repeat;
	background-position:calc(100% - 15px) 50%;
	background-size:20px auto;
}
form select option {
	font-size:110%;
	color:#013be0;
}
form select option:hover {
	background:#013be0;
	color:white;
}
form select::-ms-expand {
	display:none;
}
form select:focus {
	border-color:#a1a1a1;
	color:black;
	text-shadow:0 0 0 #000;
	font-weight:400;
}

Grafický checkbox a radio

Ani zde není potřeba volat JavaScript a stylovat prvky pomocí nastrčených spanů. Valná většina moderních prohlížečů umí vykreslit základní styly pro checkbox i radio správně, výjimkou budiž jen Internet Explorer 11. Ale ani on není extra pozadu; "škaredě" vykreslí pouze puntík, respektive fajfku při stavu :checked. 

form input[type="radio"],
form input[type="checkbox"] {
	margin:0 15px 0 0;
	font-size:24px;
	width:1em;
	height:1em;
	border:2px solid #e1e1e1;
	border-radius:0;
	display:inline-block;
}
form input[type="checkbox"]:checked {
	border-color:#013be0;
	background:url(checkbox.png) no-repeat 50% 50%/80% auto;
}

form input[type="radio"] {
	border-radius:50%;
	background:url(radio.png) no-repeat -100px 50%/50% auto;
}
form input[type="radio"]:checked {
	border-color:#013be0;
	background-position:50% 50%;
}
form label.radio,
form label.checkbox {
	display:flex;
	align-items:center;
}

Není to vůbec nic složitého: nějaké barvy a obrázky, zarovnání a odsazení, a máme hotovo. Pokud chceme stejně hezké prvky i pro zmiňovaný IE 11, je potřeba přidat pomocné spany, ale i tady se úspěšně vyhneme JS obsluze. Stačí přidat pár CSS definic pro posloupné prvky. To už si ale prohlédněte na přiložené ukázce. 

Závěrem: přístupnost na prvním místě

Na závěr bych ještě rád zmínil jednu věc, kterou vídám v poslední době stále častěji. Mám na mysli různé "cool" efekty, které mají formuláře takříkajíc zkrášlit. Máme label, který je vepsaný přímo přes textové pole a supluje funkci placeholderu. Na focus popisek vyjede nahoru přes definovanou transition. Určitě už jste to někdy viděli. Funkce je to sice pěkná, ale zoufale nepraktická... Problém nastává ve chvíli, kdy nám prohlížeč automaticky jednotlivá pole vyplní. JavaScript totiž neumí univerzálně detekovat tuto událost, a tak se nám může stát, že label je překrytý přes hodnotu v poli. To sice lze vyřešit několika způsoby, ale my bychom si spíš měli položit otázku: proč bych měl tohle vůbec ladit?

Jako uživatel chci formulář přehledný a jednoduchý, jako kodér chci formulář... můžete hádat, jaký. Není formulář v příloze sympatičtější, než nějaká pekelná monstra, co vám třikrát obletí svět, než vás pustí k vyplnění? 

Ukázka: form.html

Pošlu request, dostanu výstup, vepíšu výstup: nejkratší možná cesta, nic víc. Až v závěru článku nastíním, jak by se daná funkcionalita mohla (měla) řešit lépe. Ale věřím, že pro začátek to takhle stačí. 

Co musí být hotové

Abych nemusel rozebírat úplné a naprosté základy, naopak zase předpokládám, že to hlavní už je hotové. Musíme mít výpis článků z databáze. K tomu stránkování. Jak bude vypadat a jak se bude chovat, na tom nezáleží: musí prostě jen fungovat. Také bychom měli mít aspoň minimálně oddělený kontroler od šablony, abychom mohli využít podmíněné tahání jednotlivých bloků stránky. 

Co musíme upravit

V prvé řadě šablonu tak, abychom měli jasně ohraničený cíl, kam se bude vpisovat obsah. Dále kontrolery. Pokud posílám Ajax request na výpis článků, nechci přece zbytečně načítat celé menu nebo novinky někde v pravém sloupci. Přidáme funkci na detekci Ajax requestu, abychom to nemuseli podmiňovat GET proměnnou. (Kterou sice stále využijeme, ale k jinému účelu.) Dále loadovací kolečko: můžeme přidat, nemusíme. Tedy úprava stylů. No a na závěr samozřejmě celá JavaScriptová obsluha. 

Úprava kontrolerů je přímo úměrná složitosti systému, ale tož nemusíme to osekat úplně všechno. Někdy je lepší provést pár operací navíc, než abych podmiňoval každou akci v každém layeru systému, aby pak vznikl nějaký
takovýto kód...

Detekce Ajax requestu

function isAjax() {
	return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && (strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest');
}

Příklad načtení obsahu

Jak vyřešit architekturu systému a routování Ajaxových a běžných requestů, o tom dnešní článek také není. Buď vyřešeno máte, nebo se s tím nebudete trápit. Právě takové řešení uvedu v následujícím příkladu. Jednoduchou podmínkou oddělíme volání funkcí respektive metod, které mají být vykonané. Třeba nějak takhle. Pokud bychom tuto úpravu neprovedli, samotný Ajax pak ztratí tak trochu smysl. 

function loadStuff(){
	
	$ajax = Server::isAjax();
	
	loadArticles();
	loadTagsForArticles();
	
	createPaging();
	getPageTitle();
	
	if(empty($ajax)){
		loadCategoryMenu();
		loadArchiveMenu();
		loadTagCloud();
		
		// ...
	}

	include_once('template.phtml');

}

Šablona

V šabloně potřebujeme vyřešit reálné zobrazení. Určitě je jednodušší dostat celý kód a někam ho fláknout, než parsovat bůhvíjaké pole a někam ho pochybně generovat. Pořád se bavíme o webu náročnosti toho mého, nikoli o komplexní JavaScriptové aplikaci. Takže z šablony vyjmeme části, které se měnit nebudou. Včetně containeru, kam se vloží výsledek requestu. 

<?php
	$ajax = isAjax();
?>
<?php if(empty($ajax)){ ?>
	
	<?php include_once('_header.phtml'); ?>
	
	<div class="article-list">
		<div class="js-ajax-main-container">

<?php } ?>
		
		<?php // foreach co vypise clanky ?>
		
		<?php // strankovani ?>
	
<?php if(empty($ajax)){ ?>	
		
		</div>
		<div class="ajax-loader js-ajax-loader hidden"><div class="circle"></div></div>
	</div>

	<?php include_once('_footer.phtml'); ?>
	
<?php } ?>

Styly

Než se podíváme na nejdůležitější část kódu, JavaScript, sfoukneme ještě styly. Přidáme si loadovací kolečko tak, aby bylo vždy vycentrované ve viditelné oblasti a zároveň překrývalo celý container. Samozřejmě je potřeba, aby náš "js-ajax-main-container" byl obalen ještě jediným divem s relativní pozicí, aby se absolutní chytila správně. Pozici kolečka pak zařídí výška relativně k viewportu a position: sticky.  (Fixní alternativa je fallback pro IE11.) 

.hidden {display:none !important;}

.article-list {position:relative;}

.ajax-loader {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:20000;
}

.ajax-loader .circle {
	position:fixed;
	position:sticky;
	top:0;
	left:0;
	width:100%;
	height:100%;
	max-height:100vh;
	background:rgba(255,255,255,0.75) url(loading.gif) no-repeat 50% 50%/150px auto;
}

JavaScriptová obsluha

A to nejdůležitější na závěr. Kontroler máme upravený, načítá jen nutná data. Šablona zobrazí přesně to, co potřebujeme. Takže teď se jenom napojíme na stránkování a namísto přechodu na cílovou URL provedeme request. Ještě připomenu, že stránkování je také potřeba přepsat po requestu, protože pokud ho například vypisujeme nějak takto: 

 1 ... 7 | 8 | 9 ... 12

samotné přehození active class nestačí. A opět je jednodušší vepsat celý HTML kód, než tuhle hrůzu generovat přes JS. Když už ji umíme vypsat přes PHP. Což také znamená, že po requestu musíme znovu namapovat akce na odkazy. 

var hookActions = function(){
	$('.paging').find('a').on('click touch', function(){
		var url = $(this).attr('href');
		contentRequest(url, false);
		return false;
	});
	
	// plus vse ostatni, co se nejak napojuje na elementy ve vypisu clanku
};

hookActions();

Samotná funkce contentRequest je mega easy. Pošle request, dostane html výstup, přepíše innerHTML a konec. Ale abychom si to udělali víc cool a sexy, provedeme i změnu URL bez jejího znovunačtení. K tomu slouží metoda history.pushState. Takže pokud kliknu např. na stránku 2, stisknu F5, už na ní zůstanu. A nemusím to ohýbat přes kotvy a podmíněné volání funkce. Server prostě vrátí normální output. 

var loader = $('.js-ajax-loader');
var target = $('.js-ajax-main-container');
var currentUrl = window.location.href.split('#')[0];

var contentRequest = function(url, historyMove){
	loader.removeClass('hidden');
	
	var requestUrl = url + (url.indexOf('?')+1 ? '&' : '?') + 'ajax=1';
	
	$.ajax({
		url: requestUrl
		success: function(data){
			target.html(data);
			
			if(!historyMove){
				$('html,body').stop(true,true).animate({ scrollTop: 0 }, 0);
				history.pushState(null, null, url);
			}
			
			currentUrl = url;
			
			hookActions();
			loader.addClass('hidden');
		},
		error: function(){
			window.location.href = url;
		}
	});
};

Jenže když už jednou šáhnu na history.pushState, měl bych vyřešit i nativní funkce prohlížeče zpět a vpřed. Pokud uživatel přijde například z Googlu na druhou, třetí stránku výpisu, párkrát si dole klikne na paging, tlačítko zpět by ho vrátilo zase na Google. Protože reálně se po stránce nepohyboval. Ale to lze vyřešit přidáním jediné události: 

$(window).bind('popstate', function(e){
	var nextUrl = window.location.href.split('#')[0];
	
	if(nextUrl != currentUrl){
		contentRequest(window.location.href, true, true);	
	}
	
	currentUrl = nextUrl;
});

Tady jsem měl trochu problém s odpálením popstate při změně window.location.hash. Přes hash totiž zaměřuji jednotlivé komentáře, a on se na to popstate také chytá. Proto parsování url a jedna malá podmínka: otestuji, jestli se změnila celá adresa nebo jenom kotva. 

V tuto chvíli je vám také určitě jasné, k čemu slouží druhý parametr u funkce contentRequest: jakmile se hýbu v historii, nebudu znovu vyvolávat její změnu, nebo bych se z toho zacyklil. 

A co se vlastně stane při vypnutém JavaScriptu? No přece to samé, co před nasazením Ajaxu. Stránka se načte přes normální request. Na závěr ještě přiložím link na jednotlivé části kódu v samostatných souborech, pokud byste měli zájem si je uložit. 

Lepší řešení

JSON, samozřejmě. Pořád budu vracet celý HTML kód, ale díky poli dostanu možnost měnit třeba titulek. Nebo si do patičky zapsat čas trvání reqeustu. Pro účely vývoje. Ale to už bych nemohl článek oštítkovat jako "Základy", navíc by šlo o příliš individuální úpravy, které těžko zobecním jedním tutoriálem.  

Také bychom mohli přidat rozdílné chování pro telefon: stránkování se nahradí jenom za odkaz "Následující" a funkce obsah přidá, nepřepíše. Ale to už by pro změnu bylo na nový článek. A protože druhý díl už mám nachystaný a chci v něm ukázat funkční miniaplikaci, o mobilním stránkování třeba zase jindy.  

func.php
loadstuff.php
template.php
style.css
main.js

ZIP archív ke stažení

HTML kód

Mějme následující HTML kód. Ten může reprezentovat například výpis produktů na e-shopu, výpis novinek nebo čehokoli jiného. Container obsahuje prvky .item zakončené vyčištěním floatů.

<div class="itemlist">
	<div class="item"></div><div class="item"></div><div class="item"></div>
	<div class="item"></div><div class="item"></div><div class="item"></div>
	<div class="item"></div><div class="item"></div><div class="item"></div>
	<div class="cleaner"></div>
</div>

Nth-child: základ

Pro ty z nás, kteří si v životě nezapamatují, jestli odd nebo even je lichá nebo sudá, existuje velice jednoduchý vzorec. Každý druhý prvek je samozřejmě sudý, při odečtení jedničky od sudého čísla vyjde číslo liché.

.itemlist .item:nth-child(2n) {background:red;}  
.itemlist .item:nth-child(2n-1) {background:blue;}

Rozsah: od začátku po N-tý

Často potřebujeme pár prvních elementů odlišit od těch ostatních. Takto zvýrazníme první 3.

.itemlist .item:nth-child(-n+3) {background:blue;}

Rozsah: od N-tého dál

Pokud potřebujeme opak výše uvedeného, učiníme tak následovně.

.itemlist .item:nth-child(n+4) {background:blue;}

Rozsah: průnik definic

.itemlist .item:nth-child(-n+6):nth-child(n+4) {background:blue;}

Nth-child: kdy to nefunguje

Při použití n-tého potomka je důležité myslet na jednu věc: pseudo-selektor se nevztahuje k CSS třídě, u které je napsán. Takže pokud někam mezi divy vložíme například nějaké <br>, celý princip pořadí prvků se rozbije.

Následující zápisy jsou ekvivalentní:

.itemlist .item:nth-child(2n) {background:blue;}  
.itemlist :nth-child(2n) {background:blue;}

Proč se tedy mnohem častěji setkáme s podobou zápisu na prvním řádku než na druhém? Odpověď je jednoduchá: přece aby bylo jasné, co tím autor myslel. K čemu přesně je definice myšlena. Druhý řádek proto považuji za monstrózní prasárnu.

Nth-of-type

Nth-of-type částečně supluje chování, kterého většinou chceme u podobných výpisů dosáhnout. Na rozdíl od nth-child, která referuje na N-tý prvek DOMu nezávisle na tom, o jaký prvek se jedná, nth-of-type se vztahuje na tagName. Takže když si rozšíříme první příklad o nějaké další prázdné prvky, fungovat to bude.

<div class="itemlist">
	<div class="item"></div><div class="item"></div><div class="item"></div><span></span>
	<div class="item"></div><div class="item"></div><div class="item"></div><span></span>
	<div class="item"></div><div class="item"></div><div class="item"></div><span></span>
	<span class="cleaner"></span>
</div>

Pokud selektor napojíme na .item, zacílí právě divy. Ostatní tagy stejného rodiče ignoruje. Samozřejmě v takovém případě nechceme čistící prvek jako div, nýbrž jako span.

.itemlist .item:nth-of-type(2n) {background:blue;}

Nth-last-of-type

Má stejný princip jako u předchozího selektoru, akorát prvky bereme odzadu. Tady je opravdu nutné dbát na jména tagů, protože zobrazení se pak může různě přeskakovat či neaplikovat vůbec. Jako příklad uvedu HTML kód se spoustou parazitních tagů, kterým zobrazení definovat nechceme.

<div class="itemlist itemlist_6">
	<div class="item"></div><div class="item"></div><div class="item"></div><br>
	<div class="item"></div><div class="item"></div><div class="item"></div><br>
	<div class="item"></div><div class="item"></div><div class="item"></div><br>	
	<span class="cleaner"></span>
</div>

.itemlist .item:nth-of-type(3n+1) {background:blue;}
.itemlist .item:nth-last-of-type(1) {background:red;}
.itemlist .item:nth-last-of-type(2n) {background:green;}

První, čtvrtý a sedmý prvek bude modrý. Poslední bude červený. A každý sudý odzadu zase zelený, což samozřejmě přebije modré pozadí prvku čtvrtého :-)

N-tý prvek v závislosti na rozlišení

Na závěr si dáme trochu responzivity. Produktové výpisy s různým počtem prvků podle rozlišení dnes najdeme na každém druhém webu. Možností nastylování je spousta a já bych na závěr představil jednu z nich, samozřejmě za využití nth-of-type. Abychom nemuseli vše 10x redefinovat, omezíme definice rozlišením.

Nejdřív budou na stránce 4 prvky vedle sebe, pak 3 a na závěr 2. A jako malý bonus obarvíme každý druhý řádek jinou barvou. (Tedy skupinu záznamů na daném řádku.) HTML kód bude opět stejný, jako v první ukázce, akorát tam toho bude trochu víc.

<div class="itemlist">
	<div class="item"></div><div class="item"></div><div class="item"></div>
	<div class="item"></div><div class="item"></div><div class="item"></div>
	<div class="item"></div><div class="item"></div><div class="item"></div>
	<span class="cleaner"></span>
</div>

Každý 4. element bude mít zresetovaný pravý margin, každý 4+1. zresetuje float. Každý 5., 6., 7. a 8. prvek bude zvýrazněný. Skrz omezení na plus a mínus bohužel komplexnější funkci nenapíšeme, a tak je potřeba to takhle vylistovat za sebou.

.itemlist {max-width:900px;margin:0 auto;}
.itemlist .cleaner {clear:both;}
.itemlist .item {width:24.25%;margin:0 1% 10px 0;float:left;height:50px;background:grey;}

@media all and (min-width: 1201px){
	.itemlist .item:nth-of-type(4n) {margin-right:0%;}
	.itemlist .item:nth-of-type(4n+1) {clear:both;}
	
	.itemlist .item:nth-of-type(8n),
	.itemlist .item:nth-of-type(8n-1),
	.itemlist .item:nth-of-type(8n-2),
	.itemlist .item:nth-of-type(8n-3) {
		background:blue;
	}
}

@media all and (min-width: 601px) and (max-width: 1200px){
	.itemlist .item {width:32.666%;}
	.itemlist .item:nth-of-type(3n) {margin-right:0%;}
	.itemlist .item:nth-of-type(3n+1) {clear:both;}
	
	.itemlist .item:nth-of-type(6n),
	.itemlist .item:nth-of-type(6n-1),
	.itemlist .item:nth-of-type(6n-2) {
		background:blue;
	}
}

@media all and (max-width: 600px){
	.itemlist .item {width:49.5%;}
	.itemlist .item:nth-of-type(2n) {margin-right:0%;}
	.itemlist .item:nth-of-type(2n+1) {clear:both;}
	
	.itemlist .item:nth-of-type(4n),
	.itemlist .item:nth-of-type(4n-1) {
		background:blue;
	}
}

Pokud jsme nuceni jednotlivé prvky cílit nějakým šíleným kaskádovým zápisem, lze stejnou definici zapsat i negací bez nutnosti opakovat 4x pod sebou ".itemlist .item". Ale to už trochu zavání výstižným "WTF" (kde počet WTF za minutu je neoficiální ukazatel kvality kódu).

Odkazy na ukázky najdete na konci článku.

html.project-237 body.default-article.has-productlist 
 .container.dark-bg .central-area .itemlist 
 .item:not(:nth-of-type(8n+1)):not(:nth-of-type(8n+2)):not(:nth-of-type(8n+3)):not(:nth-of-type(8n+4)){
	background:blue;
}

Ukázky uvedených řešení

Vše, co jsme v dnešním článku vyzkoušeli, si můžete prohlédnout na následujících odkazech. Druhý příklad pak reaguje na resize okna prohlížeče.

:nth-child, :nth-of-type 1. - 6. příklad
:nth-of-type responzivní ukázka

Statistiky pak slouží k optimalizaci aktivních prvků; můžete ladit jejich pořadí, velikost či umístění na stránce. Zjistíte, jak se lidé na vašem webu chovají a můžete přesunout důležité prvky tak, aby byly v "červených oblastech". Tak jsem začal hledat, co bych mohl vyzkoušet. Po chvíli hledání jsem došel na 4 různé služby, které poskytující heatmapy zdarma. Všechny jsem postupně otestoval a jejich srovnání vám nabídnu v dnešním článku.

1. Heatmap.me

Hned první služba, kterou jsem zkusil, mě příjemně potěšila. Jedná se o nejjednodušší z testovaných nástrojů, přesto plní svou funkci na výbornou. Instalace je vcelku jednoduchá. Vytvoříte si účet, dostanete vygenerovaný kód (oni ho doporučují vložit do hlavičky, ale funguje i konci kódu) a služba se zapne.

V pravé části webu se zobrazí kontrolní panel, na kterém si nastavíte konkrétní stránky, které chcete monitorovat. Můžete jich mít aktivních nejvýš 5. To je asi hlavní nevýhoda... Nešikovné je i samotné zapínání kontrolního panelu: musíte si pamatovat neobvyklou klávesovou zkratku levý alt + shift + H.

Naopak výhodou je, že se nemusíte přihlašovat nikam do žádné externí stránky a heatmapu vidíte přímo vepsanou do webu. Služba běží velice svižně a celkově jsem s ní byl spokojen. Měl jsem trochu pocit, že to měří nějak méně, než by mělo, každopádně to byl asi jen subjektivní dojem. Zpomalení stránek na telefonu jsem nepozoroval.

2. Mouseflow.com

Druhá testovaná služba se pak ukázala jako nejkomplexnější a velice nadupaná. Registrace a aktivace proběhla opět bez problémů, snad jen na přesné umístění měřicího kódu je potřeba dbát: musí být před ukončujícím tagem </body> a nikde jinde.

U Mouseflow jsem byl přímo unesen nahráváním videa: u každého návštěvníka se uloží video jeho přesného pohybu po stránce. Je tam krásně vidět i koncové zařízení; jakým způsobem se mu web zobrazil a vlastně vše, co na stránce prováděl.

Nevýhoda Mouseflow je pak limit 100 nahraných sezení za měsíc u free verze. Což je většinou za den hotovo... Každopádně i 100 návštěv už je slušný statistický údaj, se kterým se dá pracovat. Jako druhou hlavní nevýhodu bych pak uvedl drobné kousání na telefonu. Je sice fajn, že služba mapuje i mobilní uživatele, jenom by to mohla provádět trochu rychleji.

3. PTengine.com

Třetí nástroj mě příliš nepotěšil, proto ani já ho nepotěším ve svém srovnání. Založil jsem účet, přešel k zadání domény a tam jsem také skončil. Mé doménové jméno neprošlo verifikací. Že by mu vadila třetí úroveň? Na tuto otázku jsem odpověď nedostal... V nastavení nešlo nikde dohledat žádnou revalidaci, a tak jsem si pomyslel "máte to rozbitý" a šel jsem zkoušet dál.

Ovšem za pár dnů mi ve schránce přistál e-mail. Pán je prý z PTengine a rád by se se mnou spojil po Skypu, jakože probereme můj business plán nebo co. No milému pánovi jsem odepsal, že na PC nemám mikrofon, takže si moc nepokecáme, ale že bych ocenil krátké vysvětlení, co jsem při registraci udělal špatně. Že mi to nefrčí.

Odpověď samozřejmě žádná, ale po dalších pár dnech služba nejednou fungovat začala... Tak jo no. Každopádně PTengine ne. Máme lepší.

4. Hotjar.com

Posledním testovaným subjektem byl Hotjar.com. Služba je mnohem jednodušší než předchozí Mouseflow, ale zase není nijak omezena. Stovkový limit se zde vztahuje pouze na videa, ale při jeho dosažení stačí uložená videa smazat a jedete nanovo. Měřicí kód stránky nezpomaluje, celkově to běží bez problémů. V administraci jsou také drobné nedostatky s vykreslením stránky, ale i tak... Hotjar je takový rozumný kompromis mezi cenou a výkonem a svůj účel rozhodně splní.

Takže tak. To by bylo ke srovnání asi vše. No nakonec jsem napsal článek mnohem kratší, než jsem původně čekal... Když vezmu v potaz vynaložené úsilí. Ale pár trefných slov je někdy více, než hromada odstavců vaty. Možná ještě jedna drobnost stojí za zmínku a tou je počet informačních emailů: u jednotlivých služeb jsem koukal i na to, jak moc mi spamují schránku. Nejvíc toho posílal asi Hotjar a PTengine... Jasně, ti, kterým to nefunguje, otravují nejvíc. Ale ve chvíli, kdy mám monitorování vypnuté, chodí třeba jeden email za měsíc, což není tak hrozné. Co jsem netestoval, byla technická podpora. Ono vlastně ani nebylo na co se ptát. Tedy jediný PTengine mě ignoroval, ostatní jsem neměl důvod kontaktovat.

Na úplný závěr ještě uvedu pár odkazů z českého internetu. Trochu delší povídání o heatmapách bylo publikováno na serveru Lupa.cz, ovšem většinou se hovoří o nástrojích placených. Což je také důvod, proč nemám ve svém srovnání uvedenou žádnou českou službu: je to všechno placené.

Zajímavé články:

• Heatmap, Hot or Not? Free Alternatives for Crazy Egg
• Teplotní mapy pro web: porovnání nástrojů a k čemu slouží

Řešení je vcelku triviální a sám už jsem ho mnohokrát použil v jiných případech: daný obsah načteme až po zascrollování. Jak vše uvést do praxe vysvětlím právě v dnešním článku.

JavaScript si rozšíříme o jednu funkci. Upravíme i regulární výraz pro náhradu iframu vlastním blokem kódu. Iframe je totiž stylovatelný jako každý jiný prvek a toho využijeme. Opět musím zdůraznit, že by to šlo i jinak, přidáním dalších elementů, ale není to nutné. Můžeme využít to, co máme.

Základem je, aby se jednotlivým iframům vytiskl prázdný atribut "src". Dokud není zdroj, nic se nenačítá. Zdroj si dočasně uložíme do titulku, který potom přes JavaScript vyměníme. Atributy vyměníme ve chvíli, kdy uživatel na video zascrolluje.

1. JavaScript

Funkce je opět trochu zjednodušená: počítáme jen, jak daleko je zascrollováno. Pokud je video na stránce výš, než je spočtená hodnota, proběhne náhrada a jeho načtení. Toto řešení má výhodu v obrovské jednoduchosti, nevýhodu pak v tom, že když na konci stránky stiskneme F5, bude se načítat samozřejmě všechno. Ale o výpočtu viditelného okna z obou stran tento článek není a daná funkce pro svůj účel postačí.

Nesmíme ani zapomenout na její opětovné volání při resizu okna, protože u responzivních webů se hodnoty po resizu mohou (a měly by) změnit.

$.fn.showWhenScrolled=function(){
	var self = this;
	
	this.init = function(){
		self.each(function(){
			var self_top   = $(this).offset().top;
			var scroll_top = $(window).scrollTop();
			var win_height = $(window).height();
			var frame      = $(this).find('iframe');
			if(scroll_top > (self_top - win_height)){
				if(!frame.attr('src')){
					frame.attr({src:frame.attr('title')});
				}
			}
		});
	};
	
	$(window).scroll(function(){
		self.init();
	}).resize(function(){
		self.init();
	});
	
	self.init();
};

$('.youtube-container').showWhenScrolled();

2. CSS

Do stylu přidáme jediný řádek, a to vzhled prázdného rámu.

.youtube-container iframe {background:rgba(0,0,0,0.25) url(youtube-loading.gif) no-repeat 50% 50%;}

3. HTML / PHP

Na závěr musíme upravit i způsobe renderování, aby se mohl atribut "src" rovnou vyměnit s titulkem.

$youtube_replace_pattern = '
	<span class="youtube-container">
		<a href="javascript:;">
			<img src="images/youtube-resizer.png" alt="" class="youtube-resizer" />
			<img src="images/youtube-resizer-tablet.png" alt="" class="youtube-resizer tablet-resizer" />
		</a><iframe $1 src="" title="$2" $3></iframe>
	</span>
';

$article_text = preg_replace('/\<iframe([^>]+)src="([^"]*)"([^>]+)><\/iframe>/', $youtube_replace_pattern, $article_text);

Ukázka v praxi

Jako ukázku jsem si připravil část jednoho ze svých článků. Zkuste si různě refreshovat, resizovat, scrollovat a uvidíte, jakým způsobem to všechno pracuje.

YouTube progressive load ukázka
YouTube progressive load ke stažení

Teoreticky půjde následující postup: iframe obalíme elementem, který dostane na pozadí náhledový obrázek. V něm se podle rozlišení zobrazí buď iframe nebo externím odkaz. Background-image containeru se taktéž zapne až při určitém rozlišení a/nebo zařízení.

Celá konstrukce bude mít ještě pár prvků navíc, aby nám objekt hezky držel rozměry, plus abychom měli kam dát ikonku symbolizující play. Držení poměru přes pomocné obrázky je jenom jedno z možných řešení, lze použít i jiné, akorát já si tento způsob oblíbil. Pro telefon bude box zobrazen v poměru 3:2, pro tablet potom 3:1, aby byl obrázek širší a nezabíral zbytečně moc místa.

Zdroj

Níže máme příklad videa tak, jak bude vložené ve stránce.

<iframe width="420" height="315" src="//www.youtube.com/embed/uZtnaQm9xnk" frameborder="0" allowfullscreen></iframe>

HTML / PHP

Zdroj musíme překonvertovat do následující podoby. Tento kód můžeme buď vkládat přímo do článku nebo si ho až na výstupu přeformátovat. Toho docílíme velice snadno regulárním výrazem. Správně by měl být ještě trochu více konkrétní, ale pokud každý iframe v jakémkoli článku bude pouze YouTube, zápis musí stačit.

$youtube_replace_pattern = '
	<span class="youtube-container">
		<a href="javascript:;">
			<img src="images/youtube-resizer.png" alt="" class="youtube-resizer" />
			<img src="images/youtube-resizer-tablet.png" alt="" class="youtube-resizer tablet-resizer" />
		</a><iframe $1></iframe>
	</span>
';

Regulární výraz

Před náhradou ještě proženeme text článku funkcí strpos, abychom na to zbytečně nepouštěli preg_replace a tím nezpomalovali renderování stránky.

if(strpos($article_text,'<iframe') !== false){
	$article_text = preg_replace('/<iframe([^>]+)><\/iframe>/', $youtube_replace_pattern, $article_text);
}

CSS

Dále musíme celý objekt řádně nastylovat. Container bude mít na pozadí právě získaný obrázek, pro rozlišení nad 641 pixelů vypnutý. Element odkazu pak piktogram pro přehrání, resizovací obrázek bude nastavený na 100% šířky. Nesmíme zapomenout ani na max-width u iframu.

Rozlišením pod 640 pixelů cílím telefony a úzká okna na desktopu. Pro tablety musíme styly trošičku ohnout, protože ty se rozlišením cílí docela špatně... Tablet určíme podle CSS třídy na <body>, takže jenom zopakujeme blok stylů pro telefon. Na dotykovém zařízení totiž chceme chování stejné.

Těch možností detekce a zápisu stylů je opět víc, já si zvykl na tento způsob. A jak dostat třídu "tablet" na <body> si ukážeme v jednom z dalších článků.

.youtube-container {display:block;position:relative;background:transparent none no-repeat 50% 50%;
	background-size:cover;-webkit-background-size:cover;
}
.youtube-container > a {display:none;background:url(youtube-play.png) no-repeat 50% 50%;
	background-size:15% auto;-webkit-background-size:15% auto;
}
.youtube-container > a > img.youtube-resizer {display:none;margin:0;width:100%;max-width:100%;height:auto;position:relative;z-index:100;}
.youtube-container > iframe {display:block;max-width:100%;}

@media all and (min-width: 641px){
	body:not(.tablet) .youtube-container {background-image:none !important;}
}

@media all and (max-width: 640px){
	.youtube-container {background-color:rgba(0,0,0,0.5);}
	.youtube-container > a {display:block;}
	.youtube-container > a > img.youtube-resizer {display:block;}
	.youtube-container > a > img.youtube-resizer.tablet-resizer {display:none;}
	.youtube-container > iframe {display:none;}
}

.tablet .youtube-container {background-color:rgba(0,0,0,0.5);}
.tablet .youtube-container > a {display:block;}
.tablet .youtube-container > a > img.youtube-resizer {display:none;}
.tablet .youtube-container > a > img.youtube-resizer.tablet-resizer {display:block;}
.tablet .youtube-container > iframe {display:none;}

JavaScript

Na závěr potřebujeme ještě trochu JavaScriptu. Ten právě načte náhledový obrázek a také podle vzoru nastaví externí odkaz na video.

$.fn.youTubeImage = function(){
	this.each(function(){
		var src = $(this).find('iframe').attr('src');
		var arr = src.split('/');
		
		if(arr.length){
			var id = arr[arr.length-1].replace(/^(.*)\?(.*)$/, '$1');
			var image = 'http://img.youtube.com/vi/' + id + '/0.jpg';
			$(this).css({backgroundImage:'url(' + image + ')'});
		}
		
		var href = 'https://www.youtube.com/watch?v=' + id;
		$(this).find('a').attr({href:href,target:'_blank'});
	});
};

$('.youtube-container').youTubeImage();

Ukázka v praxi

Pro potřeby článku jsem si nachystal malou ukázku, kde se můžete podívat, jak se video změní v odkaz a naopak. Stačí hýbat s šířkou prohlížeče.

YouTube responsive iframe ukázka
YouTube responsive iframe ke stažení

Každé video má 4 vygenerované náhledy očíslované od nuly do tří. Nultý náhled je vždy velký, 1-3 jsou malé.

http://img.youtube.com/vi/{ID VIDEA}/0.jpg
http://img.youtube.com/vi/{ID VIDEA}/1.jpg
http://img.youtube.com/vi/{ID VIDEA}/2.jpg
http://img.youtube.com/vi/{ID VIDEA}/3.jpg

Pokud si nejste jisti IDčkem videa, jen připomenu, že je obsaženo jak ve skutečné adrese, tak v odkazu na iframe.

https://www.youtube.com/watch?v=0dFz10R529g

YouTube ještě nabízí další volby náhledů různých kvalit, ovšem málo kdo tam ty obrázky fyzicky nahrává. Zpravidla se jedná o kopii některého z výše uvedených, takže si většinou musíme vystačit s hlavní miniaturou. Pro úplnost ale uvedu možnosti. (Poslední dvě pak nemusí existovat.)

// výchozí
http://img.youtube.com/vi/{ID VIDEA}/default.jpg

// vysoká kvalita
http://img.youtube.com/vi/{ID VIDEA}/hqdefault.jpg

// střední kvalita
http://img.youtube.com/vi/{ID VIDEA}/mqdefault.jpg

// standardní kvalita
http://img.youtube.com/vi/{ID VIDEA}/sddefault.jpg

// maximální možné rozlišení
http://img.youtube.com/vi/{ID VIDEA}/maxresdefault.jpg

Nejčastěji tedy využijeme náhled 0. Jinak podrobnější popis jednotlivých thumbnailů si můžete přečíst v původním článku na Stackoverflow v angličtině.

Tak. A máme libovolnou verzi náhledu. Využití v praxi ukážu v dalším článku.