joerghuelsermann.de Dynamische Buttons einbinden

Dynamische Buttons einbinden

Im Prinzip kann man dynamische Bilder sogenannte Buttons ohne einen weiteren DNS Lookup auf jeder Webseite mit Hilfe von PHP einbinden. Die Geschwindigkeit von Webseiten gewinnt immer mehr an Bedeutung und solche dynamisch erzeugte Buttons sind eher negativ zu bewerten wenn man diese von externen Quellen aufruft. Dadurch das sich ein solcher Button jederzeit verändern kann ist natürlich der einfachste Weg diese Bilddateien als Datei einzubinden.

Nachteile von einem extern eingebundenen dynamischen Bild

Folgende Nachteile besitzt ein dynamischer Button.

Einbinden des externen Button mit dem img Element

Der klassische Weg einen Button per HTML über das img Element einzubinden dürfte zwar hinreichend bekannt sein und ich erwähne ihn der Vollständigkeit halber einfach nochmal als Beispiel.

<img src="http://example.com/bild.png" alt="Bild" />

Mehrere PHP Skripte

Es gibt mehrere Möglichkeiten mit PHP Code solche Bilder aufzurufen. Eine der einfacheren Möglichkeiten setzt vorraus das allow_url_fopen aktiviert ist.

Aktiviertes allow_url_fopen

Ob das Bild nun als GIF, JPEG oder PNG Datei vorliegt, die Image Funktinen in PHP bieten für jedes der drei Dateiformate eine Möglichkeit einen Button von einer externen Quelle aufzurufen. Der folgende Dreizeiler macht es schon möglich und geht davon aus das eine Datei im PNG Bildformat vorliegt.

$bild = imagecreatefrompng('http://example.com/bild.png');
imagepng($bild,'button.png');
imagedestroy($bild);

cURL Modul

Hat man dagegen die cURL Funktion zur Verfügung kann man einen ganz anderen Weg gehen.

In diesen Beispiel wird der dynamische Button abgerufen, wenn die Datei die gespeichert auf dem eigenen Server liegt älter als 24 Stunden ist. Wenn die externe Quelle zu diesem Zeitpunkt verfügbar ist wird die Bilddatei erneuert. Man könnte auch mehrere solcher Buttons die sich verändern zu einem Bild zusammenfügen und dann als Imagemap verwenden.

error_reporting(E_ALL);
if (filemtime('button.png') <= time()-24*60*60) {
$url = 'http://example.com/bild.png';
$curl = curl_init();
curl_setopt($curl,CURLOPT_URL,$url);
curl_setopt($curl,CURLOPT_RETURNTRANSFER,True);
curl_setopt($curl,CURLINFO_HEADER_OUT,True);
curl_setopt($curl,CURLOPT_ENCODING,"");
curl_setopt($curl,CURLOPT_USERAGENT,$_SERVER['HTTP_USER_AGENT']);
$code = curl_exec($curl);
$contenttype = curl_getinfo($curl,CURLINFO_CONTENT_TYPE);
$httpcode = curl_getinfo($curl,CURLINFO_HTTP_CODE);
curl_close($curl);
if($httpcode == 200) {
$bild = imagecreatefromstring($code);
imagepng($bild,'button.png');
imagedestroy($bild); }
}

Bei dieser Alternative bewirkt der PHP Code das die Bildquelle als Dataurl oder auch als Inline Image bezeichnet erstellt wird. Dadurch kann man dann die Anzahl der Requests die eingebunden werden deutlich reduzieren. Mehrere auf dieses Weise umgewandelten Bilder kann man dann alternativ auch in einer CSS oder SVG Datei einbinden.

$url = 'http://example.com/bild.png';
$curl = curl_init();
curl_setopt($curl,CURLOPT_URL,$url);
curl_setopt($curl,CURLOPT_RETURNTRANSFER,True);
curl_setopt($curl,CURLINFO_HEADER_OUT,True);
curl_setopt($curl,CURLOPT_ENCODING,"");
curl_setopt($curl,CURLOPT_USERAGENT,$_SERVER['HTTP_USER_AGENT']);
$code = curl_exec($curl);
$contenttype = curl_getinfo($curl,CURLINFO_CONTENT_TYPE);
$httpcode = curl_getinfo($curl,CURLINFO_HTTP_CODE);
curl_close($curl);
$bild = 'data:image/png;base64,'.base64_encode($code);
echo '<img src="'.$bild.'" alt="Bild" width="150" height="150" />';