Volltextsuche
Anpassen einer Bildergalerie Variante über CSS-Only
Nutzbar ab: Version Veröffentlichungsdatum: 25. Februar 2016 Änderungsdatum: 05. Mai 2023 css css-only weblics bildergalerie galerie CSS-Only Varianten von Weblics® können Sie über CSS individuell anpassen Mit den Weblics® stehen Ihnen
Weblication® Entwicklerbereich
Kantine verfügbar, mit welchem sich Essen einer Kantine bzw. Mensa buchen lassen. 13 September BASE für Version 18: Bildergalerie 1.0.106: Über die CSS-Only Einstellung -w-option-resolutionFromPDF:300; lässt sich die Auflösung von Bildern
RSS: Weblication® Mobile First Changelogs
verfügbar, mit welchem sich Essen einer Kantine bzw. Mensa buchen lassen. 13.09.2023 16:26 BASE für Version 18: Bildergalerie 1.0.106: Über die CSS-Only Einstellung -w-option-resolutionFromPDF:300; lässt sich die Auflösung von Bildern
Einsatz von Isotope Darstellungen für Bildergalerien
Nutzbar ab: Version Veröffentlichungsdatum: 27. Oktober 2015 Änderungsdatum: 04. November 2021 weblication liste bildergalerie jquery plugin isotope mauerwerk kategorienfilter kategorien-filter Unterschiedliche Möglichkeiten, um Bildergalerien
Bildergalerien manuell sortieren
nicht automatisch zum Artikel Bildergalerien manuell sortieren
Empfehlung beim Einsatz von Blätterlisten
beim Einsatz von Blätterlisten Veröffentlichungsdatum: 21. Oktober 2015 Änderungsdatum: 19. Januar 2022 liste bildergalerie pagination blätterliste cache Listen mit Pagination (Seitennummerierung) sollten ab einer gewissen Anzahl mit Bedacht
Platzhalter beim Erstellen von Dateien in Vorlagen nutzen
können Sie auf Platzhalter zurückgreifen. Auf diese Weise können Sie eine Weblication® CMS Liste (z.B. Bildergalerie) gleich mit den entsprechenden Pfaden zum Bildverzeichnis setzen. Beispiel: Dateivorlage für eine neue Bildergalerie
-w-animation
Beschreibung Einsatzgebiet FÜR BANNER: [slideHorizontal|slideFromRight| fadeIn|overlapFromRight|overlapFromTop] FÜR BILDERGALERIE: [collage|carouselhorizontal|ticker| scrollhorizontal|slideFromRight| slidevertical|overlapFromRight|
-w-animation-direction
Laufrichtung durchlaufender Galerien gallery.wFilelist.php Beispiele / Anwendungsfälle Beispiel 1: Definiert für die Bildergalerie-Variante 43 die Laufrichtung von links nach rechts (ltr) .listPictureGallery_var43 .listEntriesPreview .listEntry { /*
Beispiele für das Suchen & Ersetzen Werkzeug
Ausdrücken ersetzen/löschen Beispiel 8: Mit regulären Ausdrücken mehrere wd:object Tags ausfindig machen Beispiel 9: Bildergalerie 1.x auf Weblic-Version 2.x anpassen Beispiel 10: Fehlerhafte Dokumentenerweiterung anpassen Beispiel 11: Jahreszahlen
-w-addsrc
um den Link zur ausgelesenen Datei gallery.wFilelist.php Beispiele / Anwendungsfälle Beispiel 1: Ergänzt in der Bildergalerie-Variante 53 den Download-Link zur ausgelesenen Datei .listPictureGallery_var53 .listEntriesPreview .listEntry { /* ...
-w-addsize
die Dateigröße der ausgelesenen Datei gallery.wFilelist.php Beispiele / Anwendungsfälle Beispiel 1: Ergänzt in der Bildergalerie-Variante 53 die Dateigröße zur ausgelesenen Datei .listPictureGallery_var53 .listEntriesPreview .listEntry { /* ...
-w-adddescription
soll gallery.wFilelist.php Beispiele / Anwendungsfälle Beispiel 1: Definiert, daß die Beschreibung zu einem Bild der Bildergalerie-Variante 2 hinzugefügt wird .listPictureGallery_var2 .listEntriesPreview .listEntry { /* ... */ ; -w-adddescription:
-w-usefancybox
genutzt werden soll gallery.wFilelist.php Beispiele / Anwendungsfälle Beispiel 1: Aktiviert zur Bildergalerie-Variante 2 die Nutzung der Fancybox .listPictureGallery_var2 .listEntriesPreview .listEntry { /* ... */ ;
-w-showlightboxtitle
Bildtitel in der Lightbox angezeigt wird gallery.wFilelist.php Beispiele / Anwendungsfälle Beispiel 1: Deaktiviert zur Bildergalerie-Variante 2 die Ausgabe des Bildtitels in der Lightbox .listPictureGallery_var2 .listEntriesPreview .listEntry { /* ...
-w-showEditbuttonsPreview
angezeigt werden soll gallery.wFilelist.php Beispiele / Anwendungsfälle Beispiel 1: Definiert zur Bildergalerie-Variante 2, daß die Vorschaubilder mit einer Schaltfläche für die Bearbeitung versehen werden
-w-picture-background-color
Beispiele / Anwendungsfälle Beispiel 1: Setzt die Hintergrundfarbe für das zu generierende Vorschaubild in Bildergalerie-Variante 999 .listPictureGallery_var999 .listEntries .listEntryImage { /* ... */ ; -w-picture-background-color:
-w-onclick
einen Listeneintrag im Vorschaubereich gallery.wFilelist.php Beispiele / Anwendungsfälle Beispiel 1: Deaktiviert zur Bildergalerie-Variante 41 das onclick-Ereignis für einen Listeneintrag im Vorschaubereich .listPictureGallery_var41
-w-entryselected
Listeneintrages gallery.wFilelist.php Beispiele / Anwendungsfälle Beispiel 1: Setzt das aktuell ausgewählte Bild der Bildergalerie-Variante Karussell (var11) mittig .listPictureGallery_var11 .listEntries { /* ... */ ; -w-entryselected: middle} Zu
-w-editmaskExtended-picturepreviewmode
Beispiele / Anwendungsfälle Beispiel 1: Aktiviert die Auswahlbox zur Auswahl 'Darstellungsart der Vorschaubilder' zur Bildergalerie-Variante 0 .listPictureGallery_var0 { /* ... */ ; -w-editmaskExtended-picturepreviewmode: yes; /* ... */ }
-w-editmaskExtended-picturepreviewaspectratio
/ Anwendungsfälle Beispiel 1: Aktiviert die Auswahlbox zur Auswahl 'Seitenverhältnis der Vorschaubilder' zur Bildergalerie-Variante 2 .listPictureGallery_var2 { /* ... */ ; -w-editmaskExtended-picturepreviewaspectratio: yes; /* ... */ }
-w-editmaskExtended-picturemode
Beispiele / Anwendungsfälle Beispiel 1: Aktiviert die Auswahlbox zur Auswahl 'Darstellungsart der Großbilder' zur Bildergalerie-Variante 0 .listPictureGallery_var0 { /* ... */ ; -w-editmaskExtended-picturemode: yes; /* ... */ } Listenoptionen
-w-editmaskExtended-picturecreatehd
/ Anwendungsfälle Beispiel 1: Deaktiviert die Auswahlbox zur Auswahl 'HD Versionen der Bilder generieren' zur Bildergalerie-Variante 32 .listPictureGallery_var32 { /* ... */ ; -w-editmaskExtended-picturecreatehd: no; /* ... */ } Listenoptionen
-w-editmaskExtended-pictureaspectratio
Beispiele / Anwendungsfälle Beispiel 1: Aktiviert die Auswahlbox zur Auswahl 'Seitenverhältnis' zur Bildergalerie-Variante 0 .listPictureGallery_var0 { /* ... */ ; -w-editmaskExtended-pictureaspectratio: yes; /* ... */ }
-w-editmaskExtended-limitpages
Beispiele / Anwendungsfälle Beispiel 1: Aktiviert die Auswahlbox zur Auswahl 'blätterbare Seiten' zur Bildergalerie-Variante 2 .listPictureGallery_var2 { /* ... */ ; -w-editmaskExtended-limitpages: yes; /* ... */ } Listenoptionen
-w-editmaskExtended-entriespreviewperrow
Beispiele / Anwendungsfälle Beispiel 1: Aktiviert die Auswahlbox zur Auswahl 'Bilder pro Zeile' zur Bildergalerie-Variante 2 .listPictureGallery_var2 { /* ... */ ; -w-editmaskExtended-entriespreviewperrow: yes; /* ... */ }
-w-editmaskExtended-animationzoom
gallery.wFilelist.php Beispiele / Anwendungsfälle Beispiel 1: Aktiviert die Auswahlbox zur Auswahl 'Zoomfaktor' zur Bildergalerie-Variante 23 .listPictureGallery_var23 { /* ... */ ; -w-editmaskExtended-animationzoom: yes; /* ... */ } Listenoptionen
-w-create-hd
werden soll gallery.wFilelist.php Beispiele / Anwendungsfälle Beispiel 1: Definiert, daß die Vorschaubilder der Bildergalerie-Variante 32 in HD-Qualität generiert werden sollen .listPictureGallery_var32 .listEntriesPreview .listEntryImage {
-w-animation-zoom
mit Punkt getrennt (z.B. 1.8) gallery.wFilelist.php Beispiele / Anwendungsfälle Beispiel 1: Definiert für die Bildergalerie-Variante 23 den Zoomfaktor des Bildes in Großansicht .listPictureGallery_var23 .listEntries .listEntry { /* ... */ ;
Anpassen einer Bannerslider Variante über CSS-Only
der Anpassung: Banner-Variante 40 (Bild, mehrspaltiger Teasesr unten) per Klick Beispiel: Auszug aus der design.css zur Bildergalerie-Variante 0 (Großansicht mit Diavorschau horizontal) /* ... */ .listBannerSlider_var40 .listEntriesPreview .listEntry {
Wasserzeichen / Copyright in Bilder setzen
3. Über das Bild-Element und Projekt-Funktionen Projekt-Basis BASE Classic Projekt-Basis BASE (Mobile First) 4. Über Bildergalerien Projekt-Basis BASE Classic Projekt-Basis BASE (Mobile First) 5. Über Listen Projekt-Basis BASE (Mobile First) Hinweise
-w-jquery
Endung) eines Bildes (Umsetzung ohne data-Attribut) /* ... */ /* Anzeige des Dateinamens ohne Endung (z.B. CIMG0815.JPG) - (Bildergalerie Variante 0) */ .listPictureGallery_var0 .listEntries .listEntryTitle { display: block; -w-jquery: var urlPath = jQuery
CSS-Only Varianten anpassen
Anwendungen zur Verfügung, die Sie bei Bedarf individuell anpassen können. Aktuell finden Sie zu Weblics® wie u.a. Bildergalerie Bild Inhaltsbox Inhaltsbereich Akkordeon-Container Inhaltscontainer mit Registerlaschen Liste Mehrspaltiger
Weblics® 2.x in BASE 1.x nutzen
wir, alle anderen Weblics® auch auf aktuellsten Stand 2.x zu bringen. Dies gilt vor allem für die Weblics® " Bild ", " Bildergalerie ", " Teaser, Banner, Slider ", " Liste " und " Formular ". Beachten Sie dabei, dass ggf. die Bildergalerie- bzw.
-w-add-events
onclick-Event dem Element mit der Klasse listPictureGallery_var31 hinzugefügt, so dass sich die Vollbildansicht der Bildergalerie öffnet, sobald man diese anklickt. zu Beispiel 1: Über das Ereignis aufgerufene Funktion function
Bildbreiten: Für Bilder abhängig von Position eindeutige Id setzen
möglich jedem Bild eine eindeutige Bildbreiten-Id zuzuweisen. Abhängig von den ausgewählten CSS-Klassen wird in den Bildergalerien in der Regel für alle Bilder eine Bildbreiten-Id ermittelt. Grid-Layouts sind zum Beispiel Listen, bei der
-w-registerJs
/* ... */ } Weiterführende Links Einsatz von Isotope und Masonry für Bildergalerien Zu beachten: Diese CSS-Only Referenz bezieht sich vorwiegend auf BASE Classic Projekte und Weblics® ! BASE (Mobile
-w-editmaskExtended-initdelay
0 .listBannerSlider_var0 { /* ... */ ; -w-editmaskExtended-initdelay: yes; /* ... */ } Listenoptionen Bildergalerie - Animation verzögert starten Zu beachten: Diese CSS-Only Referenz bezieht sich vorwiegend auf BASE Classic Projekte und
-w-editmaskExtended-fadetime
99 .listBannerSlider_var99 { /* ... */ ; -w-editmaskExtended-fadetime: yes; /* ... */ } Listenoptionen Bildergalerie - Automatisch wechseln (nach x Sekunden) Zu beachten: Diese CSS-Only Referenz bezieht sich vorwiegend auf BASE Classic
Dateibearbeitung
Strukturelemente können aber auch komplexe Funktionen beinhalten (beispielsweise eine Liste oder das Weblic Bildergalerie). Weitere Informationen zu Strukturelementen finden Sie hier: Der Struktureditor und XSL-Stylesheets für
Globale Projekteinstellungen
wie Inhaltscontainer mit jQuery-Tab Funktion, konfigurierbare Leerzeilen etc. Komplexere Anwendungen wie eine Bildergalerie etc. Eine vollständige Auflistung aller Weblics finden Sie unter www.weblics.de oder über die Weblics-Verwaltung in
BASE Neuinstallation mit Übernahme der Inhalte
Weblics® 2.x gibt, die diese individuellen Elemente künftig überflüssig machen. Beachten Sie , daß ggf. die Bildergalerie- bzw. Teaser-/Banner-Elemente in den Seiten nochmals erneut eingebunden und gegen die bisherigen Elemente ersetzt werden
So filtern Sie die Auswahl der Listen-Templates
(z.B. Teaser-Banner, Teaser-Slider) search Definiert Suche-Listen. gallery.standard Definiert Bilder-Listen (z.B. Bildergalerien) Diese Typen können Sie individuell erweitern bzw. anpassen. Weiterführende Links So verwenden Sie ein eigenes Skript
Weblication® CMS Version 9 - Start Betaphase
Damit ist die Definition möglich: Wer darf welche CSS-Only Variante in Seite einfügen So legen Sie fest, dass z.B. Bildergalerien X nur Admins in den Editor einfügen können Zusätzlicher Cache Keine Verzögerung beim Speichern durch Bereinigung
Filtermöglichkeiten über die Listenoptionen in Dateilisten
für Veranstaltungen - dynamisch Filter für Veranstaltungen - statisch Nur Kommentierte Seiten Nur Seiten, die eine Bildergalerie enthalten Frei definierbarer Filter PHP Callback Funktion PRE, um z.B. eigene Filter zu realisieren PHP Callback
So beeinflussen Sie die Fancybox-Einstellungen beim Bildelement
im Vordergrund. Standardmässig ist dies ohne abdunkeln des Hintergrundes umgesetzt. Wollen Sie - ähnlich bei diversen Bildergalerien - den Hintergrund verdunkeln, können Sie das direkt über die in der BASE mitgelieferte design.js beeinflussen. Tipp:
Projektumstieg von BASE Classic auf BASE (Mobile First)
passende Weblics® gibt, die diese individuellen Elemente künftig überflüssig machen. Beachten Sie , daß ggf. die Bildergalerie- bzw. Teaser-/Banner-Elemente in den Seiten nochmals erneut eingebunden und gegen die bisherigen Elemente ersetzt werden
BASE (Mobile First): Responsive Bilder
der Responsive Bilder Bilder werden als Einzelelemente, Vorschaubildern in Listen, Bannerbilder oder als Bildergalerien dargestellt. In allen Fällen setzt Weblication auf das HTML5 Picture-Tag, um bei Bedarf unterschiedliche Bildgrößen
Support und guter Service
die aktuellste Version des Weblics® beheben lässt. Dies gilt sowohl für Anwendungen wie den Veranstaltungskalender, Bildergalerie, wie auch das Bildelement, Liste Standard, etc. Die Weblics® Verwaltung zeigt Ihnen, ob Änderungen in einer Anwendung
RSS: Weblication® Mobile First Changelogs Version 17
02.03.2023 15:03 BASE für Version 17: Liste 1.0.135: Parameter zum Blättern lassen sich nun auch in Bannern und Bildergalerien festlegen. 02.03.2023 09:56 BASE für Version 17: Bedingter Inhaltscontainer für PHP 1.0.90: Bedingte PHP-Container