Arbeiten mit Bildern: Unterschied zwischen den Versionen

Aus Contao Community Documentation

(→‎Codebeispiele)
(files)
 
(10 dazwischenliegende Versionen von 7 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
 
[[Category:Dev HOWTOS]]
 
[[Category:Dev HOWTOS]]
−
[[Category:Dev Snippets]]
+
[[Category:Dev Snippets]]{{AppliesTo
−
{{AppliesTo|TLVersion=ab 2.7|Version=ab 2.9}}
+
|TLVersion=ab 2.7
−
 
+
|Version=ab 2.9
 +
}}
 
Das Contao-Framework stellt folgende Methoden für das Arbeiten mit Bildern zur Verfügung:
 
Das Contao-Framework stellt folgende Methoden für das Arbeiten mit Bildern zur Verfügung:
 
# generateImage()
 
# generateImage()
 
# getImage()
 
# getImage()
−
Der generelle Ablaub beim Arbeiten mit Bildern ist folgender. Man hat die Original-Daten welche meistens unter dem Ordner '''tl_files''' abgelegt sind. Im nächsten Schritt werden die Originaldaten aufbereitet, dass heißt das Bild wird in der entsprechenden GRöße unter '''system/html''' abgelegt und von dort aus auf der Webseite ausgegeben.  
+
# Image Klasse
 +
Die Original-Daten, welche meistens unter dem Ordner '''files''' (in Contao 2.x: tl_files) abgelegt sind werden aufbereitet.
 +
Hierzu wird das Bild in der entsprechenden Größe unter '''system/html''' abgelegt und auf der Webseite werden nur noch Verweise auf diese erzeugte Kopie ausgegeben.
  
 
== getImage() ==
 
== getImage() ==
−
Die Methode getImage() ist in der Controller.php angesiedelt und besitzt 5 Parameter wovon die ersten drei Parameter verpflichtend sind. Die Methode erstellt eine neue Version des Original-Bildes und legt dieses im Cache Verzeichnis /system/html ab. Es wird eine URL zum neuen Bild zurück gegeben. Dieser Rückgabewert wird dann mit der Methode generateImage weiter verarbeitet.
+
Die Methode getImage() ist in der Datei system/libraries/Controller.php angesiedelt und stellt fünf Parameter zur Verfügung, von welchen die ersten drei verpflichtend sind.  
−
Aktuell unterstützt Contao die folgenden Bildformate: jpeg, jpg, png, gif
+
Die Methode erstellt eine neue Version des Original-Bildes und legt dieses im Cache Verzeichnis /system/html ab, sofern der Parameter $target nicht übergeben wird.  
 +
Es wird der Pfad zum neuen Bild zurück gegeben, wenn die Verarbeitung funktioniert hat.
 +
 
 +
Aktuell verarbeitet Contao die Bildformate welche von PHP (gdlib) unterstützt werden: jpeg, jpg, png und gif (nur lesen)
  
 
=== Parameter ===
 
=== Parameter ===
−
# $image: Enthällt den Pfad zu dem Bild welches bearbeitet werden soll. (BSP: tl_root/images/foobar.jpg)
+
# $image: Enthält den Pfad zu dem Bild welches bearbeitet werden soll. (BSP: tl_files/images/foobar.jpg)
−
# $width: enthällt die gewünschte Breite des Bildes (BSP: 200)
+
# $width: enthält die gewünschte Breite des Bildes (z.B.: 200)
−
# $height: enthällt die gewünschte Höhe des Bildes (BSP: 250)
+
# $height: enthält die gewünschte Höhe des Bildes (z.B.: 250)
 
# $mode: optionale Angabe der Skallierungsmethode
 
# $mode: optionale Angabe der Skallierungsmethode
 
## proportional
 
## proportional
 
## box
 
## box
−
# $target: // fehlt
+
## crop (obsolet seit 2.11)
 +
## left_top (seit 2.11)
 +
## center_top (seit 2.11)
 +
## right_top (seit 2.11)
 +
## left_center (seit 2.11)
 +
## center_center ( seit 2.11 - rückwärtskompatibel für crop)
 +
## right_center (seit 2.11)
 +
## left_bottom (seit 2.11)
 +
## center_bottom (seit 2.11)
 +
## right_bottom (seit 2.11)
 +
 
 +
# $target: Ort an dem das neue Bild gespeichert werden soll, relativ zu TL_ROOT.
  
 
== generateImage() ==
 
== generateImage() ==
−
Die Methode generateImage() ist ebenfalls in der Controller.php angesiedelt und erzeugt einen HTML <img> Tag welcher in einem Template ausgegeben werden kann. Diese Methode besitzt 3 Parameter wovon nur der Erste verpflichtend angegeben werden muss. Wird beim Parameter $src kein Pfad angegeben, sondern nur ein Bildname (Pdafe beginnen immer mir /, Bildnamen nicht) so sucht Contao das Bild im aktuellen Themes Verzeichnis. (BSP: system/themes/default/images/)
+
Die Methode generateImage() ist ebenfalls in der Controller.php angesiedelt und erzeugt einen HTML <img> Tag welcher in einem Template ausgegeben werden kann. Diese Methode besitzt 3 Parameter wovon nur der Erste verpflichtend angegeben werden muss. Wird beim Parameter $src kein Pfad angegeben, sondern nur ein Bildname (Pfade beginnen immer mit / und sind relativ zum TL_ROOT zu verstehen, Bildnamen nicht) so sucht Contao das Bild im aktuellen Themes Verzeichnis. (i.d.R.: /system/themes/default/images/ sofern kein anderes Backend-Theme gewählt wurde).
  
 
=== Parameter ===
 
=== Parameter ===
−
# $src: Der Pfad zum Bild welches eingebunden werden soll. (BSP: hier kann der Rückgabewert der Methode getImage() verwendet werden)
+
# $src: Der Pfad zum Bild welches eingebunden werden soll. (hier kann z.B. der Rückgabewert der Methode getImage() verwendet werden)
−
# $alt: Angabe eines ALT-Wertes. Dieser ist laut W3C Pflicht und sollte immer angegeben werden.
+
# $alt: Angabe eines Wertes für das alt-Attribut. Dieser ist laut [[w:de:W3C|W3C]] Pflicht und sollte immer angegeben werden.
−
# $attributes: Angabe aller weiteren zusätzlichen <img> Attribute. (BSP: inline CSS, ...)
+
# $attributes: Angabe weiterer Attribute für das zu erzeugende <img> Tag. (z.B.: inline [[w:de:CSS|CSS]] via style Attribut, etc.)
  
 
== Codebeispiele ==
 
== Codebeispiele ==
−
Mit folgendem Code können Sie eine neue verkleinerte Version eines Bildes im Cache ablegen und auf der Seite ausgeben lassen:
+
Mit folgendem Code kann eine neue verkleinerte Version eines Bildes im Cache abgelegt und auf der Seite ausgegeben werden:
−
$strReturn = $this->generateImage($this->getImage('tl_files/images/foobar.jpg', 300, 250, 'proportional'), 'my first image');
+
<source lang="php">
 +
$strReturn = $this->generateImage($this->getImage('files/images/foobar.jpg', 300, 250, 'proportional'), 'my first image');
 +
// nun den Wert an ein Template übergeben.
 +
$this->Template->myFirstImage = $strReturn;
 +
</source>
 +
 
 +
== Image Klasse ==
 +
Seit Contao 3? steht eine eigene [http://api.contao.org/classes/Contao.Image.html Image Klasse] zur Verfügung. Über diese können Bilder in der Größe geändert und überschrieben werden oder eine Kopie des Originalbildes in der entsprechenden Größe angelegt werden.

Aktuelle Version vom 3. September 2014, 15:15 Uhr

betrifft
TYPOlight Version ab 2.7
Contao Version ab 2.9

Das Contao-Framework stellt folgende Methoden für das Arbeiten mit Bildern zur Verfügung:

  1. generateImage()
  2. getImage()
  3. Image Klasse

Die Original-Daten, welche meistens unter dem Ordner files (in Contao 2.x: tl_files) abgelegt sind werden aufbereitet. Hierzu wird das Bild in der entsprechenden Größe unter system/html abgelegt und auf der Webseite werden nur noch Verweise auf diese erzeugte Kopie ausgegeben.

getImage()

Die Methode getImage() ist in der Datei system/libraries/Controller.php angesiedelt und stellt fünf Parameter zur Verfügung, von welchen die ersten drei verpflichtend sind. Die Methode erstellt eine neue Version des Original-Bildes und legt dieses im Cache Verzeichnis /system/html ab, sofern der Parameter $target nicht übergeben wird. Es wird der Pfad zum neuen Bild zurück gegeben, wenn die Verarbeitung funktioniert hat.

Aktuell verarbeitet Contao die Bildformate welche von PHP (gdlib) unterstützt werden: jpeg, jpg, png und gif (nur lesen)

Parameter

  1. $image: Enthält den Pfad zu dem Bild welches bearbeitet werden soll. (BSP: tl_files/images/foobar.jpg)
  2. $width: enthält die gewünschte Breite des Bildes (z.B.: 200)
  3. $height: enthält die gewünschte Höhe des Bildes (z.B.: 250)
  4. $mode: optionale Angabe der Skallierungsmethode
    1. proportional
    2. box
    3. crop (obsolet seit 2.11)
    4. left_top (seit 2.11)
    5. center_top (seit 2.11)
    6. right_top (seit 2.11)
    7. left_center (seit 2.11)
    8. center_center ( seit 2.11 - rückwärtskompatibel für crop)
    9. right_center (seit 2.11)
    10. left_bottom (seit 2.11)
    11. center_bottom (seit 2.11)
    12. right_bottom (seit 2.11)
  1. $target: Ort an dem das neue Bild gespeichert werden soll, relativ zu TL_ROOT.

generateImage()

Die Methode generateImage() ist ebenfalls in der Controller.php angesiedelt und erzeugt einen HTML <img> Tag welcher in einem Template ausgegeben werden kann. Diese Methode besitzt 3 Parameter wovon nur der Erste verpflichtend angegeben werden muss. Wird beim Parameter $src kein Pfad angegeben, sondern nur ein Bildname (Pfade beginnen immer mit / und sind relativ zum TL_ROOT zu verstehen, Bildnamen nicht) so sucht Contao das Bild im aktuellen Themes Verzeichnis. (i.d.R.: /system/themes/default/images/ sofern kein anderes Backend-Theme gewählt wurde).

Parameter

  1. $src: Der Pfad zum Bild welches eingebunden werden soll. (hier kann z.B. der Rückgabewert der Methode getImage() verwendet werden)
  2. $alt: Angabe eines Wertes für das alt-Attribut. Dieser ist laut W3C Pflicht und sollte immer angegeben werden.
  3. $attributes: Angabe weiterer Attribute für das zu erzeugende <img> Tag. (z.B.: inline CSS via style Attribut, etc.)

Codebeispiele

Mit folgendem Code kann eine neue verkleinerte Version eines Bildes im Cache abgelegt und auf der Seite ausgegeben werden: 

$strReturn = $this->generateImage($this->getImage('files/images/foobar.jpg', 300, 250, 'proportional'), 'my first image');
// nun den Wert an ein Template übergeben.
$this->Template->myFirstImage = $strReturn;

Image Klasse

Seit Contao 3? steht eine eigene Image Klasse zur Verfügung. Über diese können Bilder in der Größe geändert und überschrieben werden oder eine Kopie des Originalbildes in der entsprechenden Größe angelegt werden.

Von „https://de.contaowiki.org/index.php?title=Arbeiten_mit_Bildern&oldid=8312“
Ansichten
Meine Werkzeuge

Contao Community Documentation

noch 4 mal das Wort Abstraktion und ich beginne Zigaretten zu rauchen...

Martin Mildner
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge