In einem WordPress Projekt kam die Frage auf, ob man statt des üblichen Header- oder Coverbildes nicht auch eine Galerie nutzen kann. Diese Galerie sollte dann allerdings die Möglichkeit bieten, dass der Klick auf eines der Bilder nicht zur Mediendatei oder zur Anhangseite, sondern zu einer thematisch passenden Seite führt. Zum Beispiel zu einem der Angebote der Website. Die Option des individuellen Links bietet die WordPress Galerie aber von Haus aus nicht. Dennoch ist es machbar. In diesem Beitrag geht es also darum, wie Sie in eine WordPress Galerie Links zu anderen Seiten einfügen.
Coverblock mit Galerieblock erstellen
Das Bild der Tierchen auf einer Grasfläche sieht vielleicht aus wie ein einfaches Bild, ist es aber nicht. Es handelt sich vielmehr um einen Coverblock, der einen Galerieblock beherbergt. Dabei nutzt der Coverblock die volle Breite und zeigt als Hintergrundbild die angedeutete Graslandschaft. Der Galerieblock ist als Vierspalter angelegt und zeigt insgesamt zwölf Bilder von Tieren mit transparentem Hintergrund in drei Reihen.
Dieser Galerieblock soll die weite Breite nutzen. Im Fall meines Themes Zakra oder der drei letzten Standardthemes Twenty Nineteen, Twenty Twenty und Twenty Twenty-One braucht man diese aber nicht zuzuordnen. Manche Themes sorgen halt schon dafür, dass sich solche Verschachtelungen passend verhalten.
Damit sich im Folgenden die beiden Elemente Coverblock und Galerieblock leichter ansprechen lassen, erhalten sie jeweils eine Klasse: .grasland
und .tiere
sind dies in meinem Fall.
In einzelnen Schritten sieht das Vorgehen so aus:
- einen Coverblock erstellen und ein Hintergrundbild zuordnen.
- dem Coverblock die Ausrichtung »volle Breite« geben.
- keine Mindesthöhe definieren.
- über das Panel »Erweitert« in der rechten Seitenspalte die Klasse hinterlegen.
- Dann in den Coverblock klicken und
/galerie
eingeben. So lässt sich dort der Galerieblock auswählen und platzieren. - Eine Galerie erstellen. In meinem Fall besteht diese aus zwölf Bildern.
- Für den Galerieblock die Spaltenanzahl in der rechten Seitenleiste festlegen. In meinem Fall sind dies vier.
- Entscheiden, ob Bilder zugeschnitten werden sollen. In meinem Fall sind sie es nicht.
- Um überhaupt schon Links zu haben, wählen Sie in der rechten Seitenspalte für Link zu die Mediendatei.
- Dem Galerieblock über das Panel »Erweitert« die passende Klasse zuordnen.
CSS für den Coverblock
Damit der Coverblock, der keine Mindesthöhe hat, auch auf Mobilgeräten nicht höher ist als nötig, braucht es ein wenig CSS:
.wp-block-cover.grasland {min-height:unset !important; padding:0; margin-top:2em !important; margin-bottom:2em !important;}
Die margin
-Angaben sorgen zudem für etwas Abstand nach oben und nach unten.
CSS für die Galerie
Wenn Sie wie ich möchten, dass die Galerie auch auf Mobilgeräten ihre vier Spalten zeigt, braucht es auch hierfür etwas CSS. Der Standard ist nämlich, dass auf Geräten kleiner als ein Tablet nur noch zwei Spalten ausgegeben werden. So erscheinen selbst so kleine Tiere wie die Maus zwar schön groß. Nur wird das ganze Konstrukt doch arg hoch. Also gibt es nur noch eine sehr kleine Maus.
Die folgende Definition funktioniert nicht nur mit dem Zakra Theme, sondern auch mit Standardthemes Twenty Nineteen / Twenty / Twenty-One. Durch die Klasse .tiere
wirken sie sich nicht auf alle Galerien aus, sondern eben nur auf diese.
.blocks-gallery-grid.tiere .blocks-gallery-item, .wp-block-gallery.tiere .blocks-gallery-item {
width: calc(25% - .75em) !important;
}
Die WordPress Galerie als HTML bearbeiten und Links einfügen
Um nun in die WordPress Galerie Links einfügen zu können, müssen Sie sie als HTML bearbeiten. Dafür klicken Sie in die Galerie und wählen oben den letzten Button mit den drei Pünktchen. Dieser »Ansicht anpassen«-Button steht jedem Block zur Verfügung und bietet bei fast jedem Block die Option, ihn als HTML zu bearbeiten.
Aber Achtung: Bevor Sie diesen Schritt wählen, sollten Sie sicher sein, dass Ihre Galerie nun genauso aussieht, wie Sie sich das vorstellen. Natürlich können Sie nun in der HTML-Bearbeitung noch alles ändern. Nur ist der Code doch recht umfangreich. Den von Hand zu bearbeiten, macht nur bedingt Freude.
In der HTML-Ansicht sieht der Galerieblock in etwa so aus:
<figure class="wp-block-gallery alignwide columns-4 tiere">
<ul class="blocks-gallery-grid">
<li class="blocks-gallery-item">
<figure>
<a href="https://www.internetkurse-koeln.de/wp-content/uploads/2021/04/hahn.png">
<img src="https://www.internetkurse-koeln.de/wp-content/uploads/2021/04/hahn.png" alt="Hahn Piktogramm" data-id="..." data-full-url="https://www.internetkurse-koeln.de/wp-content/uploads/2021/04/hahn.png" data-link="https://www.internetkurse-koeln.de/?attachment_id=..." class="wp-image-..."/></a>
</figure>
</li>
<!--- Es folgen elf weitere Code-Blöcke dieser Art. Hier nur noch der letzte, der den Hasen zeigt. --->
<li class="blocks-gallery-item">
<figure>
<a href="https://www.internetkurse-koeln.de/wp-content/uploads/2021/04/hase.png">
<img src="https://www.internetkurse-koeln.de/wp-content/uploads/2021/04/hase.png" alt="Hase Piktogramm" data-id="..." data-full-url="https://www.internetkurse-koeln.de/wp-content/uploads/2021/04/hase.png" data-link="https://www.internetkurse-koeln.de/?attachment_id=..." class="wp-image-..."/>
</a>
</figure>
</li>
</ul>
</figure>
Der Code zeigt an einigen Stellen drei Pünktchen. Hier erscheint die ID des jeweiligen Bildes. Die habe ich hier mal weggelassen. Wichtiger ist jedoch: Wenn Sie für die einzelnen Bilder bereits Links zur Mediendatei zugeordnet haben, ist die Auszeichnung für Links bereits vorhanden. Sie müssen hier jetzt nur noch die Adressen ersetzen.
In meinem Beispiel könnte ich aus dem Link zur Mediendatei des Hahns (vierte Zeile im Code oben)
<a href="https://www.internetkurse-koeln.de/wp-content/uploads/2021/04/hahn.png">
einfach den Link zu einer anderen Seite meiner Website, also zum Beispiel zur Kontaktseite einfügen:
<a href="https://www.internetkurse-koeln.de/kontakt/">
Möglich wäre es hier natürlich auch, zu einer externen Seite zu verlinken.
Versuch der Blockwiederherstellung
Sobald Sie die erste Änderung an dem Galerie-Code vorgenommen haben, wird WordPress/Gutenberg irritiert reagieren. Der Code hat sich verändert, also bietet das System Ihnen den »Versuch der Blockwiederherstellung« an. Das aber ignorieren Sie. Mittels Klick auf die drei Pünktchen (»Mehr Optionen«) daneben entscheiden Sie sich stattdessen für die Umwandlung des Galerieblocks in einen Individuelles HTML-Block. Sie wählen also: in HTML umwandeln.
Nun erscheint in Ihrem Coverblock der ganze HTML-Code des Galerieblocks. Das sieht aber gar nicht mehr gut aus, finden Sie? Mag sein. Browsern ist das wurscht. Browser sehen ohnehin nur das HTML hinter der hübschen Ansicht, die sie für den Rest der Welt umsetzen.
Der wesentliche Unterschied zu dem vorherigen Galerieblock: In diese Ansicht Ihrer WordPress Galerie konnten Sie Links einfügen.
WordPress Galerie nach dem Einfügen von Links
Verlinkt habe ich hier übrigens nur den Hahn, die Katze und den Hasen. Die sind im Moment nur erkennbar dadurch, dass aus dem Mouse-Zeiger ein Händchen wird. Denkbar sind hier natürlich Hover-Effekte wie zum Beispiel ein Overlay. Für den Moment belassen wir es aber bei dem Händchen.
Die Links für die anderen Tiere, die ja nur ihre Mediadatei gezeigt hätten, habe ich gelöscht.
Aber Achtung beim Löschen eines solchen Links: Zur Auszeichnung eines Links gehört nicht nur das öffnende <a href="...">
, sondern auch der schließende Teil </a>
. Wenn Sie den vergessen… Nun ja, HTML ist sehr streng und verzeiht solche Fehler nicht. Deshalb immer sehr sorgsam arbeiten, sonst erhalten Sie seltsame Ergebnisse.
Beitragsbilder: Britta Kretschmer
Schreibe einen Kommentar