Volltextsuche
SVG-Grafik im Bild-Element nutzen
02. Dezember 2020 Änderungsdatum: 08. August 2023 Projektgrundlage: BASE Über das Bild-Element können Sie für SVG-Grafiken bzw. Icons spezielle CSS-Only-Varianten verwenden. Hierfür stehen bereits im Standard die Varianten 40
-w-embedIfLocalSVG
Mögliche Werte Beschreibung Einsatzgebiet [yes|no] Definiert, ob eine lokal verfügbare SVG-Datei direkt als SVG-Markup in das HTML-Dokument eingebettet werden soll. In dem Fall lassen sich dann z.B. Farben im CSS anpassen. (nutzbar
SVG-Bilder in Listen einbetten, um diese per CSS zu formatieren
per CSS zu formatieren Veröffentlichungsdatum: 15. Januar 2018 Änderungsdatum: 08. August 2023 Projektgrundlage: BASE SVG-Bilder werden in Listen standardmäßig über ein IMG-Element eingebunden. Sollen diese allerdings über CSS-gestaltet
Farbe von SVG Bilder beim Überfahren mit der Maus ändern
mit der Maus ändern Veröffentlichungsdatum: 20. Dezember 2017 Änderungsdatum: 08. August 2023 Projektgrundlage: BASE SVG-Bilder sind dann per CSS anpassbar, wenn sie direkt im HTML eingebettet sind, also nicht über IMG-Tag geladen werden.
Link-Icons (SVG) individualisieren
hervorzuheben und passend zum Link-Ziel zu gestalten, liegt der Einsatz von Grafiken nahe. Die BASE nutzt hierfür SVG-Icons, welche über SCSS eingebettet zudem mit Farbe befüllt werden können: Beispiel: Auszug aus der html.scss des
wStringconverter::prepareXmlToEmbed
Funktionsaufruf String prepareXmlToEmbed(String str) Parameter str XML-Zeichenkette Beispiel: Weblication SVG-Logo als XML-String eingebettet Quelltext <?php $strXml = ' .cls-1 { fill: #fff; } .cls-2 { fill: #0050a0; } .cls-3
SVG-Icons für Links
Änderungsdatum: 08. August 2023 Projektgrundlage: BASE Neben den vordefinierten Link-Icons können Sie auch eigene SVG-Icons zum Dekorieren von Links auswählen. Dazu muss die CSS-Only Einstellung -w-editmaskExtended-icon:yes; gesetzt
Navigation mit SVG-Icon pro Navigationspunkt
ab: Version 17.x Veröffentlichungsdatum: 25. April 2023 Änderungsdatum: 24. Februar 2025 navigation grafik bild svg icon Navigationen über Bilder bzw. Icons in der Darstellung optimieren Navigation mit SVG-Icon Die BASE erlaubt in
Animierte SVG-Grafiken hochladen
Nutzbar ab: Version 016.001.138.000 27. Januar 2025 wconf svg bild grafik icon upload hochladen Um auch animierte SVG-Bilder hochladen zu können, ist eine Anpassung in den Systemeinstellungen erforderlich. Durch folgende manuelle
RSS: Weblication® Mobile First Changelogs Version 16
werden soll, kann Über -w-embedSVGElementOuter:span; ein umschließender Elementname (z.B. span) beim eingebetteten SVG-Bild genutzt werden. 16.05.2022 10:04 BASE (Mobile First) für Version 16: Anfahrtsroute mit Google Maps 1.0.191: Der
includeCssRessources
Pfad zu CSS 3 PIE Boolean generateDataURL Generiert automatische Data URLs aus Bilder Boolean generateSVG Generiert SVGs in den benötigten Farben Boolean interpreteWCSS Führt WCSS-Script aus Boolean interpreteServerSideWCSS Führt
CSS-Only Referenz
Definiert, ob die Auswahl für die Breite angeboten wird -w-embedIfLocalSVG Definiert, ob eine lokal verfügbare SVG-Datei direkt als SVG-Markup in das HTML-Dokument eingebettet werden soll. In dem Fall lassen sich dann z.B. Farben im
wCSS::optimizeCSS
a.extern {background-image:url("/devGlobal/wGlobal/layout/images/links/extern.svg?stroke=#FFFF00")} ' ; $options = array( 'generateCSS3' => '1' , 'pathCSS3Pie' => '' , 'generateDataURL' =>
Maximale Bestellmenge im Mini-Shop Weblic ergänzen
>< img src = "[!--wProjectLayoutPath--]/wGlobal/layout/images/links/refresh.svg?stroke=#ffffff" /> < button type = "submit" class= "deleteAmount" onclick =
Framework
(verfügbar ab CMS-Version 15) String minimizeJS(String jsStr) prepareXmlToEmbed (1) Bereitet eine XML Datei (z.B. SVG) zum Einbetten in HTML vor (verfügbar ab CMS-Version 011.002.197.000) String prepareXmlToEmbed(String str)
Neu in Weblication® Version 19 - veröffentlicht am 01.07.2024
im Editor ob die Seite von der Suche ausgeschlossen wird Editor: Arbeitskopie beim Pausieren sperren/entsperren Editor: SVG-Icons von Elementen ersetzen GIF-Icons in alten BASE-Projekten Editor: In Tabellen ist die Ausrichtung pro Spalte
Interessante Funktionen des Bild-Elementes in Weblication®
mit zahlreichen Funktionen Weblication® unterstützt bei Bild-Darstellung GIF, PNG, JPEG, WEBP, SVG, PDF, LottieFiles Bild-Element stellt PDF dar LottieFiles Animationen Bildergalerien per Mausklick in Internet-Seiten
Weblication® Version 19: Neu im Editor
im Editor ob die Seite von der Suche ausgeschlossen wird Editor: Arbeitskopie beim Pausieren sperren/entsperren Editor: SVG-Icons von Elementen ersetzen GIF-Icons in alten BASE-Projekten Editor: In Tabellen ist die Ausrichtung pro Spalte
Neu in Weblication® Version 17 - veröffentlicht am 01.07.2022
Neue CSS Schriftfunktionen hsl, hwb, lab, lch, color, color-mix und color-contrast werden unterstützt Über extern.svg?stroke=#{$colorLinkIcon}if#000000")} kann die dynamische Farbe auf eine bestehende Farbe beschränkt werden. Im
Version 17: CSS-Only - einzelne Neuerungen
Neue Schreibweise Dynamische Farbänderungen auf bestimmte Farbe beschränken In Weblication® lassen sich Farben in SVG-Grafiken dynamisch ändern. In Weblication® Version 17 kann über extern.svg?stroke=#{$colorLinkIcon}if#000000")} eine
Weblication® Version 19: Neu in der Dateiverwaltung
(nicht über die Benutzeroberfläche). Die Funktion wird in Weblication® selbst bereits eingesetzt zum Einblenden von SVG-Icons. Icons in Suggest-Schnellauswahl anzeigen Dateiverwaltung: Weitere Felder in Schnellsuche ergänzbar Über
Was sich von Weblication® Version 5, 6, 7, 8, 9,10, 11 bis hin zu Version 12 alles getan hat
in der integrierten Variantenverwaltung installieren und kopieren. Automatische Schriftfarben, je nach Hintergrund. SVG-Dateien lassen sich mit angepassten Farben auch ohne einzubetten in CSS einbinden. JavaScript - Allgemein Mehrere
Veröffentlichte Weblics® | Weblication CMS Onlinedokumentation
eigenes Icon verlinken, welches eine Größe von maximal 32 x 32 Pixel haben sollte und im Bild-Format (png, gif, jpg, svg) abliegen sollte. Wählen Sie als Ablageort am besten das images-Verzeichnis des globalen Projektes. Welche Angabe ist