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

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

Beispiel

Bild mit 100% Breite generieren

Quelltext


<?php

  $src         = '/devAssets/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';
  $options['cssPath']        = '/wGlobal-blog/wGlobal/layout/styles/design.css';

  if($useLightbox){
    $options['attributes']['class']    = 'wglLightbox';
    $options['attributes']['data-src'] = $pictureData['src'];
    $options['attributes']['data-rel'] = 'img-0815';
    $options['attributes-img']['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

  $src         = '/devAssets/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';
  $options['cssPath']        = '/wGlobal-blog/wGlobal/layout/styles/design.css';

  if($useLightbox){
    $options['attributes']['class']    = 'wglLightbox';
    $options['attributes']['data-src'] = $pictureData['src'];
    $options['attributes']['data-rel'] = 'img-0815';
    $options['attributes-img']['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

  $src         = '/devAssets/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';
  $options['cssPath']        = '/wGlobal-blog/wGlobal/layout/styles/design.css';

  if($useLightbox){
    $options['attributes']['class']    = 'wglLightbox';
    $options['attributes']['data-src'] = $pictureData['src'];
    $options['attributes']['data-rel'] = 'img-0815';
    $options['attributes-img']['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

  $src         = '/devAssets/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';
  $options['cssPath']        = '/wGlobal-blog/wGlobal/layout/styles/design.css';

  if($useLightbox){
    $options['attributes']['class']    = 'wglLightbox';
    $options['attributes']['data-src'] = $pictureData['src'];
    $options['attributes']['data-rel'] = 'img-0815';
    $options['attributes-img']['alt']  = 'Bild alt';
    $options['attributes-img']['width']  = '75%';
    print '<span class="pictureZoomer"></span>';
  }

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

?>