Bilder einfügen ist vor allem seit Processwire 2.5.19 wunderbar einfach, man kann standardmässig Bilder schon zuschneiden und in verschiedenen Größen abspeichern und mit dem Modul Cropimage kann man auch verschiedene Thumbnailgrößen einfach vordefinieren. Nun habe ich des Öfteren die Erfahrung gemacht das Kunden nachträglich sich doch lieber andere Bildgrößen wünschen. Deswegen versuche ich Vordefiniertes zu vermeiden und sämtliche Anpassungen für eventuelle Thumbnails automatisiert imTemplate zu machen, das geht natürlich nicht immer aber recht oft ist das völlig ausreichend. Deswegen habe ich hier einen kleinen Abriss über die Möglichkeiten der Bildmanipulation im Template erstellt.
Als Beispiel bild nutzen ich einfach das folgende gemeinfreie Bild das freundlicherweise auf den Seiten der NASA zur Verfügung steht.
Das Bild hat die original Abmessungen 800x600 Pixel, und wird jetzt für verschidene Anwendungsbereiche skaliert.
Skalieren mit width() und height()
Prinzipiell funktionieren die beiden Methoden identisch weswegen ich hier hauptsächlich
Normales Skalieren$image = $page->image->width(200); if($image) echo "<img src='$image->url'>"; Das Bild wird einfach skaliert bis die festgelegte Breite erreicht ist, dabei wird das Bild im auch vergrößert wenn es kleiner als die angegebene Breite ist. Wenn man dies nicht möchte kann man dies durch Angabe einer Option ausschalten.
$options=array('upscaling' => false);
$image = $page->image->width(200, $options);
if($image) echo "<img src='$image->url'>";
ACHTUNG IN ALLEN WEITEREN BEISPIELEN LASSE ICH DAS ECHO() AM ENDE WEG!!! |
 |
Prozentuales skalierenHabe ich noch nicht allzuoft gebraucht, ist auch nicht wirklich in der Image Klasse vorgesehen allerdings mit einem kleinen Trick ist es kein Problem. Hier zeigt sich dann auch die Power von PHP im Template. $widthNew= round($page->image->width() * 0.3333) //Skalieren auf 33% $image = $page->image->width($widthNew); |
 |
Maximale Breite und HöheMaximalwerte kann man relativ einfach erreichen wenn die Bilder zumindest immer die selbe Ausrichtung haben, man muss dann nur darauf achten das man die größere Dimension zuerst bearbeitet. (Eigentlich sollte man auch hier schon die size() Methode einsetzen)
$image = $page->images->width(200)->height(200,array('upscaling'=> false));
|
|
Skalieren und beschneiden mit size()
Die size() Methode bietet wesentlich mehr Möglichkeiten als die beiden anderen Funktionen.
Standard Funktionalität$image = $page->image->size(250,250); Das Bild wird so zugeschnitten das es immer die gesamte Fläche ausfüllt. Die kleinere Dimension wird skaliert und die Größere dann beschnitten. Als Schwerpunkt dient dabei wenn nicht anders angegeben die Mitte des Bildes. |
 |
Maximale DimensionenDas Zuschneiden des Bildes kann man unterdrücken, wenn man das tut hat man den Effekt den wir mit height() und width() nicht erreichen konnten. Nämlich das man maximale Dimensionen für das Bild angeben kann.
$image = $page->image->size(250,250,array('cropping'=> false));
|
 |
Zuschneiden mit anderem Schwerpunkt (Mittelpunkt)Wenn man sicher ist das alle hochgeladenen Bilder ihren thematischen Schwerpunkt an einer anderen Stelle als der Mitte haben kann man den Mittelpunkt um den zugeschnitten werden soll einfach verlegen.
$image = $page->image->size(250,250,array('cropping'=> "sw"));
$image = $page->image->size(250,250,array('cropping'=> "100%,100%"));
$image = $page->image->size(250,250,array('cropping'=> "800,600"));
$image = $page->image->size(250,250,"sw"); //kurzschreibweise
In allen obigen Beispielen wurde der Schwerpung nach links unten verlegt, das Resultat sieht man im Bild. |
 |
Weitere Tricks mit Hilfe von PHP
Man kann zum Beispiel eine Dimension eines Bildes beibehalten und nur die andere anpassen(zuschneiden).
$w = $page->image->width(); $image = $page->image->size($W,250);
Oder bestimmten Dimensionen eine Sonderbehandlung zukommen lassen.
$ratio= $page->image->width() / $page->image->height(); if ($ratio>1) do_something(); // Ausrichtung horizontal elseif ($ratio==1) do_something_else(); // Bild Quadratisch else do_anotherthing(); // Ausrichtung vertikal
Schlussfolgerung
Man kann eine Menge mit den automatischen Bildmethoden anstellen, aber wenn man ein perfektes Ergebniss haben möchte wird man um handbearbeitete Bilder gelegentlich nicht drum herum kommen. Da das aber nicht jeder bezahlen möchte, kommt man mit diesen Methoden auch schon recht weit. Man muss sich allerdings schon ein wenig mit den Methoden beschäftigen. Weiterführende Informationen zu Processwire und Images(Englisch).