Volltextsuche
Beim Ändern eines Bildes kann wie folgt eine Funktion aufgerufen werden: web:picture:start onchange="beliebigeFunktion('', picture.src)"
Ändern eines Bildes kann wie folgt eine Funktion aufgerufen werden: web:picture:start onchange="beliebigeFunktion(:picture:start
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
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
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
-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: input|select|selectPicture|textarea|wysiwyg|sourceCode|file|dir|picture|date|navid|navpath|categories|checkbox|radio|pictureArea|upload|hidden|color|selectCssClassVariant|user|itemUID|latlong
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
Eigene Pflegemasken zu CSS-Only Untervarianten der Liste nutzen
*/ /*@wCssFragment { class: listDefaultMyAspectRatio; variant: 0; caption: Bild-Seitenverhältnis 16 / 9; caption-en: Picture AspectRatio 16 / 9; usertypes: ; selectable: yes} */ .listDefaultMyAspectRatio_var0 { -w-option-picture-aspectratio:
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
-w-picture-colorspace
Beispiel 1: Gibt das Vorschaubild der Liste in Graustufen aus .listDefault_var60 .listEntryThumbnail { /* ... */ ; -w-picture-colorspace: gray; /* ... */ } Weiterführende Links CSS-Only Eigenschaft: -w-picture-srchover Zu beachten: Diese
Objektdaten als Elemente ausgeben
elementObjectContactPersonElement "> <!-- test= " /wd:document/wd:extension/wd:object/wd:data[@id = 'picture']/text() "> class= " elementObjectContactPersonPicture "> $thumbnailSrc = ' select= "
Weblics® 2.x in BASE 1.x nutzen
Erweiterte und vereinfachte Funktionen für die Layoutumsetzung (Layoutwizard) Optimierte Bildbreitenberechnung (CSS-Picture-Rendering) Verbesserte Updatefähigkeit und beschleunigte Entwicklung durch CSS-Variablen und CSS-Varianten statt
-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
wTexts::showTextUser
Deutscher Text fr Französischer Text Beispiel: Text über PHP ausgeben Quelltext <?php print wTexts :: showTextUser ( 'Picture' , 'Bild' , 'Image' ); ?> Ergebnis Bild Text über XSLT in ein Attribut schreiben icon= " cancel " caption= "
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
JavaScript Dateien 1.0.314: ui.js: Optimierung zur Barrierefreiheit hinsichtlich Bildergalerie in Verbindung mit dem PictureZoomer 06 Februar BASE für Version 19: Team, Ansprechpartner, Personen 1.0.408: Optimierung zur Barrierefreiheit zu den
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