B.Lachner wrote:Ich würde aber gerne wissen, wie ich relativ kompakt in einen Artikel ein paar Bilder einfügen kann?
Zunächst mal: Es gibt (leider) noch keine „eingebaute“ Galerie-Funktion in s9y. Ich hab das bereits angeregt, aber wie so oft müsste sich erstmal jemand finden, der es implementiert. Bis dahin muss man ein wenig basteln.
Dann sollte man noch bedenken, dass Begriffe wie „Zeile“ in Zeiten kleiner Smartphone-Bildschirme und responsiver Themes, die diese Bildschirme bedienen, nicht mehr zeitgemäß sind bzw. solche Konzepte wie „9 Bildervorschauen in 3 Zeilen“ dort eben keinen rechten Sinn mehr ergeben (was auf einem Laptop noch 3x3 sind, ist auf dem Smartphone schnell 9x1, vereinfacht gesagt).
Grundsätzlich ist zunächst einmal die Sache mit der kleinen Vorschau und den großen Bildern gar kein Problem,
das ist bereits im Kern enthalten. Wann immer man ein Bild aus der Mediendatenbank einfügt, kann man auswählen, ob man „die Vorschau“ oder „das große Bild“ im Eintrag haben möchte und (wichtig) ob das Bild ein Link sein soll. Ist (was standardmäßig voreingestellt ist, aber meiner Erinnerung nach ausdrücklich ausgewählt werden muss) ein Vorschaubild ein Link auf die große Version, ist das, was Du willst, quasi schon erledigt.
Darüber hinaus kann man einstellen, ob Bilder einen Absatz erzeugen oder links bzw. rechts vom Text (und auch ggf. von weiteren Bildern) umflossen werden sollen. Wenn Du also mehrere Vorschaubilder (die Links zu großen Versionen sind) links vom Text umflossen hintereinander in einen Eintrag einfügst, entsteht (je nach verfügbarem Platz) eine bzw. mehrere „Reihen“ von Bildern – nicht ohne Stolperfallen zwar, aber dazu gleich mehr.
Um nun zwischen den Bildern „blättern“ zu können, sollte man ein sogenanntes Lightbox-Script verwenden, welches die große Version in einem Overlay (eine Art über das Browserfenster gelegtem Fenster) darstellt und aus mehreren Bildern eine Galerie macht, durch die man blättern kann. Dazu gibt es das s9y-Plugin serendipity_event_lightbox (Lightbox für Blog Einträge mit Bildern), welches gleich mehrere solcher Scripte bereit stellt. Sofern die Bilder wie oben beschrieben eingefügt wurden, funktioniert das automagisch, übrigens auch in statischen Seiten, nicht nur in Einträgen.
Das sieht dann z.B. so aus wie
hier in meinem Blog.
B.Lachner wrote:Es sollen auch die Vorschau-Bilder also nicht alle auf der Artikel-Seite zu sehen sein.
Ich bin mir nicht ganz sicher, ob ich richtig verstehe, was Du möchtest, glaube aber, dass das nicht geht. Bestenfalls könnte man ein paar Bilder in den erweiterten Eintrag auslagern, damit sie auf Übersichtsseiten nicht angezeigt werden, aber dann würden sie dort auch nicht in der Galerie nachgeladen. Aber vielleicht erklärst Du nochmal etwas genauer, was Du damit meinst?
Nun noch kurz zu den Haken:
Das größte Problem mit solchen „improvisierten“ Galerien sind Vorschaubilder mit unterschiedlichen Höhen. Das ist technisch ein wenig schwer zu erklären, zumal es auch vom verwendeten Theme und der Bildschirmauflösung abhängt. Ich versuche mal, es zu illustrieren. Nehmen wir an, es sind 9 Bilder und das Theme lässt anhand der (einstellbaren) Größe der Vorschaubilder 3 davon pro „Reihe“ zu. Das sieht so aus:
Code: Select all
+---+---+---+
| | | |
+---+---+---+
| | | |
+---+---+---+
| | | |
+---+---+---+
Das klappt aber so eben
nur, wenn
alle Bilder gleich hoch sind. Haben die Bilder Bildunterschriften, müssten auch diese gleich „hoch“ sein (also die gleiche Anzahl Zeilen haben), und spätestens da wird es schwierig, zumindest über verschiedene Bildschirmauflösungen. Wenn man also solche Galerien verbauen möchte, empfehle ich darauf zu achten, dass stets alle Bilder (in einer Galerie) das gleiche Format und keine Bildunterschriften haben (dann sind sie aufgrund der in s9y voreingestellten Vorschaubild-Größe auch gleich hoch).
Zweites Problem: Damit diese 9 Bilder sich so anordnen, müssen sie alle links von Text bzw. vom auf sie folgenden Inhalt (hier: dem nächsten Bild) umflossen werden. In CSS heißt das „float: left;“. Idealerweise müsste man das float des letzten Bildes aufheben (das nennt sich Clearing), indem man z.B. (es gibt mehrere Methoden dafür) dem folgenden Element die Eigenschaft „clear: left;“ zuweist, was schwierig ist, weil auf so eine Galerie viele Arten Elemente folgen können. Daher ist es vermutlich sinnvoller, jede Galerie in einen div-Container zu wickeln (das würde z.B. eine integrierte Galerie-Funktion in s9y automagisch machen) und diesem bestimmte Styles zu geben. Dafür muss man allerdings
zwingend ins HTML der Eintrages, das geht nicht über einen WYSIWYG-Editor (bzw. geht schon, aber man muss dazu in die Code-Ansicht umschalten).
Ich glaube, das war's im Prinzip, aber frag um Himmels Willen gerne nach, wenn etwas unklar oder nicht ganz klar ist. Das war ziemlich viel auf einmal. Sorry, komplexes Thema.
YL