wPicture::createPicture
Erstellt ein Bild über ein PICTURE-Element
Funktionsaufruf
String createPicture(String path, Array data, Array, options)
Parameter
path
Pfad des Bildes
data
Bilddaten
- default
- Array mit den Bilddaten für das Standardbild
- src
- Pfad
- mode
- Darstellungsmodus
- default
- Das Bild wird so weit verkleinert, dass beide Seiten in die Vorgabe passen und der ggf. entstehende Leerraum abgeschnitten wird. So kann es sein, dass eine Seite kleiner als angegeben dargestellt wird.
- crop
- Das Bild wird so weit verkleinert, dass eine Seite in die Vorgabe passt und die ggf. überstehenden Seiten abgeschnitten werden.
- cropTop
- Wie crop mit Ausrichtung oben
- cropRight
- Wie crop mit Ausrichtung right
- cropBottom
- Wie crop mit Ausrichtung unten
- cropLeft
- Wie crop mit Ausrichtung links
- embed
- Das Bild wird so weit verkleinert, dass beide Seiten in die Vorgabe passen und der ggf. entstehende Leerraum aufgefüllt wird.
- embedTop
- Wie embed mit Ausrichtung oben
- embedRight
- Wie embed mit Ausrichtung rechts
- embedBottom
- Wie embed mit Ausrichtung unten
- embedLeft
- Wie embed mit Ausrichtung links
- embedTopLeft
- Wie embed mit Ausrichtung oben links
- embedTopRight
- Wie embed mit Ausrichtung oben rechts
- embedBottomRight
- Wie embed mit Ausrichtung unten rechts
- embedBottomLeft
- Wie embed mit Ausrichtung unten links
- force
- Die Größe wird angepasst und das Bild ggf. verzerrt
- loadMode [|lazy]
- Falls das Bild erst dann geleaden werden soll, wenn es sich im sichtbaren Bereich befindet
- sizeMode
- Größemodus
- Keine Angabe
- Standardmodus
- pixel
- Pixelgenaues Laden für jede Bildschirmgröße. Achtung, dieser Modus hat negative Auswirkungen auf die Performance und den Speicherverbrauch haben!
- original
- Das Bild wird in der Originalgröße generiert
- original2x
- Das Bild wird in der halben Originalgröße generiert und somit hochauflösend dargestellt.
- raw
- Das Originalbild wird ohne Generierung direkt eingebunden.
- createHD [|1]
- Falls ein HD-Bild generiert werden soll
- createWebp [|1]
- Falls ein WebP-Bild generiert werden soll
- quality
- Falls die Qualität bei JPG-Bildern reduziert werden soll (0-100)
- qualityHD
- Falls die Qualität bei JPG-Bildern bei HD-Darstellung reduziert werden soll (0-100)
- ratio
- Seitenverhältnis bei zugeschnittenen Bildern (mode: embed bzw. embedX oder crop)
- minWidthX
- Array mit den Bilddaten für ein alternatives Bild, welches ab der Breite X dargestellt werden soll. Die Daten entsprechen denen von default.
options
Optionen
- widthID
- Breiten-ID, welche sich aus den Varianten des Bildes und der für die breite relevanten übergordneten Elementen zusammen setzt.
- alt
- Alternativtext des Bildes
- attributes
- Attribute des PICTURE-Elementes
- attributes-img
- Attribute des IMG-Elementes
- embedSVG [|1]
- Falls das Bild als SVG eingebettet werden soll
- minWidthVisible
- Mindestbreite des Bildschirms, um angezeigt zu werden
- cssPath
- Pfad der CSS-Datei
Hinweis
Beim Einsatz von Framework-Funktionen in eigenen Skripten beachten Sie bitte den Artikel "So verwenden Sie das PHP-Framework in eigenen Scripten".
Wenn Sie eine Funktion innerhalb einer Weblication® Seite z.B. über das PHP-Quelltext Element oder in einem XSL-Template über wsl:php einbinden, muss das Framework über die grid.php nicht mehr referenziert werden. Sofern nachfolgend PHP-Beispiele aufgeführt sind, ist dies entsprechend zu beachten.
Beispiel
Bild mit 100% Breite generieren
Quelltext
<?php
$GlobalProject = '/devGlobal';
$AssetsProject = '/devAssets';
$src = $AssetsProject.'/img/CIMG1299.jpg';
$useLightbox = true;
$pictureData = array();
$pictureData['src'] = $src;
$pictureData['mode'] = 'crop';
$pictureData['quality'] = '80';
$pictureData['ratio'] = '1.5';
$pictureData['createHD'] = '1';
$pictureData['loadMode'] = 'default';
$pictureData['cut'] = '';
$options = array();
$options['widthID'] = '1234567890'; // Breiten-ID, welche sich aus den Varianten des Bildes und der für die breite relevanten übergordneten Elementen zusammen setzt.
$options['cssPath'] = $GlobalProject.'/wGlobal/layout/styles/design.css';
if($useLightbox){
$options['attributes']['class'] = 'wglLightbox';
$options['attributes']['data-src'] = $pictureData['src'];
$options['attributes']['data-rel'] = 'img-0815';
$options['alt'] = 'Bild alt';
$options['attributes-img']['width'] = '100%';
print '<span class="pictureZoomer"></span>';
}
print wPicture::createPicture($src, $pictureData, $options);
?>
Ergebnis
Beispiel
Bild mit 75% Breite generieren
Quelltext
<?php
$GlobalProject = '/devGlobal';
$AssetsProject = '/devAssets';
$src = $AssetsProject.'/img/CIMG1299.jpg';
$useLightbox = true;
$pictureData = array();
$pictureData['src'] = $src;
$pictureData['mode'] = 'crop';
$pictureData['quality'] = '80';
$pictureData['ratio'] = '1.5';
$pictureData['createHD'] = '1';
$pictureData['loadMode'] = 'default';
$pictureData['cut'] = '';
$options = array();
$options['widthID'] = '1234567890'; // Breiten-ID, welche sich aus den Varianten des Bildes und der für die breite relevanten übergordneten Elementen zusammen setzt.
$options['cssPath'] = $GlobalProject.'/wGlobal/layout/styles/design.css';
if($useLightbox){
$options['attributes']['class'] = 'wglLightbox';
$options['attributes']['data-src'] = $pictureData['src'];
$options['attributes']['data-rel'] = 'img-0815';
$options['alt'] = 'Bild alt';
$options['attributes-img']['width'] = '75%';
print '<span class="pictureZoomer"></span>';
}
print wPicture::createPicture($src, $pictureData, $options);
?>
Ergebnis
Beispiel
Bild mit Seitenverhältnis 2:1 generieren
Quelltext
<?php
$GlobalProject = '/devGlobal';
$AssetsProject = '/devAssets';
$src = $AssetsProject.'/img/CIMG1299.jpg';
$useLightbox = true;
$pictureData = array();
$pictureData['src'] = $src;
$pictureData['mode'] = 'crop';
$pictureData['quality'] = '80';
$pictureData['ratio'] = '2';
$pictureData['createHD'] = '1';
$pictureData['loadMode'] = 'default';
$pictureData['cut'] = '';
$options = array();
$options['widthID'] = '1234567890'; // Breiten-ID, welche sich aus den Varianten des Bildes und der für die breite relevanten übergordneten Elementen zusammen setzt.
$options['cssPath'] = $GlobalProject.'/wGlobal/layout/styles/design.css';
if($useLightbox){
$options['attributes']['class'] = 'wglLightbox';
$options['attributes']['data-src'] = $pictureData['src'];
$options['attributes']['data-rel'] = 'img-0815';
$options['alt'] = 'Bild alt';
$options['attributes-img']['width'] = '100%';
print '<span class="pictureZoomer"></span>';
}
print wPicture::createPicture($src, $pictureData, $options);
?>
Ergebnis
Beispiel
Bild mit embedTopRight generieren
Quelltext
<?php
$GlobalProject = '/devGlobal';
$AssetsProject = '/devAssets';
$src = $AssetsProject.'/img/CIMG1299.jpg';
$useLightbox = true;
$pictureData = array();
$pictureData['src'] = $src;
$pictureData['mode'] = 'embedTopRight';
$pictureData['quality'] = '80';
$pictureData['ratio'] = '1.5';
$pictureData['createHD'] = '1';
$pictureData['loadMode'] = 'default';
$pictureData['cut'] = '';
$options = array();
$options['widthID'] = '1234567890'; // Breiten-ID, welche sich aus den Varianten des Bildes und der für die breite relevanten übergordneten Elementen zusammen setzt.
$options['cssPath'] = $GlobalProject.'/wGlobal/layout/styles/design.css';
if($useLightbox){
$options['attributes']['class'] = 'wglLightbox';
$options['attributes']['data-src'] = $pictureData['src'];
$options['attributes']['data-rel'] = 'img-0815';
$options['alt'] = 'Bild alt';
$options['attributes-img']['width'] = '75%';
print '<span class="pictureZoomer"></span>';
}
print wPicture::createPicture($src, $pictureData, $options);
?>
Ergebnis
