l'aggiunta automatica di larghezza e altezza attributi per tag con una funzione PHP

Question

Quello che voglio è una funzione che può essere eseguito su input dell'utente che troverà modo intelligente e aggiungere il width e height attributi a qualsiasi tag <img> in un blob di HTML in modo da questioni di pagina-reflow evitare mentre le immagini di carico.

Sto scrivendo la sceneggiatura di registrazione per un forum di PHP, in cui l'ingresso di un utente è sterilizzata e in generale ha reso più bello prima di scrivere al database per la visualizzazione successiva. Per fare un esempio di quello che faccio per rendere le cose più bello, ho uno script che inserisce alt attributi in immagini in questo modo:

Here are two images: <img src="http://example.com/image.png"> <img src="http://example.com/image2.png">

che, dopo la sanificazione dallo script di distacco, diventa

Here are two images: <img src="http://example.com/image.png" alt="Posted image"> <img src="http://example.com/image2.png" alt="Posted image">

(Questo rende convalidare in HTML 4 severo, ma forse non è nello spirito degli attributi alt-ahimè!)

Quindi, per la mia funzione, ho una vaga idea che il server necessario eseguire getimagesize() su ogni immagine esterna che trova nel blocco di codice HTML, quindi applicare gli attributi che funzione genera ad ogni tag <img> si corre in . Presumo che questa funzione è stata scritta prima, ma non ho avuto fortuna su Google o di php.net docs. Devo ripartire da zero, o è qualcuno a conoscenza di una (relativamente) la funzione robusto che posso usare o adattarsi a fare questo lavoro?

Answer 1

Hai ragione su getimagesize(). Si può semplicemente fare qualcosa di simile:

$img = 'image2.png';
$info = getimagesize($img);
printf('<img src="%s" %s>', $img, $info[3]);

Se l'immagine è ospitata in una posizione remota, dovrete scaricare tutte le immagini anche se (la funzione si prende cura di esso), così si potrebbe desiderare di memorizzare nella cache il risultato di accelerare le cose durante le richieste successive.

Modifica appena visto che si dispone di una stringa che contiene vari elementi <img>. Questo dovrebbe fare il trucco:

<?php
$html = <<<EOF
something <img src="https://www.google.com/images/logos/ssl_logo_lg.gif"> hello <img src="https://mail.google.com/mail/images/2/5/logo1.png">
EOF;

$dom = new DOMDocument();
$dom->loadHTML($html);

foreach ($dom->getElementsByTagName('img') as $img) {
    list($width, $height) = getimagesize($img->getAttribute('src'));
    $img->setAttribute('width', $width);
    $img->setAttribute('height', $height);
}

$xpath = new DOMXpath($dom);
$newDom = new DOMDocument();
foreach ($xpath->query('//body/p')->item(0)->childNodes as $node) {
    $newDom->appendChild($newDom->importNode($node, true));
}

$newHtml = $newDom->saveHTML();
?>

Answer 2

Il problema è che si sta richiedendo al server di fare un sacco di lavoro davanti. Ho il sospetto che sarebbe molto più efficiente per popolare un database di dimensioni non in linea (o mantenere una cache di dimensioni).

E dopo aver fatto questo, si potrebbe spingere il lavoro fuori al browser utilizzando un javascript in cache che imposta le dimensioni delle immagini e si chiama in linea alla fine del html (che ha il vantaggio della non c'è bisogno di spingere tutto il codice HTML attraverso di voi codice PHP per la riscrittura). Suggerimento: Scorrere document.images []

HTH

C.

Answer 3

è possibile utilizzare getimagesize (), ma sarebbe intelligente per memorizzare queste informazioni una volta e riutilizzarlo, o per lo meno la cache in modo aggressivo (come è improbabile che cambi spesso) o il server striscerà una battuta d'arresto con carico superiore