Viele Themes unterstützen die verschiedenen Post-Formate von WordPress, wie etwa den Typ „Galerie“. Praktisch ist bei diesem Post-Format, wenn automatisch das erste Bild aus der Galerie angezeigt wird. Wie ihr das umsetzen könnt, zeige ich euch in diesem Beitrag.
Die Vorbereitung
Falls euer Theme bereits eine content-gallery.php-Datei enthält, könnt ihr diesen Part überspringen.
Ich werde den Prozess hier am Beispiel meines neuen Themes „Bornholm“ erklären und ganz am Anfang beginnen. Zuerst muss, falls noch nicht geschehen, in der functions.php-Datei diese Zeile eingefügt werden, um das Post-Format „Galerie“ zu aktivieren:
add_theme_support( 'post-formats', array( 'gallery' ) );Code-Sprache: PHP (php)Als nächstes muss eure index.php-Datei so aufgebaut sein, dass sie auf die content-*-Dateien zugreift. Bei den meisten Themes wird das bereits der Fall sein, genau wie die Registrierung der Post-Format-Unterstützung. Bei meinem Theme sieht die index.php-Datei wie folgt aus:
<?php get_header();? >
<main role="main">
<?php if ( have_posts() ) {
/* Start the Loop */
while ( have_posts() ) {
the_post();
get_template_part( 'content', get_post_format() );
}
}
the_posts_pagination( array( 'type'=>'list' ) ); ?>
</main>
<?php get_sidebar();
get_footer();Code-Sprache: HTML, XML (xml)Wichtig ist für unseren Fall diese Zeile innerhalb der Loop:
get_template_part( 'content', get_post_format() );Code-Sprache: JavaScript (javascript)Wenn ihr die in eurer index.php-Datei nicht vorfindet, solltet ihr folgendermaßen vorgehen können: Kopiert den Code, der in eurer Datei anstelle der gerade gezeigten Zeile steht in eine neue Datei content.php. Anschließend ersetzt ihr den Teil in der index.php durch die oben stehende Zeile. Falls ihr diese Änderung vornehmen musstet, testet jetzt erst Mal, ob das Theme noch wie vorher funktioniert.
Als Nächstes müssen wir noch eine content-gallery.php-Datei erstellen. Diese wird von WordPress dann zum Anzeigen der Galerien in der Blog-Übersicht genutzt.
Die Galerie-Bilder ermitteln und speichern
Beschränkt auf die hier wesentlichen Bestandteile sieht die content-gallery.php-Datei meines Themes so aus:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header clearfix">
<?php
$images = bornholm_get_gallery_images( $post->ID );
bornholm_gallery_featured_image ( $images, $post );
?>
</header>
</article>Code-Sprache: JavaScript (javascript)Wichtig sind diese beiden Zeilen:
Code-Sprache: PHP (php)$images = bornholm_get_gallery_images( $post->ID ); bornholm_gallery_featured_image ( $images, $post );
Die erste Zeile holt sich die Bilder der Galerie(n) des Beitrags und mit der zweiten Zeile wird das erste davon ausgegeben. Damit das funktioniert, müssen wir die zwei Funktionen natürlich noch erstellen. Das machen wir in der functions.php-Datei. Die Funktion zum Holen der Bilder hat mir freundlicherweise Thomas Scholz geschrieben, ich habe sie lediglich an ein paar Stellen angepasst. Fertig sieht die Funktion so aus:
function bornholm_get_gallery_images( $post_id ) {
$post = get_post( $post_id );
// Den Beitrag gibt es nicht, oder er ist leer.
if ( ! $post || empty ( $post->post_content ) ) {
return array();
}
$galleries = get_post_galleries( $post, false );
if ( empty ( $galleries ) ) {
return array();
}
$ids = array();
foreach ( $galleries as $gallery ) {
if ( ! empty ( $gallery['ids'] ) ) {
$ids = array_merge( $ids, explode( ',', $gallery['ids'] ) );
}
}
$ids = array_unique( $ids );
if ( empty ( $ids ) ) {
$attachments = get_children( array(
'post_parent' => $post_id,
'post_status' => 'inherit',
'post_type' => 'attachment',
'post_mime_type' => 'image',
'order' => 'ASC',
'orderby' => 'menu_order',
) );
if ( empty ( $attachments ) ) {
return array();
}
}
$images = get_posts(
array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'orderby' => 'post__in',
'numberposts' => 999,
'include' => $ids
)
);
if ( ! $images && ! $attachments ) {
return array();
} elseif ( ! $images ) {
$images = $attachments;
}
return $images;
}Code-Sprache: PHP (php)Da die Funktion etwas länger ist, erkläre ich sie hier Stück für Stück.
Anfangsüberprüfung und Speicherung der Galerie-Werte
// Den Beitrag gibt es nicht, oder er ist leer.
if ( ! $post || empty ( $post->post_content ) ) {
return array();
}
$galleries = get_post_galleries( $post, false );
if ( empty ( $galleries ) ) {
return array();
}Code-Sprache: PHP (php)Dieser Teil prüft zuerst, ob es den Beitrag gibt und ob er nicht leer ist. Wenn es den Beitrag nicht gibt oder kein Beitragsinhalt gefunden wird, dann wird ein leeres Array zurückgegeben und die Funktion beendet. Wenn der Beitrag existiert und der Inhalt nicht leer ist, wird in der Variable $galleries das Ergebnis des Aufrufs der get_post_galleries()-Funktion gespeichert.
Diese Funktion holt sich die Galerien des Beitrags, der als Parameter übergeben wird. Als zweiter Parameter kann optional angegeben werden, ob das Ergebnis als HTML-Zeichenkette oder als Array zurückgegeben werden soll (der Standardwert ist true und erzeugt die HTML-Ausgabe). In der nächsten Zeile wird geprüft, ob Galerien zurückgegeben wurden. Wenn das nicht der Fall ist, wird wieder ein leeres Array zurückgegeben und der Funktionsaufruf beendet.
IDs der Bilder selektieren
$ids = array();
foreach ( $galleries as $gallery ) {
if ( ! empty ( $gallery['ids'] ) ) {
$ids = array_merge( $ids, explode( ',', $gallery['ids'] ) );
}
}
$ids = array_unique( $ids );Code-Sprache: PHP (php)Für unser weiteres Vorgehen benötigen wir die IDs der Bilder aus den Galerien. Wir legen also ein leeres Array $ids an und durchlaufen die Galerien mit einer foreach-Schleife. In der dritten Zeile wird geprüft, ob in dem aktuellen Galerie-Array der Schlüssel ids Werte enthält (das sind die Werte, die in dem Gallery-Shortcode stehen). Wenn Werte gefunden wurden, werden die IDs mittels explode()-Funktion an den Kommata getrennt und in ein Array umgewandelt.
Dieses Array wird mit Hilfe der Funktion array_merge() mit dem $ids-Array zusammengeführt und wieder in der Variable $ids gespeichert. In der letzten Zeile werden eventuell doppelt vorhandene Bilder aus dem Array entfernt.
Keine IDs aber vielleicht dennoch eine Galerie?
if ( empty ( $ids ) ) {
$attachments = get_children(
array(
'post_parent' => $post_id,
'post_status' => 'inherit',
'post_type' => 'attachment',
'post_mime_type' => 'image',
'order' => 'ASC',
'orderby' => 'menu_order',
)
);
if ( empty ( $attachments ) ) {
return array();
}
}Code-Sprache: PHP (php)Wenn keine IDs vorhanden sind bedeutet das, dass ein Galerie-Shortcode ohne IDs eingesetzt worden ist, also
. Dann werden die Bilder als Galerie angezeigt, die zu dem Beitrag hochgeladen wurden. Um in so einem Fall nicht gar kein Bild in der Blog-Übersicht zu haben, bauen wir hier eine kleine Fallback-Lösung. Mit der get_children()-Funktion werden die Informationen der hochgeladenen Bilder zu dem aktuellen Beitrag zurückgegeben. Diese Bilder müssen nicht in den Beitrag eingefügt sein, was ein Grund ist, dass diese Lösung nur der Fallback ist.
Wenn wir auch keine Bildanhänge haben, also die Variable $attachments leer ist, beenden wir die Funktion erneut mit der Rückgabe eines leeren Arrays.
Bildinformationen der Galerie-Bilder speichern
$images = get_posts(
array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'orderby' => 'post__in',
'numberposts' => 999,
'include' => $ids
)
);Code-Sprache: PHP (php)In diesem Teil holen wir uns durch die get_posts-Funktion die Informationen zu den Bildern aus den Galerien. Als Wert für den orderby-Schlüssel übergeben wir post__in. Damit sorgen wir dafür, dass die Sortierung der Bilder der Reihenfolge der IDs entspricht, die wir aus dem get_galleries()-Aufruf bekommen haben. Über den include-Schlüssel geben wir an, dass nur die Informationen zu den Bildern geholt werden sollen, die in der IDs-Liste vorkommen, die wir vorangehend vorbereitet haben.
Abschließende Entscheidungen
if ( ! $images && ! $attachments ) {
return array();
} elseif ( ! $images ) {
$images = $attachments;
}
return $images;Code-Sprache: PHP (php)Abschließend prüfen wir, ob die Variablen $images und $attachments beide leer sind. Wenn dem so ist, geben wir ein leeres Array zurück. Wenn diese Bedingung nicht zutrifft, prüfen wir, ob nur $images leer ist. Das würde bedeuten, dass der Shortcode ohne IDs vorhanden ist. In diesem Fall weisen wir der Variable $images den Wert von $attachments zu. Zum Schluss wird $images noch zurückgegeben.
Das erste Galerie-Bild ausgeben
Erinnern wir uns noch einmal an diese beiden Zeilen:
Code-Sprache: PHP (php)$images = bornholm_get_gallery_images( $post->ID ); bornholm_gallery_featured_image ( $images, $post );
Die erste Zeile ist abgearbeitet. In der Variable $images befinden sich die Informationen zu den Bildern der Galerie(n) des Beitrags in Form eines Array. Jetzt müssen wir uns nur noch um die Anzeige des ersten Bildes kümmern, und die dazugehörige Funktion aus der functions.php-Datei sieht so aus:
function bornholm_gallery_featured_image( $images, $post ) {
$image = array_shift( $images );
$image_img_tag = wp_get_attachment_image( $image->ID, 'large' ); ?>
<figure class="gallery-thumb clearfix">
<?php if ( has_post_thumbnail( $post->ID ) ) {
echo get_the_post_thumbnail( $post->ID, 'large' );
} else {
echo $image_img_tag;
} ?>
</figure>
<?php
}Code-Sprache: JavaScript (javascript)Mit der array_shift()-Funktion speichern wir den ersten Eintrag des Array in der Variable $image. Im nächsten Schritt holen wir uns über die wp_get_attachment_image()-Funktion das Markup für die große Version des Bildes. Innerhalb des figure-Elements prüfen wir, ob ein Featured Image gesetzt wurde und geben es im Erfolgsfall aus. So kann das Vorschaubild bei Bedarf auch selbst gewählt werden.
Im else-Zweig der if-Bedingung geben wir das img-Element aus.
Diese Lösung könnt ihr relativ einfach in euer Markup einbauen. Wichtig sind nur die zwei Funktionen und der Aufruf derselben. Wenn ihr eine andere Größe des Bildes anzeigen wollt, könnt ihr das einfach in der letzten Funktion anpassen, indem ihr die zwei Vorkommen des Parameters large ersetzt.