Fotogalerie v PHP

Jistě jste se dostali již do situace, kdy potřebujete na svých stránkách umožnit návštěvníkovi prohlédnout si vaše fotky, ale dávat je do jednotlivých stránek ručně je buď nepraktické, nebo příliš náročné. Hodit by se mohla automaticky generovaná fotogalerie.

V prvním díle vytvoříme stránku, která dokáže zobrazit obsah složky. Protože se chceme ve svém kódu vyznat, budeme používat téměř na vše funkce. První bude pro zobrazení obsahu složky.

Tato funkce vám vypíše vše, co se ve složce nachází. Nejdříve si tedy předveďme ten nejjednodušší kód a pak si ho upravíme, aby dělal přesně to, co potřebujeme.

<?php
function ObsahSlozky($slozka) {
	$obsah = scandir($slozka);
	foreach($obsah as $soubor) {
		print $soubor.'<br>';
	}
	return True;
}
?>

Opravdu jednoduchá funkce, která vám pouze vypíše obsah složky. Funkci můžeme jednoduše zavolat příkazem:

ObsahSlozky('cesta/ke/slozce/s/fotografiemi/');

Druhý řádek s funkcí scandir nám do proměnné vloží pole se všemi soubory a složkami, toto pole pak příkazem foreach procházíme a vypisujeme všechny soubory.

Dalším krokem je rozlišit složky od souborů a soubory s obrázky od jiných souborů. Také je zbytečné vypisovat tečku, dvojitá se bude hodit pro přechod do vyšší složky. Po ošetření bude funkce vypadat takto:

<?php
function ObsahSlozky($slozka) {
	$obsah = scandir($slozka);
	foreach($obsah as $soubor) {
		if($soubor != "."){
			if(is_dir($slozka."/".$soubor)) {
				ZobrazNahled($soubor, $slozka, "slozka");
			} else {
				if(@getimagesize($cesta."/".$soubor)) {
					ZobrazNahled($soubor, $slozka, "obrazek");
				} else {
					ZobrazNahled($soubor, $slozka, "soubor");
				}
			}
		}
	}
	return True;
}
?>

Nejdříve jsme do funkce přidali rozpoznání složky od souboru pomocí funkce is_dir. Samozřejmě by šlo systém obrátit – zjistit, zda je položka v poli soubor pomocí funkce is_file. Další úpravou bylo vložení podmínky se zavoláním funkce getimagesize. Pokud je soubor obrázkem, vrátí nenulovou hodnotu s polem o jeho rozměrech, v opačném případě vrátí nulovou hodnotu.

Dalším naším úkolem je dodat naší funkci formu. Abychom však udrželi v kódu přehlednost, nebudeme vše sumírovat do jedné funkce a vytvoříme další funkci na přehledné vykreslení všech souborů. Zde trochu sáhneme i do CSS. Připravíme si dva obrázky o velikosti 100×75 px (poměr 4:3, stejný jako u většiny fotografií), první pro zobrazení složky, druhý pro soubor, který není obrázkem.

function ZobrazNahled($soubor, $cesta, $typ) {
	echo "<div style='border: 1px solid black; margin: 10px; float: left; text-align: center;'>";
	echo "<div style='width: 100px; height: 75px; padding: 5px;'>";
	
	if($typ == "slozka") {
		echo "<img src='slozka.png' alt='' title=''>";
	} else if($typ == "soubor") {
		echo "<img src='soubor.png' alt='' title=''>";
	} else {
		echo "<img src='".$_SESSION["slozka"]."/".$soubor."' alt='' title='' width=100>";
	}
	
	echo "</div>";
	echo "<div style='width:110px; background: #000; color: #FFF; text-align: center;' title='".$soubor."'>".substr($soubor, 0, 10)."</div>";
	echo "</div>";
}

Funkce, která v podstatě jenom zařídí, aby se vykreslil náhled obrázku, obrázek složky nebo souboru. Tato funkce však nebude fungovat stoprocentně. Pokud bude obrázek širší nežli vyšší, bude vše fungovat správně, v opačném případě ale rozhodí rozvržení stránky. Vytvoříme tedy funkci, která zajistí, aby byla vždy výška menší než 75 px a šířka menší než 100 px, přičemž poměr musí zůstat zachován. Protože se nám ale tato funkce bude ještě hodit, nestanovíme maximální výšku a šířku napevno, ale vždy si je vyžádáme.

function Zmensi($vyska, $sirka, $x, $y) {
	if($vyska > $x) {
		$zmenseno = $x / $vyska;
		$vyska = $x;
		$sirka = $sirka*$zmenseno;
	}

	if($sirka > $y) {
		$zmenseno = $y / $sirka;
		$sirka = $y;
		$vyska = $vyska*$zmenseno;
	}

	$ret = array($vyska, $sirka);
	return $ret;
}

Touto matematickou funkcí úspěšně zjistíme nové rozměry obrázku, které nyní stačí aplikovat do předchozí funkce (kód o kus níže). Není to úplně přesně vytváření náhledu, spíše zmenšeniny původního obrázku. O tom, jak vytvořit plnohodnotné náhledy (se zmenšením velikosti), si povíme v dalším díle. Zobrazení popisku je zkráceno funkcí substr, druhé číslo udává počet zobrazených znaků. Pokud by nebyla nastavena maximální délka, mohl by se design při dlouhém názvu rozhodit. To je první část vašeho domácího úkolu – vytvořit funkci, která by kontrolovala délku názvů a příliš dlouhé názvy by zkracovala co nejchytřeji. Za zkrácený název může přidat třeba tři tečky.

Teď už stačí začlenit použití této funkce do funkce ObsahSlozky().

function ObsahSlozky($slozka) {
	$obsah = scandir($slozka);
	foreach($obsah as $soubor) {
		if($soubor != "."){
			if(is_dir($slozka."/".$soubor)) {
				ZobrazNahled($soubor, $slozka, "slozka");
			} else {
				if(@getimagesize($cesta."/".$soubor)) {
					ZobrazNahled($soubor, $slozka, "obrazek");
				} else {
					ZobrazNahled($soubor, $slozka, "soubor");
				}
			}
		}
	}
	echo "<hr style='display:none; clear: both;'>";
	return True;
}

Tím je náš první skript na zobrazení obsahu složky hotov. V příštím díle přidáme možnost procházení podsložkami.

Ukázka celého okomentovaného kódu pro kontrolu:

<?php
function ObsahSlozky($slozka) {
	#
	# funkce pro vypsani obsahu slozky
	# a nasledne zavolani prilehlych funkci
	#

	// nacteni obsahu slozky do pole
	$obsah = scandir($slozka);
	// prochazeni polem obsah
	foreach($obsah as $soubor) {
		// pokud soubor neni .
		if($soubor != "."){
			// pokud je soubor slozkou
			if(is_dir($slozka."/".$soubor)) {
				// zavolani funkce pro ikonku slozky
				ZobrazNahled($soubor, $slozka, "slozka");
			} else {
				// pokud je soubor obrazkem
				if(@getimagesize($slozka."/".$soubor)) {
					// zavolani funkce pro zobrazeni zmenseniny obrazku
					ZobrazNahled($soubor, $slozka, "obrazek");
				// pokud soubor neni obrazkem
				} else {
					// zavolani funkce pro zobrazeni ikonky neznameho souboru
					ZobrazNahled($soubor, $slozka, "soubor");
				}
			}
		}
	}
	// vypsani cistice
	echo "<hr style='visibility: hidden; clear: both;'>";
	// vraceni informace o uspesnem provedeni funkce
	return True;
}

function Zmensi($vyska, $sirka, $x, $y) {
	#
	# funkce, ktera zmensuje rozmery tak aby byl mezi sirkou a vyskou
	# zachovan pomer.
	#

	if($vyska > $x) {
		$zmenseno = $x / $vyska;
		$vyska = $x;
		$sirka = $sirka*$zmenseno;
	}

	if($sirka > $y) {
		$zmenseno = $y / $sirka;
		$sirka = $y;
		$vyska = $vyska*$zmenseno;
	}

	$ret = array($vyska, $sirka);
	return $ret;
}

function ZobrazNahled($soubor, $cesta, $typ) {
	#
	# funkce, ktera zobrazi zmenseninu obrazku, slozky nebo souboru
	#

	echo "<div style='border: 1px solid black; margin: 10px; float: left; text-align: center;'>";
	echo "<div style='width: 100px; height: 75px; padding: 5px;'>";

	// pokud chceme zobrazit ikonku slozky
	if($typ == "slozka") {
		// zobrazeni obrazku
		echo "<img src='slozka.png' alt='' title=''>";
	// pokud chceme zobrazit ikonku souboru, ktery neni obrazkem
	} else if($typ == "soubor") {
		// zobrazeni ikonky a odkazu
		echo "<img src='soubor.png' alt='' title=''>";

	// pokud chceme zobrazit nahled obrazku
	} else {
		// zjisteni rozmeru obrazku
		$rozmery = getimagesize($cesta."/".$soubor);

		$vyska = $rozmery[1];
		$sirka = $rozmery[0];

		// zavolani funkce pro zmenseni rozmeru
		$rozmery = Zmensi($vyska, $sirka, 75, 100);

		// nastaveni novych rozmeru
		$vyska = $rozmery[0];
		$sirka = $rozmery[1];

		// vykresleni nahledu
		echo "<img src='".$_SESSION["slozka"]."/".$soubor."' alt='' title='' style='border:0;' width=".$sirka." height=".$vyska.">";
	}

	echo "</div>";

	// zobrazeni popisku
	echo "<div style='width:110px; background: #000; color: #FFF; text-align: center;' title='".$soubor."'>".substr($soubor, 0, 10)."</div>";

	echo "</div>";
}

session_start();
ObsahSlozky(".");
?>

Fotogalerie v PHP - 1. díl

Vychází Game Ready ovladače pro Far Cry 5
Celá zprávička