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

: 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|only]

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 übergeordneten 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
copyrightText: Copyright Text
copyrightColor: Copyright Farbe
copyrightText: Copyright Text
copyrightFontSize: Copyright Schriftgröße
cssPath: Pfad der CSS-Datei

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']        = md5('/beliebigerEindeutigerPfad'); // 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']        = md5('/beliebigerEindeutigerPfad2'); // 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']        = md5('/beliebigerEindeutigerPfad3'); // 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']        = md5('/object:meinObjekt'); // 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 Bildausschnitt generieren

Quelltext


<?php

  $GlobalProject = '/devGlobal';
  $AssetsProject = '/devAssets';
  $src         = $AssetsProject.'/img/CIMG1299.jpg';
  
  $useLightbox = true;
  $pictureData = array();
  
  $pictureData['src']        = $src;
  $pictureData['mode']       = 'embed';
  $pictureData['quality']    = '80';
  $pictureData['ratio']      = '2';
  $pictureData['createHD']   = '1';
  $pictureData['loadMode']   = 'default';
  $pictureData['cut']        = '143|191|888|666';

  $options                   = array();
  $options['widthID']        = md5('/beliebigerEindeutigerPfadCut'); // 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';

  print wPicture::createPicture($src, $pictureData, $options);

?>

Ergebnis

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.