Doplnění rozměrů obrázků

Školení, která pořádám

Pokud HTML dokument obsahuje obrázky, je důležité, aby pomocí atributů width a height byly uvedené jejich rozměry. Důvod je ten, že když prohlížeč HTML dokument stahuje, může ho průběžně zobrazovat ještě před tím, než se dostane ke stažení obrázků. Pokud rozměry obrázků uvedené nejsou, tak neví, kolik pro ně má vyhradit místa, takže při jejich stahování dochází k poskakování obsahu stránky. Rozměry je vhodné uvádět v souladu se skutečnou velikostí obrázku, jinak utrpí kvalita nebo rychlost stahování. V PHP slouží ke zjištění rozměrů obrázku funkce getimagesize.

Pokud vypisujete obrázky PHP kódem (např. v galerii), je vhodné tuto funkci používat. Pokud máte HTML soubor s obrázky bez uvedených rozměrů, možná oceníte následující skript:

<?php
if ($argc != 2 || !file_exists($argv[1])) {
    echo "Účel: doplnění rozměrů obrázků a alt popisků ke značkám <img>\n";
    echo "Použití: php htmlimgs.php soubor.html\n";
    exit;
}

/** Doplnění rozměrů obrázků
* @param array array(0 => značka obrázku až do >)
* @return string značka doplněná o atributy width, height a alt
* @copyright Jakub Vrána, https://php.vrana.cz/
*/
function add_sizes($matches) {
    $return = rtrim($matches[0], ' /');
    $append = substr($matches[0], strlen($return));
    $has_width = preg_match('~\\swidth=~i', $matches[0]);
    $has_height = preg_match('~\\sheight=~i', $matches[0]);
    if ((!$has_width || !$has_height) && preg_match('~\\ssrc=(?:"([^"]*)"|\'([^\']*)\'|([^\\s]*))~i', $matches[0], $match) && ($imagesize = @getimagesize("$match[1]$match[2]$match[3]"))) {
        $return .= ($has_width ? '' : ' width="' . $imagesize[0] . '"');
        $return .= ($has_height ? '' : ' height="' . $imagesize[1] . '"');
    }
    if (!preg_match('~\\salt=~i', $matches[0])) {
        $return .= ' alt=""';
    }
    return $return . $append;
}

$file = file_get_contents($argv[1]);
$cwd = getcwd();
chdir(dirname($argv[1])); // soubor může obsahovat relativní cesty
$file_new = preg_replace_callback('~<img\\s[^>]+~i', 'add_sizes', $file);
chdir($cwd);
if ($file != $file_new) { // zapisuje se jen v případě změny
    $fp = fopen($argv[1], "wb");
    fwrite($fp, $file_new);
    fclose($fp);
}
?>

Skript se spouští z příkazové řádky a je schopen ošetřit lokální i vzdálené obrázky. Výhodně je použita funkce preg_replace_callback, která v dokumentu najde všechny značky <img>. Představa řešení některých problémů bez této funkce (a její sestřičky preg_match_all) mě poněkud děsí.

Jakub Vrána, Řešení problému, 29.7.2005, diskuse: 7 (nové: 0)

Diskuse

rony:

mozno je este vhodnejsie doplnat tie rozmery v ramci CSS: style="width:<n>;height:<n>"
v pripadoch, ze chcem mat kod striktnejsi.

skript je dobry napad, moze byt prijemnou sucastou CMS systemov a inych generatorov obsahu.

ikona Jakub Vrána OpenID:

Nevím, čemu říkáš "striktnější kód", ale atributy width a height jsou u značky <img> v XHTML 1.0 Strict povolené.

ikona dgx:

patrně dle budovatelského hesla: "Plníme validitu na 120%"

Risky:

Hehe někteří lidi to s tou validitou přehání natolik, že už se v tom asi neorientují ;)

ikona Petr Vaclavek:

No mozna by stalo za to uvest, jak se ten skript z prikazoveho radku spusti... vetsina lidi to odpali entrem a zobrazi se jim v prohlizeci akorat prazdna stranka...

ikona Jakub Vrána OpenID:

Pokud máš na mysli ošetření této situace rovnou ve skriptu, tak by někomu možná stálo za to pro tento případ vytvořit i speciální rozhraní. V textu článku to uvedené je.

ikona Petr Vaclavek:

Aha uz to vidim, neni to v textu clanku, ale primo ve zdrojaku...

Diskuse je zrušena z důvodu spamu.

avatar © 2005-2024 Jakub Vrána. Publikované texty můžete přetiskovat pouze se svolením autora. Ukázky kódu smíte používat s uvedením autora a URL tohoto webu bez dalších omezení Creative Commons. Můžeme si tykat. Skripty předpokládají nastavení: magic_quotes_gpc=Off, magic_quotes_runtime=Off, error_reporting=E_ALL & ~E_NOTICE a očekávají předchozí zavolání mysql_set_charset. Skripty by měly být funkční v PHP >= 4.3 a PHP >= 5.0.