Volltextsuche
wImage::rotate
Dreht ein Bild. (ab CMS-Version 011.002.222.000)
wPicture::createPicture
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
Bedeutung der Mode-Einstellungen für die Generierung von Vorschaubildern
Dieser Artikel beschreibt, was die einzelnen Modus-Einstellungen zur Erstellung von Vorschaubildern (Thumbnails) bedeuten und bewirken.
So setzen Sie eine intelligente Bildauswahl um
Bildauswahl um Nutzbar ab: Version Veröffentlichungsdatum: 11. April 2011 Änderungsdatum: 16. Oktober 2014 bild picture auswahl pfad startet verzeichnis Dieser Artikel beschreibt, wie Sie die Bildauswahl entsprechend der Struktur des
Copyright Angabe für Bilder umsetzen
{ class: elementPictureTitle; variant: 72; caption: Mit Copyright auf dem Bild; caption-en: With copyright on picture; livepreview: yes} */ .elementPictureTitle_var72 { -w-addCopyright: yes; -w-displayCopyrightInCaption: yes; /* ... */ }
Festlegen des darzustellenden Bildausschnittes und verschiedene Seitenverhältnisse
des darzustellenden Bildausschnittes und verschiedene Seitenverhältnisse Nutzbar ab: Version 18. Mai 2017 editor bild picture bildausschnitt pictureArea seitenverhältnis Dieser Artikel beschreibt, wie Sie es einem Benutzer über die
Vorschaubild in Liste mit unterschiedlichem Seitenverhältnis für Mobilansicht
$viewport_m_min; /* Größe, ab der der Standardbildausschnitt angezeigt wird */ -w-option-picture-aspectratio: 1.3333333333; /* Seitenverhältnis Bild */ -w-option-picture-aspectratiomin: 1; /* Seitenverhältnis bei
Pflege von Bildern
zur Dateiauswahl, wenn der Wert leer ist] notwendig: nein Pflege eines Bildes über die Standardmaske <!-- web:picture:start --> select= " wd:fragment[@id = 'picture']/img " /> <!-- web:picture:stop --> Pflege eines Bildes
CSS-Stylesheet nur einbinden, wenn ein bestimmtes Element in der Seite vorhanden ist.
diese im Gegensatz zu JS-Dateien über ein link-Tag eingebunden werden und somit nur im HTML-head stehen dürfen. Die picture.css wird nur eingebunden, wenn das Element vom Typ core.picture in der aktuellen Seite vorkommt test= "
wList::createListFromXML
Generiert eine Liste auf Basis einer XML-Zeichenkette
Spezielle Breite für CSS-Picture-Rendering setzen
setzen Nutzbar ab: Version Veröffentlichungsdatum: 26. August 2013 Änderungsdatum: 09. November 2017 css picture rendering Die automatische Bildgrößenberechnung über CSS-Angaben (CSS-Picture-Rendering) lässt sich über das HTML
-w-picture-background-color
Vorschaubild in Bildergalerie-Variante 999 .listPictureGallery_var999 .listEntries .listEntryImage { /* ... */ ; -w-picture-background-color: #FFCC33; /* ... */ } Beispiel 2: Setzt die Hintergrundfarbe für das zu generierende Vorschaubild in
wPicture
um responsive Bilder über das PICTURE-Element zu generieren Funktionen createPicture Erstellt ein Bild über ein PICTURE-Element zu generieren Funktionen createPicture Erstellt ein Bild über ein PICTURE-Element String createPicture(String
Debug-Funktionen zu Listen, Navigationen, Vorschaubildern und CSS nutzen
Veröffentlichungsdatum: 25. Juli 2011 Änderungsdatum: 28. Juli 2022 debug debuggen ausgabe listen navigationen css picture rendering bildgrössenanpassung vorschaubilder thumbnails Einblenden von Debug-Informationen für einen Administrator
-w-editmaskExtended-picturemode
der Großbilder' zur Bildergalerie-Variante 0 .listPictureGallery_var0 { /* ... */ ; -w-editmaskExtended-picturemode: yes; /* ... */ } Listenoptionen Bildergalerie - Darstellungsart der Großbilder Zu beachten: Diese CSS-Only Referenz
-w-editmaskExtended-pictureaspectratio
zur Auswahl 'Seitenverhältnis' zur Bildergalerie-Variante 0 .listPictureGallery_var0 { /* ... */ ; -w-editmaskExtended-pictureaspectratio: yes; /* ... */ } Listenoptionen Bildergalerie - Seitenverhältnis Zu beachten: Diese CSS-Only Referenz bezieht sich
Was sind die Hauptmerkmale der Responsive Bilder in der BASE (Mobile First)?
Bilder in der BASE (Mobile First)? Die Responsive Bilder von Weblication in der BASE (Mobile First) verwenden das HTML5 Picture-Tag, um unterschiedliche Bildgrößen abhängig von Bildschirmgrößen bereitzustellen. Wichtigste Funktionen: Optimale
-w-editmaskExtended-layout
Werte Beschreibung Einsatzgebiet [yes|no] Definiert, ob die Auswahlbox für das Layout im Bildelement angeboten wird picture.standard.wItem.php Beispiele / Anwendungsfälle Beispiel 1: Aktivert die Auswahlbox für das Layout im Bildelement in
Metadaten von Bildern auslesen
20.x 07. Oktober 2025 bild picture metadaten exif iptc checkin einchecken reihenfolge priorität Die Metadaten von Bildern (z.B.: EXIF, IPTC) können für
Bild mit unterschiedlichem Seitenverhältnis für Mobilansicht
*/ // -w-option-aspectratioMin: 1; /* Seitenverhältnis Mobilansicht */ -w-mode: crop; figure { display: block; picture { height: 0 !important; display: block; padding-bottom: 25%; } } } Sie müssen lediglich die Zeile mit
Wasserzeichen / Copyright in Bilder setzen
der Font-Datei $font = $_SERVER [ 'DOCUMENT_ROOT' ]. '/weblication/grid5/fonts/default.ttf' ; //Zeichnen: $x = $options [ 'pictureWidth' ]/ 2 ; $y = $options [ 'pictureHeight' ]/ 2 ; $dimensions = imagettfbbox ( $fontsize , 0 , $font , $text ); $textWidth =
So lesen Sie Inhaltsbilder über ein Listentemplate aus
" @path "/> test= " document(concat($wDocumentRoot,@path))//wd:document/wd:group[@id='content1']/wd:item[@type='picture.standard']/wd:fragment[@id='picture']/img/@src "> select= "
Navigation mit grafischen Buttons umsetzen
07. Mai 2015 Änderungsdatum: 24. Februar 2025 navigation text bild grafik icon button schaltfläche grafisch picture Eine Navigation mit Navigationsgrafiken anstatt Navigationstexten je Menüpunkt umsetzen. Um eine Navigation mit
Welche Weblics® sollten aktuell gehalten werden, damit die Bildbrechnungsfunktionen funktionieren?
Inhaltsbox (container.box) Objekt aus einer anderen Seite einbinden (container.includeObject) Bild (standard.picture.wItem.php) Objekt-Template aus Ansprechpartner (contactPerson.wObject.php) Akkordeon-Container (container.accordeon)
wWeblic::renderItemStr
; print wWeblic :: renderItemStr ( ' false false 0 Erster Inhalt 0 Zweiter Inhalt block 5050 Bild default 0 adapt picture 0 0 Dritter Inhalt Bild default 0 adapt picture 0 1 1 ' , $options ); ?> Ergebnis Erster Inhalt Lorem ipsum dolor
-w-create-hd
Definiert, ob ein Bild in HD-Qualität generiert werden soll
Pflege von Links
Link-Tags lassen sich als Ganzes über eine konfigurierbare Maske pflegen.
wImage::convertToJPEG
Konvertiert ein Bild in eine JPEG-Bild
Pflegemasken für Metadaten aus der Dokumentenerweiterung
decorators="default" caption=" " captionInfo=" " editor="file" upload="1" extensions="gif|png|jpg|jpeg" preview="picture" pathIfEmpty=" /img" inputStyle="width:100%"--> select= " /wd:document/wd:extension/wd:meta/wd:thumbnail/@src "/>
CSS-Only Referenz
Definiert, ob die Auswahlbox für die Parallax Inhalt Scroll-Richtung angeboten wird -w-editmaskExtended-pictureaspectratio Definiert, ob die Auswahlbox für die Auswahl 'Seitenverhältnis' angeboten wird -w-editmaskExtended-picturecreatehd
wWeblic::renderItemData
true )); ?> Beispiel 8: Bild-Element über renderItemData ausgeben Beispiel: Quelltext <?php $itemOptions = array( 'picture' => ' ' , 'title' => htmlspecialchars ( "Weblication® Banner!" ), 'layout' => '0' , 'layoutQuality' => '70' ,
HD-Funktion in BASE-Projekten nachrüsten
Die Funktionen hierzu sind in der BASE bereits integriert und werden über das Zusatzmodul " HD High-Definition Picture Rendering " freigeschaltet. Informationen zu diesem Thema finden Sie über die weiterführenden Artikel unten. Ältere
So steuern Sie eine Bearbeitenmaske (z.B. Bildeditor) bei Multiprojekten
Verzeichnis auslagern, können Sie dies wie folgt vornehmen. Beispiel: Inhalt der /de/wGlobal/layout/editor/picture/standard.wTageditor.php <?php $version="1.0"; $encoding="UTF-8"; ?> <?php exit; ?> version= " 1.0 "
Objektdaten als Elemente ausgeben
elementObjectContactPersonElement "> <!-- test= " /wd:document/wd:extension/wd:object/wd:data[@id = 'picture']/text() "> class= " elementObjectContactPersonPicture "> $thumbnailSrc = ' select= "
wTexts::showTextUser
Deutscher Text fr Französischer Text Beispiel: Text über PHP ausgeben Quelltext <?php print wTexts :: showTextUser ( 'Picture' , 'Bild' , 'Image' ); ?> Ergebnis Picture Text über XSLT in ein Attribut schreiben icon= " cancel " caption= "
-w-editmaskExtended-picturecreatehd
der Bilder generieren' zur Bildergalerie-Variante 32 .listPictureGallery_var32 { /* ... */ ; -w-editmaskExtended-picturecreatehd: no; /* ... */ } Listenoptionen Bildergalerie - HD Versionen der Bilder generieren In den meisten
So setzen Sie einen Attributwert dynamisch
Dynamisches Positionieren des Item-Icons eines Bildelementes (XSL-Template) ... match= " wd:item[@type = 'spin.picture'] "> test= " wd:fragment[@id = 'class'] = 'pictureLeft' "> select= " php:functionString('wEnv::setGlobalValue',
Framework
XHTML-Seite Void createXSLFOFromXHTML(String xslFoPath, Strig XHTMLStr) wPicture Klasse, um responsive Bilder über das PICTURE-Element zu generieren createPicture Erstellt ein Bild über ein PICTURE-Element String createPicture(String path, Array
wFacebook::postMessage
Facebook Anwendungs-Geheimcode (APP Secret) data Falls angegeben, werden diese statt den Parametern genommen picture Bild name Name link Link Description Beschreibung Beispiel: Veröffentlicht eine Meldung bei Facebook Quelltext
So nutzen Sie in der Dateiauswahl eigene Auswahlmasken
" view "> icon= " /deGlobal/wGlobal/layout/images/dir-icons/dir-image.gif " caption= " Bilder " en:caption= " Pictures " fr:caption= " Images " path= " /deAssets/img "/> path= " /deAssets/docs " permission= " view "> icon= "
HD Website High-Definition Picture Rendering für HD-Bildschirme wie Apples Retina-Displays und andere hochauflösende Bildschirme
Qualität nachgeladen und angezeigt. Weblication® CMS bietet hierfür eigens ein neuartiges Modul: HD High-Definition Picture Rendering Das neue Weblication® Modul erweitert das Weblication® CSS-Picture-Rendering, das Bilder automatisch im
HD-Bilder in der Bildergalerie
berechnet, an die Browser ausgeliefert und angezeigt werden. Für die Nutzung der Funktion ist das HD High-Definition Picture Rendering erforderlich. In Version 8 wird die Funktion im Standard ausgeliefert. Lizenzen mit Major-Release-Paket
Interessante Funktionen des Bild-Elementes in Weblication®
für Smartphones in HD-Qualität generieren Responsive Design: Bildgrößenberechnung für alle Bildschirmbreiten CSS-Picture Rendering - Weblication® Technologie High-Definition-Picture-Rendering: Bilder in HD-Qualität bei High Definition
Bildbearbeitung | Weblication CMS Onlinedokumentation
Bildbearbeitung Bild-Element | Weblication CMS Onlinedokumentation
Neu in Weblication® Version 19 - veröffentlicht am 01.07.2024
der Indizierung ausgeschlossen ist. Über das Attribut edit=“1” kann eine Datei bei editor=“file” und editor=“picture” direkt bearbeitet werden. Die benutzerspezifische Sortierung eines Verzeichnisses wirkt sich auch auf die
Automatische Bildgrößenberechnung in Weblication® mit CSS-Picture-Rendering
Dez 2013 Weblication® berechnet Bildgrößen automatische im Kontext über die eigenen Weblication® Technologien CSS-Picture-Rendering und High-Definition-Picture-Rendering für hochauflösende Displays. Bild hochladen, in Seite einbinden,
Hohe Performance für SEO-Ranking, Nachhaltigkeit und User-Experience mit Weblication®
Übertragung per GZIP - teils über 90% Einsparung bei Datenübertragung Automatisch die richtige Bildgröße: CSS-Picture Rendering - Weblication® Technologie Automatische Bildbreitenberechnung über Client-Feedback Nutzung von WebP für
Hochauflösende Bilder automatisch auf hochauflösenden Displays ausliefern
Bilder automatisch in HD-Qualität aus. In Verbindung mit der automatischen Bildgrößenberechnung über CSS-Picture-Rendering müssen Sie sich keine Gedanken mehr machen, in welcher Größe Sie Bilder auf Ihren Webserver hochladen. Die
Tabellenbearbeitung | Weblication CMS Onlinedokumentation
formatierbaren Text (WYSIWYG-Funktionen können beschränkt werden (z.B. wysiwyg(bold, italic) für fett und kursiv) picture Bildpflegetag Beispiel für eine dreispaltige Tabelle: input|wysiwyg(bold, italic, underline, links)|wysiwyg (erste