In WordPress ein Bild für eine große Gallerie anzeigen

In WordPress ein Bild für eine große Gallerie anzeigen ist standardmäßig nicht vorgesehen. Es werden immer alle Bilder einer Gallerie in einer bestimmten selbst bestimmter Anzahl von Reihen dargestellt. Dieses Verhalten lässt sich mit zwei Zeilen CSS Magie ändern.

Bildergallerien sind praktisch, die Floskel „ein Bild spricht mehr als tausend Worte“ kommt nicht von ungefähr. Oder nennen wir es doch beim Namen, Bilder sind auch hübsch anzusehen und lockern den fließenden Text ein wenig auf. Ich nutze gerne ein zwei Bilder im Text, aber würde mich im  Normalfall nicht selbst so weit aus dem Fenster lehnen und ein Plugin installieren, welches eine professionelle Galleriefunktion mit eigener Tabelle in dem DBMS in meinem Blog übernimmt. Das würde eine eine weitere Pflege und eine weitere Abhängigkeit zu einem Entwickler inkl Vertrauen in fremden Code bedeuten, und natürlich auch den damit eingeführten Abhängigkeiten aus teilweise fremden Quellen. TimThumb hat hier sehr gut gezeigt wohin das führen kann.

Mir reichte am Anfang die wirklich magere Galleriefunktion von WordPress, welche ich noch mit dem Plugin Responsive Lightbox by dFactory ein wenig mehr in den Vordergrund rückte. Ich gebe die Hoffnung nicht auf, dass hier vom Team der Entwickler von WordPress doch ein wenig mehr Liebe an den Code für die Darstellung der Bilder verteilt wird und sich die Gallerie doch ein wenig verbessert. In dem Artikel Da war doch noch das Ubuntuphone BQ Aquarius E 5 HD waren dann doch ein paar Bilder mehr als gedacht für den Artikel wichtig, welches mich nach einer Lösung suchen lassen hat [1]. Nach ein wenig Recherche hatte ich den Artikel Use one image to link to WordPress galleries von Rob Griffiths gefunden, welcher sich der noch fehlenden Funktion für die internen Gallerie von WordPress mit Hile einem einfachen Kniff in CSS annimmt.

In WordPress ein Bild für eine große Gallerie anzeigen

Ich fasse den Artikel nur in den Grundzügen grob zusammen und verweise auf seinen Blogartikel. Da leider einige Funktionen in dem Artikel von Rob Griffiths von WordPress in der Anzeige verschluckt werden habe ich hier nochmal kurz den Weg skizziert. die Idee ist einfach gute Lösung und einfach zu implementieren. Vielleicht sollte man noch selbst einen Button für den wysiwygEditor einfügen. Die Idee kann natürlich via nth-child() Selector abgeändert, erweitert, werden.

Diesen Abschnitt in die CSS des Childthemes, oder wenn möglich in die Eigenschaften des Themes einfügen.

.restrict .gallery-item {
	display: none;
}

.restrict .gallery-item:first-child {
	display:block;
}

Nun kann eine Gallerie erstellt und eingefügt werden und ein Wechsel in den Texteditor muss erfolgen.

Hier wird nun der Text um den nötigen div-tag erweitert, wenn nötig kann auch hier ein float , z.B. style=“float:left“, der Klasse hinzugefügt werden.

[gist id=“85c7fc5c61eefafc4d5635dc5e5d7eb9″ file=“gistfile1.txt“]

[gist id=“85c7fc5c61eefafc4d5635dc5e5d7eb9″ file=“gistfile2.txt“]

 

 

 

 

 

[1] Mittlerweile nutze ich eine andere Lösung

FooGallery – Image Gallery WordPress Plugin
FooGallery – Image Gallery WordPress Plugin
In WordPress ein Bild für eine große Gallerie anzeigen
Markiert in:             

Schreibe einen Kommentar

You have to agree to the comment policy.