Als ich anfing, mit WordPress zu arbeiten, dachte ich, für die Darstellung einer Bildergalerie bräuchte es ein Plugin. Deshalb habe ich großes Verständnis für Kunden, die demselben Irrtum unterliegen. Und zudem mit dem Plugin, das ihnen vielleicht jemand genannt hat, nicht parat kommen. Dabei bietet WordPress von Haus aus eigentlich alles, was es für eine Galerie braucht. Weniger bekannt ist aber wahrscheinlich, dass dahinter der WordPress Galerie Shortcode steht. Auch ist wohl nicht immer klar, wie weitgehend sich Einfluss auf die Bildgröße der Vorschaubilder nehmen lässt. Schauen wir uns beides an.
Eine WordPress Galerie erstellen
Eine Galerie zu erstellen ist wahrlich einfach. WordPress stellt die Funktion unter Dateien hinzufügen zur Verfügung. Dort haben Sie nicht nur die Möglichkeit, ein einzelnes Bild für Ihren Beitrag auszuwählen, sondern eben auch, eine Galerie zu erstellen. Nachdem Sie die gewünschten Bilder ausgewählt haben, können Sie die Galerie auch weiter bearbeiten und so die wesentlichen Parameter bestimmen: Größe, Reihenfolge, Spaltenzahl und wohin der Klick auf ein Bild führen soll.
Hinter allem steht tatsächlich der WordPress Galerie Shortcode. Sicherlich ist es für die meisten Nutzer komfortabler, eine Galerie mittels der oben beschriebenen Funktion zu erstellen und zu bearbeiten. Dennoch ist es nicht uninteressant zu wissen, dass sich alles auch via Shortcode erstellen und bearbeiten lässt. Denn hier gibt es zum Beispiel die Möglichkeit, speziell Einfluss auf die Größe der Vorschaubilder zu nehmen. Aber dazu später mehr.
Der WordPress Galerie Shortcode
Wie jeden anderen Shortcode erkennen Sie den WordPress Galerie Shortcode an den eckigen Klammern: [ ... ] Zu sehen bekommen Sie diesen Shortcode allerdings nur, wenn Sie die Ansicht Ihrer Beitragsbearbeitung von Visuell auf Text umstellen. Die Möglichkeit hierfür finden Sie oberhalb der Beitragstextbearbeitung.
Der Textmodus stellt Ihren Text unformatiert dar und zeigt darüber hinaus auch einige HTML-Auszeichnungen wie zum Beispiel <h2> oder <h3> für Überschriften der zweiten oder der dritten Ordnung. Entsprechend geht der Textmodus mit Bildern oder Galerien um. Statt der Bilder sehen Sie deren HTML-Auszeichnung beziehungsweise besagten Shortcode:
[gallery columns="4" ids="1488,1487,1486,1489"]
Mit dem Shortcode wird erkenntlich, dass WordPress die Bilder einer Galerie mittels ihrer ID aufruft. Die Galerie im Beispiel zeigt ihre Bilder in vier Spalten. Da es im konkreten Fall nur vier Bilder sind, stehen die halt in einer Reihe nebeneinander. Wollte ich die vier Bilder in zwei Spalten anzeigen, würde es columns="2" lauten.
Sortierung ändern
Weitere Angaben sind möglich, so zum Beispiel jene, die die Sortierung bestimmt:
[gallery columns="4" ids="1488,1487,1486,1489" orderby="ID"]orderby="ID" sorgt im konkreten Fall dafür, dass die Bilder nicht länger in der Sortierung 1488 1487 1486 1489 erscheinen, sondern als 1486 1487 1488 1489.
Kommt nun noch ein order="ASC" beziehungsweise order="DESC" hinzu, ist die Sortierung nach ID auf- oder absteigend.
Andere Sortierungen sind möglich, so zum Beispiel nach dem Titel orderby="title" oder dem Veröffentlichungsdatum orderby="post_date". orderby="rand" sorgt für eine zufällige Sortierung.
Link ändern
Der Klick auf ein Bild kann bei WordPress entweder zu der Anhangseite des Bildes führen (= default, das heißt keine Angabe im Shortcode) oder öffnet die Mediendatei: link="file". Möglich ist auch, dass der Klick gar nichts bewirkt: link="none".
Größe der Vorschaubilder ändern
Mit size=" " lässt sich die Größe der Vorschaubilder festlegen. Wobei Vorschaubild hier die Darstellung der anklickbaren Bilder meint. Grundsätzlich möglich sind die vier bekannten Größen thumbnail, medium, large und full, wobei thumbnail der Default-Wert ist. Mit anderen Worten: Zeigt der Shortcode keine Definition für die Größe, wählt WordPress die Darstellung als thumbnail.
Soweit sind dies alles Optionen, für die es nicht wirklich das Arbeiten mit dem Shortcode braucht. Nun kann es aber gerade bei der Festlegung der Größe zu unschönen Effekten kommen. Hierzu ein Beispiel und die passenden Lösungen.
Das Theme Hamilton und seine Galerien
Ich habe ein neues Lieblingstheme. Es heißt Hamilton und stammt von dem schwedischen Entwickler Anders Norén. Das Theme gefällt mir unter anderem gerade wegen seiner Galerien sehr gut. Dabei produziert es aber doch ein kleines Problem. Wenn man die Darstellung des thumbnail wählt, greift es eben wie jedes andere Theme auf die Standardgröße 150 x 150 px zurück und bläst diese dann so sehr auf, dass die Bilder unscharf erscheinen. Was tun?
Bemerke: Die beiden folgenden Lösungsvorschläge beeinflussen nicht bereits in der Mediathek vorhandene Bilder, sondern nur alle Bilder, die Sie zukünftig hochladen. Mit dem Plugin Regenerate Thumbnails lassen sich die alten Bilder aber entsprechend neu berechnen.
Lösung 1: Thumbnail Größe grundsätzlich ändern
Unter Einstellungen > Mediathek können Sie grundsätzlich festlegen, in welchen Größen WordPress Bilder beim Hochladen produzieren soll. Zu Ihrem Bild mit den vollständigen Abmessungen kommen so also immer eine thumbnail-, eine medium– und eine large-Variante hinzu.
Der Standardwert für das thumbnail ist 150 x 150 px. Das lässt sich ändern. Bedenken Sie aber: Wenn Sie hier nun andere Zahlen eintragen, sagen wir: 300 x 300 px, dann produziert WordPress für Sie Bilder als thumbnail, deren Dateigröße doppelt so groß ist wie normalerweise. Und dies macht WordPress fortan immer, bei jedem Bild, unabhängig davon, welches Theme Sie benutzen.
Wenn Sie so wie ich öfter mal mit neuen Themes arbeiten oder sich noch nicht auf eines festlegen wollen, macht dieses Vorgehen nicht so viel Sinn. Außerdem ist es zumindest für mich eine Frage des Prinzips: Es muss doch möglich sein, nur im Rahmen des aktiven Themes die Auflösung für das Vorschaubild der Galerie neu festzulegen. Und das funktioniert so:
Bemerke: Für dieses Vorgehen braucht es ein Child Theme, um sicherzustellen, dass die vorgenommene Änderung die Aktualisierung des Parent Themes übersteht.
Lösung 2: eigene Bildgröße für das aktive Theme festlegen und in der Galerie nutzen
Themes können eigene Bildgrößen produzieren. Das machen sie mit ihrer functions.php. Dort steht dann wie im Fall von Hamilton zum Beispiel
// Custom Image Sizes add_image_size( 'hamilton_preview-image', 1200, 9999 ); add_image_size( 'hamilton_fullscreen-image', 1860, 9999 );
Das sind jedenfalls die beiden Bildformate, mit denen das Theme arbeitet und die es zusätzlich zu den üblichen Größen beim Hochladen produziert. Beide sind sie sehr groß, das eine 1200 px, das andere gar 1860 px breit. Die 9999 sorgt jeweils für eine unbegrenzte Höhe.
Zusätzlich zu diesen Werten könnte man nun also noch eine weitere Bildgröße produzieren lassen. Da dies aber unbedingt im Rahmen der functions.php eines Child Themes passieren muss, braucht es ein kleines bisschen mehr Code. Die Angabe für die zusätzliche Bildgröße soll sich schließlich zu den bereits im Parent Theme vorhandenen Angaben gesellen.
function hamilton_child_theme_setup() {
add_image_size('hamilton_galerie', 300, 300, array( 'center', 'center' ));
}
add_action( 'after_setup_theme', 'hamilton_child_theme_setup', 11 );Fortan wird Hamilton bei jedem Hochladen eines Bildes auch eine Version erstellen, die das Ausgangsbild auf die zentralen 300 x 300 px zuschneidet.
Die neue Bildgröße im WordPress Galerie Shortcode nutzen
Tatsächlich lässt sich nun diese neue Bildgröße im Rahmen einer Galerie nur über den WordPress Galerie Shortcode nutzen. Das ist dann aber auch nicht schwer: size="hamilton_galerie" sorgt dafür, dass die Galerie alle Bilder in der von mir festgelegten Größe von 300 x 300 px anzeigt. Im ganzen Satz lautet der Shortcode dann:
[gallery link="file" columns="4" ids="1488,1487,1486,1489" orderby="ID" size="hamilton_galerie"]
Beitragsbild: Britta Kretschmer
Schreibe einen Kommentar