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
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['alt']  = 'Bild alt';
    
$options['attributes-img']['width']  = '100%';
    print 
'<span class="pictureZoomer"></span>';
  }

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

?>

Ergebnis

Bild alt

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['alt']  = 'Bild alt';
    
$options['attributes-img']['width']  = '75%';
    print 
'<span class="pictureZoomer"></span>';
  }

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

?>

Ergebnis

Bild alt
 

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['alt']  = 'Bild alt';
    
$options['attributes-img']['width']  = '100%';
    print 
'<span class="pictureZoomer"></span>';
  }

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

?>

Ergebnis

Bild alt

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['alt']  = 'Bild alt';
    
$options['attributes-img']['width']  = '75%';
    print 
'<span class="pictureZoomer"></span>';
  }

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

?>

Ergebnis

Bild alt
 
 

Ähnliche Seiten

Entwicklerbereich Weblication® CMS - © Scholl Communications AG