Volltextsuche
CSS-Rendering - Inhalte wie Bilder automatisch 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, wie z.B. Bilder, über das
wCSS::getWidthBlock
falls die Seite vom Objekttyp start ist .object-start #blockMainOuter {max-width:1280px;...}. Beispiel: Gibt die Breite des blockContent Blockes aus Quelltext <?php print 'Breite des Blockes blockContent in Pixel: ' . wCSS ::
GPS-Koordinaten (Längengrad und Breitengrad) ermitteln
17. September 2018 Änderungsdatum: 19. September 2018 weblication cms geodaten gps koordinaten längengrad longitude breitengrad latitude ermitteln Über die geographischen Daten (Längengrad und Breitengrad) wird die Lage des Punktes auf der
wCSS::getWidthCol
String widthCurrent = null) Parameter file Pfad der CSS-Datei selector Selektor key Schlüssel des Wertes widthCurrent Breite des aktuellen Elementes Beispiel: Gibt die Breite einer Spalte aus Quelltext <?php print 'Breite der Spalte von
wCSS::setWidthBlock
String setWidthBlock(String block, String width) Parameter block ID des Blocks (z.B. blockContent) width Breite (z.B. 540) Beispiel: Setzt die Breite des blockContent Blockes für CSS-Only Quelltext <?php $cssPath =
Spezielle Breite für CSS-Picture-Rendering setzen
mitgegeben werden. Im Beispielfall wird über das Weblic® CSS Definition innerhalb der Unternehmen-Seite eine andere Breite für den Inhaltsbereich ( #blockContent ) gesetzt (z.B. width:420px anstatt der sonst errechneten 490px ). Ein Bild
wCSS::getWidthInner
withTop = '', Array parents = array()) Parameter file Pfad der CSS-Datei selector Selektor des Elementes widthTop Breite des obersten Elementes parents Elternelemente bis zum obersten Element, die auch eine Breite definiert haben können
wCSS::getWidthElement
withTop = '', Array parents = array()) Parameter file Pfad der CSS-Datei selector Selektor des Elementes widthTop Breite des obersten Elementes parents Elternelemente bis zum obersten Element, die auch eine Breite definiert haben können
wCSS::getDiffWidthElement
file Pfad der CSS-Datei selector Selektor des Elementes Beispiel: Ermittelt die Differenz der inneren und der äußeren Breite des Elements Quelltext <?php include( $_SERVER [ 'DOCUMENT_ROOT' ]. '/weblication/grid.php' ); $cssPath =
wImage::getWidth
Parameter useCache Falls die Ermittlung den Cache nutzen soll [true|false], true ist Standard Beispiel: Ermittelt die Breite des angegebenen Bildes Quelltext <?php $pathImage = "/devAssets/img/bild-rot.png" ; $imgWidth = wImage :: getWidth (
wPageProcessor::storeCurrentWidthPath
der übergebenen ID Funktionsaufruf String storeCurrentWidthPath($id) Parameter id ID, über die auf den gespeicherten Breitenpfad zurückgegriffen werden kann Beispiel: Speichert den aktuellen, eindeutigen Breitenpfad (UID) im Wert mit der
wPageProcessor::restoreCurrentWidthPath
der übergebenen ID wieder her Funktionsaufruf String restoreCurrentWidthPath($id) Parameter id ID, des gespeicherten Breitenpfades Beispiel: Stellt den aktuellen, eindeutigen Breitenpfad (UID) der übergebenen ID wieder her Quelltext <?php print
-w-editmaskExtended-width
im Google angeboten wird map.google.wItem.php Beispiele / Anwendungsfälle Beispiel 1: Aktiviert die Auswahl für die Breite im Google Map Element /*@wCssFragment { class: elementGoogleMaps; variant: 0; caption: Standard; caption-en: Default}
-w-editmaskExtended-innerwidth
container.section.wItem.php Beispiele / Anwendungsfälle Beispiel 1: Aktiviert die Auswahl für die Breite der Inhalte im Inhaltsbereiche Element, Variante 0 .elementSection_var0 { /* ... */ ; -w-editmaskExtended-innerwidth:
Die Pflegeschaltfäche der Gruppe ist nun auf die gesamte Breite gespannt.
Gruppe ist nun auf die gesamte Breite
wPageProcessor::getCurrentWidthPath
eindeutigen Pfad der aktuellen Breite Funktionsaufruf String getCurrentWidthPath() Parameter Diese Funktion benötigt keine Parameter. Beispiel: Ermittelt
wPageProcessor::addCurrentWidthPath
Pfad der aktuellen Breite Funktionsaufruf String addCurrentWidthPath($path) Parameter path Pfad, um den der aktuelle Breitenpfad ergänzt wird Beispiel: Erweiterung um Objekt-Typ für eindeutigen Pfad der Seite Quelltext <?php print
wPicture::createPicture
(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
thumbnail
Alternatives Bild, falls das angegebene Bild nicht existiert Integer height Höhe des Thumbnails in Pixel Integer width Breite des Thumbnails in Pixel String alt Alternativtext String mode Darstellungsmodus
Responsive Webdesign
23. Januar 2014 Änderungsdatum: 21. Juli 2014 weblication responsive webdesign responsive-webdesign breite anpassen Weblication CMS BASE Projekte sind standardmäßig für Responsive Webdesign optimiert. Weblication® setzt
wPageProcessor::setCurrentWidthPath
aktuellen, eindeutigen Breitenpfad (UID) Funktionsaufruf String setCurrentWidthPath($path) Parameter path Zu setzender Breitenpfad Beispiel: Setzt den aktuellen, eindeutigen Breitenpfad (UID) Quelltext <?php print wPageProcessor ::
Uploadereignis abhängig von der Bildgröße nutzen
abhängig von der Bildgröße nutzen 09. Januar 2017 upload hochladen bild jpg gif thumbnail vorschaubild grösse breite Über Verzeichnisereignisse können beim Hochladen von Dateien z.B. Aktionen zum Verkleinern von Bilddateien für
Umsetzung einer Internetpräsenz für mobile Endgeräte in älteren Projekten
ob eine Seite über ein mobiles Endgerät aufgerufen wird und kann so automatisch auf die mobile Version weiterleiten. 'Breite der mobilen Anzeige automatisch ermitteln': Wählen Sie über diese Auswahlbox aus, ob die Breite für die mobile
Systemvoraussetzungen Weblication®
den eingesetzten Techniken der jeweiligen Seite ab. Die mitgelieferte Standardpräsenz ist so gestaltet, dass sie einer breiten Kundenschicht zugänglich ist. CMS 18.x Servervoraussetzungen Zur Installation sind folgende serverseitige
wCSS::getValue
, 'body' , 'background' ); ?> Ergebnis Hintergrundfarbe Druckvorschau Body: transparent Beispiel: Gibt die Breite des Inhaltsbereiches ohne Einheit (z.B. px) aus Quelltext <?php print 'Breite des Inhaltsbereiches: ' . wCSS ::
Inhaltsbereich in Mobilansicht ausblenden
Weblic® können Sie den kompletten Inhaltsbereich ausblenden, wenn die Bildschirmauflösung der definierten Breite entspricht. Auszug aus elementSection.scss zur Untervariante 510 "Ausblenden in Mobilansicht" /*@wCssFragment { class:
-w-editmaskExtended-thumbnailswidth
Zeigt das Eingabefeld zur Definition der Vorschaubildbreite an
BASE (Mobile First): Responsive Bilder
im Hintergrund. Bei dieser Anfragen wird die "Fensterbreite" auf die des Breakpoints gesetzt. Dann wird die berechneten Breite der Bilder ermittelt. Das System schreibt diese nun abhängig von der rwid in die Bildgrößentabelle. Basis für die
buttonFilemanager
String captionInfo Ergänzende Beschriftung der Schaltfläche String title Titel der Schaltfläche Integer width Breite in der das Popup geöffnet werden soll Integer height Höhe in der das Popup geöffnet werden soll Integer
Framework
cssStr, String variant) getDiffWidthElement (1) Ermittelt die Differenz der inneren und der äußeren Breite eines Elementes String getDiffWidthElement(String file, String selector) getEditmaskExtended (1) Ermittelt den Wert
Mobile First BASE: Responsive Bilder
Für den Redakteur Für den Redakteur ändert sich kaum etwas. Die meisten Bilder wird er weiterhin mit automatischer Breitenberechnung einbinden. Die aufgelistete Möglichkeit, alternative Bildausschnitte zu definieren, geben ihm bei Bedarf weitere
Links / Querverweise über Lightbox
. Schritt 1: Zentrale Javascript- und CSS-Dateien einbinden Schritt 2: Zentrale Javascript-Datei design.js Individuelle Breiten- und Höhenangaben der Lightbox Schritt 3: Attribute für die Linkbearbeitung definieren Schritt 4: Ausgabetemplate
wCSS
cssStr, String variant) getDiffWidthElement Ermittelt die Differenz der inneren und der äußeren Breite eines Elementes String getDiffWidthElement(String file, String selector) getEditmaskExtended Ermittelt den Wert für
Text in Listen ausgeben und die Anzahl der Zeichen begrenzen
CSS-Only) der Text über die w3schools.com: CSS3 text-overflow property ausgeblendet werden. Hierzu definieren Sie die Breite des entsprechenden Elementes und was bei Textüberlauf geschehen soll: Beispiel 2: Schneidet den Titel der Variante 10
Responsive Toggler-Navigation anpassen
) werden zur Toggler-Navigation nicht berücksichtigt! BASE Standardnavigation Ab der definierten maximalen Breite wird die Navigation über eine Toggler-Schaltfläche angezeigt, die ein Aufklappen und Zuklappen dieser Responsive
Debug-Funktionen zu Listen, Navigationen, Vorschaubildern und CSS nutzen
120, , default) Beschreibung der Parameter zu generateThumbnail : Pfad Pfad des Originalbildes Breite Breite des generierten Vorschaubildes in Pixel Modus Modus der Thumbnail-Funktion (zu wsl:thumbnail oder
wPageProcessor
Aktuelle Seiten-Transformation Funktionen addCurrentWidthPath Erweitert den eindeutigen Pfad der aktuellen Breite String addCurrentWidthPath($path) getCurrentWidthPath Ermittelt den eindeutigen Pfad der aktuellen Breite String
Bild mit Textumfluß realisieren
werden. Hierzu fügen Sie in die Seite über den Struktureditor das Bild-Element ein. Sollte das verlinkte Bild breiter als der Inhaltsbereich sein, geben Sie eine feste Bildbreite an, die unterhalb der Breite des Inhaltsbereiches liegt
Bildbreite und Hintergrundbildbreite bei Inhaltsbereichen
um großes Hintergrundbild anzuzeigen Mindestbreite, um ein Hintergrundbild überhaupt anzuzeigen Hier können Sie zur Breite von (Hintergrund) Bildern entweder über CSS-Variablen oder direkte Eingabe eines Wertes (z.B. 768px oder 0px) den
Änderungen in Weblication® CMS Core/GRID
existieren. 008.001.009.000 14.11.2013 Neue Grund-Layouts auswählbar, um den vorangestellten Bereich z.B. auf 100% Breite anzuzeigen. 008.001.008.000 13.11.2013 Über /wConf/sessions/url/@allowSessionByParam = '0' kann man verhindern, dass
Einstellungsmöglichkeiten für wCSS-Funktion getWidthCol
" " /> ... Ab CMS-Version 007.002.027.000 ist es zudem möglich, durch die Angabe eines returnType zu bewirken, daß Breitenangaben gerundet werden. Setzen Sie hierzu den Wert des returnType -Attributes innerhalb des Tags widthCols (zu css ) auf "
Jedem Client sein Bild
Browser des Besuchers auszuliefern. Responsive auf Elementebene Die Auslieferung geschieht auf Basis der tatsächlichen Breite eines Bildes. Hierzu sind keine Media-Queries speziell für die Bilddarstellung notwendig. Weblication erkennt
Liste mit Box- oder Spalten-Darstellung
eine Listenoptik mit einheitlicher Höhe der Listeneinträge umsetzen. Im Beispiel werden die Einträge mit Bild (volle Breite) und darunter Datum, Titel und Beschreibung mit einer "Meldung lesen" Schaltfläche dargestellt. Die Einträge werden
Shop: Bilder in Shop-Produkt Detailseite in Lightbox öffnen
Objekt CSS-Datei zum Shop Produkt können Sie einstellen, daß Bilder über eine Lightbox geöffnet werden sollen. Die Breite des Vorschaubildes können Sie bei Bedarf über das Objekt-Template der Bildgenerierung mitgeben. Künftig ist in
Version 13: Mobile Performance durch neue Lazy Loading Funktionen
Sie entscheiden, ob Sie Lazy Loading generell nutzen wollen oder nicht. Nun können Sie festlegen, bis zu welcher Breite Lazy Loading eingesetzt werden soll. Es spricht damit also nichts mehr dagegen, bei mobiler Darstellung generell auf
wThumbnail::getPathThumbnail
height, String mode) Parameter path Pfad des Orginalbildes, aus dem das Vorschaubild generiert werden soll width Breite des zu erstellenden Vorschaubildes height Höhe des zu erstellenden Vorschaubildes mode Darstellungsmodus
wThumbnail::createThumbnail
String mode, Array options) Parameter path Pfad des Orginalbildes, aus dem das Vorschaubild generiert werden soll width Breite des zu erstellenden Vorschaubildes height Höhe des zu erstellenden Vorschaubildes mode Darstellungsmodus
BASE Neuinstallation mit Übernahme der Inhalte
kommt. Aus dem alten Projekt können Sie hierzu in den meisten Fällen die Grundstruktur, die Navigationsvariante, Breiten / Hintergrund und Inhaltsstruktur so ableiten, wie diese im " Layout vorbereiten und konfigurieren " Register definiert
Ansicht für die Druckfunktion definieren
für die Druckvorschau Als Link für diesen Navigationspunkt ist eine Javascript-Funktion hinterlegt. Dieser wird die Breite und Höhe des zu öffnenden Fensters der Druckansicht mitgegeben. Setzen Sie als Ziel "Aktuelles Fenster" (_self), da
Mobile Performance durch neue Lazy Loading Funktionen
Sie entscheiden, ob Sie Lazy Loading generell nutzen wollen oder nicht. Nun können Sie festlegen, bis zu welcher Breite Lazy Loading eingesetzt werden soll. Es spricht damit also nichts mehr dagegen, bei mobiler Darstellung generell auf