Volltextsuche
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
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
CSS-Rendering - Inhalte wie Bilder automatisch in passender Breite generieren
in passender Breite generieren Veröffentlichungsdatum: 23. Juni 2017 Änderungsdatum: 29. November 2018 bild grafik picture element grösse größe breite anpassen anpassung berechnung berechnen rendering css Weblication® CMS passt Inhalte,
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
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
-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
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
-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
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
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
Pflege von textbasierten Daten
den zur Pflege zu verwendenden Editor mögliche Werte:
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 "
Objekt-Wizard - Seitendarstellung des Objektes
Strukturelement finden Sie am Artikelende beschrieben. Bild Weblic / Strukturelement Objektdaten ausgeben - Beispiel picture Geben Sie in das Eingabefeld für die Bild-Datei folgenden Platzhalter ein: wObjectdata:xxx ( xxx steht für den den
Änderungen in Weblication® CMS Core/GRID
Bilder berücksichtigt. 006.009.094.000 01.03.2012 Der Tabelleneditor unterstützt auf Spaltenebene den Editor-Typ picture. 006.009.089.000 29.02.2012 Neue Framework-Funktion wProjectCur::getCorrespondentLanguageDirs verfügbar, um
-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
Neuer WYSIWYG-Editor ab der Version 004.010.002.000
editor="wysiwyg" wysiwygFunctions="bold,italic,underline,styleClasses,justify,orderedList,unorderedList,table,picture,link,source,filter,pastetext"--> select= " wd:fragment[@id = 'text'] "/> <!--web:text:stop--> Erläuterung
Framework
XHTML-Seite Void createXSLFOFromXHTML(String xslFoPath, Strig XHTMLStr) wPicture Klasse, um responsive Bilder über das PICTURE-Element zu generieren createPicture (5) Erstellt ein Bild über ein PICTURE-Element String createPicture(String path,
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
Weblication® Entwicklerbereich
... 26 Juni BASE für Version 20: Bild 1.0.80: Zum Bild kann über die verwendete CSS-Only Variante über -w-option-pictureAreaMaskId bzw. -w-option-pictureAreaMinMaskId eine eigene Maske für den Bildausschnitt definiert werden. 26 Juni BASE für
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
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
Was sich von Weblication® Version 5, 6, 7, 8, 9,10, 11 bis hin zu Version 12 alles getan hat
dann auch im JavaScript berücksichtigt. Bilder Automatische Bildbreitenberechnung über Client-Feedback. Einsatz des Picture-Elements für Responsive Images in Elementen, Listen, Bannern und Galerien. Unterstützung von Art Direction 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
Weblication® Version 19: Neu im Editor
Dateiauswahlfeld aufrufen. Technisch erfolgt dies über das Attribut edit=“1” bei editor=“file” und editor=“picture”. Datei Bearbeitung direkt in Dateiauswahlfeld aufrufen Datei Bearbeitung direkt in Dateiauswahlfeld aufrufen Editor:
Pflegemaske zum Bild-Pflegetag | Weblication CMS Onlinedokumentation
"/> name= " class " values= " " editable= " 1 " sheetRegister= " common "> de:name= " Bild " name= " Bild " value= " picture " icon= " picture "/> de:name= " Bild links " name= " Bild links " value= " pictureLeft " icon= " pictureLeft "/>
Newsletter Layout | Weblication CMS Onlinedokumentation
(" newsletter ") gesetzt ist (Pfad des Mastertemplate-Elementes: /[IHR-GLOBALES-PROJEKT]/wGlobal/mastertemplates/items/picture.standard.wItemMastertemplate.php ). Auszug aus dem Mastertemplate-Element "Bild" ... hasToAddElement= " 0 "> name= "
NEU: Weblication® CMS Version 8 ist da
Endgeräte zur mobilen und responsive Optimierung Noch mehr Brillianz der generierten Bilder : HD High Definition Picture Rendering für HD-Displays wie z.B. Apples Retina-Displays Funktionserweitertes Panel : z.B. Sie verwalten Ihre