Die PHP Programmierung kann auf sehr vielen Art und Weisen in der Optimierung der HTML Programmierung eingesetzt werden. Das beinhaltet die Automatisierung von HTML Routinen, die sich immer wieder wiederholen und eine aufwändige Schreibweise mit sich bringen. Die Erstellung von korrekten und W3C-konformen <img> Tags erfordert das Ausfüllen von mehreren Attributen dieses Tags, was man auch gerne vergisst, da die Browser die Bilder nur mit dem source (src) Attribut auskommen und das Bild korrekt darstellen. Jedoch gibt es ein Paar Probleme, die man durch die Automatisierung der Erstellung von <img> Tags vermeiden kann:
1. Wenn ein Bild verlinkt wird, wird automatisch einen Rahmen erstellt – wenn das Bild ohne den Attribut style=”border: 0px”; erstellt wird, macht der Browser automatisch einen Rahmen um das Bild, um zu zeigen, dass man darauf klicken kann.
2. Wenn man keine genauen Maße angibt, wird das Bild beim Aufrufen der Seite erstmal auf der Breite des alternativen Textes gespannt – da der Browser beim Laden des Bildes nicht weiß, wie breit und hoch es ist, muss das Bild erstmal geladen werden und dann analysiert werden. Bis das erfolgt, wird der Platzhaltern vom Bild automatisch auf die Breite des angegebenen Alternativtextes gespannt, was mit vielen Bildern eine deutliche Unruhe beim Laden der Seite bereitet.
3. Der alternativ Text wird nur angezeigt, wenn das “title” Attribut benutzt wird.
Wir präsentieren an der Stelle eine PHP Funktion, die <img > Tags mit den entsprechenden Attributen je nach Aufruf in HTML generiert.
function CreateImage($sSrc="", $sAlt="", $sStyle="", $sId="") {
if(is_file($sSrc)){
$arImageInformation = getimagesize($sSrc);
$nImageWidth = $arImageInformation[0];
$nImageHeight = $arImageInformation[1];
$PrintId="";
if ($sAlt!="" && $sId!="") $PrintId = ' id="'.$sId.'"';
if(!strstr($sStyle, "width") && !strstr($sStyle, "height") && $sStyle!= ""){
$sImageInfo = 'style="width: '.$arImageInformation[0].'px; height: '.$arImageInformation[1].'px;'.$sStyle.'"';
}
elseif(!strstr($sStyle, "width") && !strstr($sStyle, "height") && $sStyle== ""){
$sImageInfo = 'style="width: '.$arImageInformation[0].'px; height: '.$arImageInformation[1].'px; border: 0px;"';
}
else {
$sImageInfo = 'style="'.$sStyle.'"';
}
$sImage = '<img src="'.$sSrc.'" '.$sImageInfo.' alt="'.$sAlt.'" title="'.$sAlt.'" '.$PrintId.'/>';
return $sImage;
}else{
return "Pfad ".$sSrc. " not correct";
}
}
Was macht die PHP Funktion und welche Parameter übernimmt sie?
1. Funktion – es wird zunächst geprüft, ob der angegebene Pfad zum Bild (übers src Attribut) existiert. Wenn nicht, wird einfach ein Text mit dem Falschen Pfad zurückgegeben. Wenn der Pfad existiert, werden die Maße des Bildes mittels der Funktion getimagesize ausgelesen. Dann wird das style Attribut, das alle nicht mehr als einzelne Attribute zu nutzende Attribute vereiningt, generiert. Das entspricht auch die W3C Richtlinien. In das style Attribut werden width, height, (die automatisiert ermittelt werden) border und weitere durch den User anzugebenden Eigenschaften reingeschrieben. Je nach dem, ob der User die Eigenschaften selber angibt, wird die border Eigenschaft automatisiert dazu geschrieben. Eventuellen id und alt werden ergänzt, wobei der title Tag wird automatisch wie der alt hinzugefügt. Das stellt sicher, dass der Besucher immer den alternativ Text wahrnehmen kann.
2. Parameter
- $sSrc – der Pfad zum Bild
- $sAlt – der alternativ Text des Bildes – hierüber kann man über PHP automatisiert Texte nutzen, die für die gesamte Seite relevant sind.
- $sStyle – die durch den User definierten Style-eigenschaften wie width, height, border, margin etc.
- $sId – die ID vom Bild, falls es durch Javascript Funktionen manipuliert werden wird.
Diese Funktion stellt eine konforme Art der Schreibweise von den <img /> Tags dar und erlaubt das Vermeiden der kleinen Fehler bei der täglichen Programmierung mit HTML. Sie lässt sich mit weiteren Parameter beliebig erweitern, es lässt sich beispielsweise die URL per Parameter übergeben, wohin das Bild verlinken soll.
