Volltextsuche
Bildgenerierung: ImageMagick in Weblication CMS nutzen
nutzen Nutzbar ab: Version 05. Oktober 2016 wconf bildgenerierung gd imagemagick Nutzen Sie zum Generieren von Bildern imageMagick für eine bessere Bildqualität und geringeren Speicherverbrauch! Ab Weblication® CMS Version 008.000.000.000 haben
HD-Funktion in BASE-Projekten nachrüsten
4: Aktuellstes Bild-Element installieren Schritt 5: CSS-Definitionen zum Bild-Element nachziehen Schritt 6: Variablen images_hd_* nachrüsten Schritt 7: Auf Retina-Gerät testen Schritt 1: Media-Queries nachziehen Sofern nicht vorhanden, fügen Sie
Lazy Loading für Interaktive ImageMaps bzw. Erklärbilder
24. Oktober 2019 Änderungsdatum: 08. August 2023 Projektgrundlage: BASE Das Weblic® Interaktive ImageMap unterstützt im Standard (Oktober 2022) Lazy Loading. Bilder, die in dem Erklärbild für die Marker als Vorschaubild
Interaktive Erklärbilder (ImageMap): Scrollevent nach Klick auf Labels bzw. Icons aktivieren
22. Februar 2023 Änderungsdatum: 08. August 2023 Projektgrundlage: BASE So können Sie einstellen, dass onClick zu dem ImageMap-Marker oder den jeweiligen Label gescrollt wird. Je nach Ansicht ist es wünschenswert, dass onClick auf den Marker der
Systemvoraussetzungen Weblication®
PDO Treiber cURL Bibliothek Zlib Komprimierungsfunktionen GD Grafikfunktionen (inkl. FreeType), optional/zusätzlich imageMagick Cookie-Modul zu PHP-Sessions (session.use_cookies) PHP JSON Schreibrechte für den Webserver innerhalb/inklusive
Version 14: Interaktive Imagemaps und Erklärbilder
Artikel Version 14: Interaktive Imagemaps und Erklärbilder
Wasserzeichen / Copyright in Bilder setzen
/ Copyright in Bilder setzen Veröffentlichungsdatum: 24. Juli 2014 Änderungsdatum: 15. Februar 2023 bilder picture image copyright wasserzeichen Weblication® liefert Ihnen Werkzeuge dafür, um Bilder mit einem Wasserzeichen-Effekt bzw.
Logo sprachabhängig ausgeben
(z.B. als png-Grafik) ### --> name= " logoFurtherLanguage "> select= " $wGlobalProjectPath "/> /wGlobal/layout/images/logo- select= " $wLanguageProject "/> .png <!-- ### ENDE ### --> test= "
Pflegemasken für Metadaten aus der Dokumentenerweiterung
test= " //wd:extension/wd:status/wd:online/@status = 'timer' "> class= " statusIcon " src= " /weblication/grid5/gui/images/icon_small/status_zeitsteuerung.gif "/> test= " //wd:extension/wd:status/wd:online/@status = 'off' "> class= "
So setzen Sie eine intelligente Bildauswahl um
... name= " Bild " en:name= " Picture " icon= " /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/images/element-icons/element_picture.gif " type= " picture.standard "> id= " title " type= " char.text "/> id= " display
RSS: Weblication® Mobile First Changelogs
Titel, Beschreibung und Schlüsselwörter für KI vorbereitet 27.02.2024 14:54 BASE für Version 18: Interaktive ImageMap, Erklärbild 1.0.178: Für die Marker kann pro ImageMap eingestellt werden, ob die Marker-Info per Klick, Mouseover oder
Weblication® Entwicklerbereich
und fertige kostenlose Weblics® - und das oft einfach per Mausklick ... 27 Februar BASE für Version 18: Interaktive ImageMap, Erklärbild 1.0.178: Für die Marker kann pro ImageMap eingestellt werden, ob die Marker-Info per Klick, Mouseover oder
Pflege von Bildern
Bildern Image-Tags lassen sich als Ganzes über eine konfigurierbare Maske pflegen. iconStyle definiert CSS, um die Darstellung des
Bereich mit wechselbarem Bild umsetzen
und ausgegeben --> name= " headerBild "> id= " headerBild "> src= " {$wGlobalProjectPath}/wGlobal/layout/images/headerBilder/bild-orange.jpg " alt= " " /> ... /* Auszug aus design.css zum Headerbild */ #blockTop #headerBild {
RSS: Weblication® Mobile First Changelogs Version 16
ausgeblendet werden) 05.04.2022 16:27 BASE (Mobile First) für Version 16: Interaktive ImageMap, Erklärbild 1.0.134: mapEntryLink wird nur dann in der Infobox ausgegeben, wenn die verlinkte Datei online ist.
Das wGlobal Verzeichnis - Anpassungen für Ihr Projekt
Verzeichnisse für die Dateiauswahl Einbindung des Dateimanagers in eine Präsenz: WSL Tag: buttonFilemanager images - Bilddateien für das Projektlayout scripts - Globale JavaScript-Libaries Manche Strukturelemente benötigen
Globale Projekteinstellungen
Verzeichnisse für die Dateiauswahl Einbindung des Dateimanagers in eine Präsenz: WSL Tag: buttonFilemanager images - Bilddateien für das Projektlayout scripts - Globale JavaScript-Libaries Manche Strukturelemente benötigen
So nutzen Sie in der Dateiauswahl eigene Auswahlmasken
" Souvent nécessaire "> path= " /deAssets/img " permission= " view "> icon= " /deGlobal/wGlobal/layout/images/dir-icons/dir-image.gif " caption= " Bilder " en:caption= " Pictures " fr:caption= " Images " path= " /deAssets/img
Jedem Client sein Bild
sein Bild Veröffentlichungsdatum: 20. Dezember 2013 Änderungsdatum: 19. Februar 2021 weblication cms responsive images hd lazy Während der Redakteur nur ein Bild einpflegt, kümmert sich Weblication darum, dass jeder Client das für ihn
Mobile First BASE: Responsive Bilder
inzwischen sehr viele unterschiedlichen Bildschirmgrößen gibt, setzt die Mobile First BASE konsequent auf Responsive Images, um eine optimale Bildqualität bei gleichzeitig minimaler Bildgröße auszuliefern. Funktionsumfang der Responsive
wCSS::optimizeCSS
=> String Pfad zu CSS3Pie, fall diese genutzt werden soll generateDataURL => (z.B.: extensions:gif,png;dirs:images/links) Legt fest, welche Bilder in DataURLs umgewandelt werden sollen. Beispiel: Optimiert das CSS Quelltext <?php
wImage::rotate
Dreht ein Bild. (ab CMS-Version 011.002.222.000)
wImage::resize
Ändert die Bildgröße
wImage::getWidth
Ermittelt die Breite eines Bildes
wImage::getHeight
Ermittelt die Höhe eines Bildes
wImage::getDataUrlPlaceholder
Ermittelt eine Data-URL für einen transparenten Platzhalter
wImage::convertToJPEG
( $eventData [ 'filePath' ], 100 ); } ?> Hinweis Das heic-Format muß vom Webserver unterstützt werden (PHP GD oder ImageMagick). Zu ImageMagick kann das z.B. wie folgt über einen Systemaufruf in der PHP-Sandbox geprüft werden:
wPicture
Klasse, um responsive Bilder über das PICTURE-Element zu generieren
wImage
Klasse für Bildfunktionen
-w-editmaskExtended-mouseoverimage
Definiert, ob das Dateiauswahlfeld für den Pfad des Mouseover-Bildes angeboten wird
Pflege von Links
Link-Tags lassen sich als Ganzes über eine konfigurierbare Maske pflegen.
Hintergrundbilder global, pro Navigationspunkt oder pro Seite definieren
Hintergrundbilder können entweder global für alle Seiten, navigationsabhängig pro Navigationspunkt oder auch individuell für jede Seite definiert werden. Auch Kombinationen sind möglich. Dabei überspielt dann der navigationsabhängige Hintergrund den globalen Hintergrund und der seitenspezifische Hintergrund wiederum den navigationsabhängigen.
Copyright Angabe für Bilder umsetzen
} Die Schriftart kann durch Ablegen einer Schrift-Datei (.ttf) mit folgendem Dateipfad für die Bildgenerierung über ImageMagick oder PHP GD beeinflusst werden: /weblication/grid5/fonts/default_copyright.ttf Zu beachten: Die Größen sind nur
thumbnail
Attribute [PATH] src * Pfad des Imagefiles, aus dem das Thumbnail generiert werden soll [PATH] srcAlt Alternatives Bild, falls das angegebene Bild nicht existiert
So prüfen Sie die Personalisierung bzw. Zeitsteuerung bei Binärdateien
einer .htaccess innerhalb /[IHR-ASSETS-PROJEKT] ExpiresActive on ExpiresDefault "access plus 30 minutes" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month"
Lightbox-Darstellung beeinflussen
definieren Sie die Variable für die individuelle Lightbox-Variante ( boxPicture2 ) und weisen dieser die CSS-Klasse image2 zu. Beispiel: Auszug aus der design.js zur Definition der Lightbox-Variante boxPicture2
Inhalt des Dateiexplorers beeinflussen
" 1 " caption= " Shop " en:caption= " Shop " fr:caption= " Shop "> icon= " /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/images/element-icons/element_gallery.gif " caption= " Produktauswahl " en:caption= " Articles " fr:caption= " Articles " path=
Link-Icons (SVG) individualisieren
.isDarkBackground .isLightBackground, .isDarkBackground .isInverseBackground { a. intern: before { background-image: url ("# {$wGlobalProjectPath} /wGlobal/layout/images/links/intern.svg?stroke=# {$colorLinkIcon} ") } a. extern: before
Elemente des Mastertemplates bedingt zur Auswahl anbieten
name= " Überschrift " en:name= " Headline " icon= " /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/images/element-icons/element_headline.gif " type= " headline.text "> id= " title " type= " char.text "/> id= " display "
CSS-Rendering - Inhalte wie Bilder automatisch in passender Breite generieren
BASE (Mobile First) Projekt ist zur Bildbreitenberechnung komplett anders umgesetzt und setzt konsequent auf Responsive Images, um eine optimale Bildqualität bei gleichzeitig minimaler Bildgröße auszuliefern (zum Artikel " BASE (Mobile First):
Änderungen in Weblication® CMS Core/GRID
Version (Sicherheitsrelevantes Update) 012.008.000.000 20.06.2018 Final Version 012.007.025.000 05.06.2018 Über /wConf/images/imageMagick/@preserveMetadata = 1 kann innerhalb der wConf definiert werden, dass Metadaten beim Einsatz von
Listen
der Liste steuern: XML-Code eines Listenelements name= " Liste " en:name= " List " icon= " /deGlobal/wGlobal/layout/images/element-icons/element_list.gif " type= " list.standard "> id= " listtemplate " type= " src.file ">
Listen
steuern: XML-Code eines Listenelements name= " Liste " en:name= " List " icon= " /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/images/element-icons/element_list.gif " type= " list.standard "> id= " listtemplate " type= " src.file ">
Umsetzung einer Internetpräsenz für mobile Endgeräte in älteren Projekten
" user-scalable=no, width=device-width "/> rel= " apple-touch-icon " href= " /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/images/apple-touch-icon.png "/> rel= " apple-touch-icon " href= "
So setzen Sie ein Pflegeformular für öffentliche Benutzer um
--> select= " wd:data[@id = 'Description'] "/> <!-- web:text:stop --> class= " wEditorExtensionLabel "> Image class= " wEditorExtensionValue "> <!--web:text:start editor="file" upload="1" preview="picture" dirType="image"
Eigene Strukturelemente umsetzen
admin " time= " 1382449764 "/> name= " admin " time= " 1252018717 "/> src= " /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/images/element-icons/element_hr.gif "/> from= " " status= " on " to= " "/> value= " "/> value= " 3 "/> match= "
Änderungen in Weblication® CMS Core/GRID
09.09.2013 Der CSS-Editor merkt sich, wenn die Vorschau ansgeblendet wird. 008.000.157.000 28.08.2013 Über /wConf/images/thumbnails/@maxPixelsToResize lässt sich definieren, ab welcher Pixelanzahl Bilder nicht mehr skaliert werden, um zu
So schreiben Sie Hintergrundbilder sprachabhängig über CSS
CSS Veröffentlichungsdatum: 16. März 2011 Änderungsdatum: 26. Juli 2012 hintergrundbild hintergrundgrafik background-image css Dieser Artikel beschreibt, wie Sie ein Hintergrundbild sprachabhängig über CSS im Kopf der Datei hinterlegen. Ein
Dateiliste nach durchschnittlicher Seitenbewertung (Ranking) sortieren
if($averageRating >= $i){ print ' alt= " " width= " 13 " height= " 12 " src= " /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/images/icons/rating_star_full.gif " /> '; } else if($averageRating >= $i - 0.5){ print ' alt= " " width= " 13 " height=
Filter für den Weblication® Dateiexplorer
" Frequently required " fr:caption= " Souvent nécessaire "> ... icon= " /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/images/dir-icons/dir-content.gif " caption= " Alle Meldungen " path= " /base/aktuelles/meldungen "/> icon= "