Weil ich auf meiner Startseite bereits eine schöne Anzeige der letzten 5 Blogbeiträge habe (die Anzahl ist einstellbar), wollte ich dasselbe auch für die letzten 5 Bilder umsetzen, die der Bastbox hinzugefügt wurden – unabhängig davon, wo sie (in der Bastbox) hochgeladen wurden. Da ich auf Anhieb kein passendes Plugin gefunden habe, habe ich mir kurzerhand selbst geholfen. Und siehe da:
Schritt 1: Ordner mit dem Namen „latest-pic-shortcode“ erstellen.
Schritt 2: In diesem Ordner die Datei „latest-pic-shortcode.php“ erstellen.
Dort kommt folgender Inhalt rein:
<?php
/*
Plugin Name: Latest Pic Shortcode
Description: Zeigt die letzten hochgeladenen Bilder per Shortcode an.
Version: 1.3
Author: Bastbox
*/
function show_latest_images($atts) {
$atts = shortcode_atts(array(
'count' => 5,
), $atts);
$args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'post_status' => 'inherit',
'posts_per_page' => $atts['count'],
'orderby' => 'date',
'order' => 'DESC',
);
$images = get_posts($args);
$output = '<div class="latest-images" style="display:flex; flex-wrap:wrap;">';
foreach ($images as $image) {
$img_url = wp_get_attachment_image_src($image->ID, 'medium')[0];
$output .= '<div style="height:250px; width:250px; overflow:hidden; display:flex; align-items:center; justify-content:center; margin:10px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.08);">';
$output .= '<img src="' . esc_url($img_url) . '" alt="" style="height:100%; width:100%; object-fit:cover; display:block;" />';
$output .= '</div>';
}
$output .= '</div>';
return $output;
}
add_shortcode('latest_images', 'show_latest_images');
Schritt 3: Via FTP in den Order „/wp-content/plugins/…“ laden.
Schritt 4: Nun noch im WordPress-Backend zu Plugins gehen und das Plugin „Latest Picture Shortcode“ aktivieren.
Schritt 5: An der Stelle an der die letzten 5 Bilder dargestellt werden einfügen:
(latest_images count="5") Bitte eckige statt (runde) Klammern [nehmen]
Fertig. 🙂 Nun sollte es funktionieren (Siehe Startseite Bastbox). In diesem Fall werden immer die letzten 5 Bilder angezeigt, die zuletzt hochgeladen wurden – und das vollautomatisch. Die Bilder werden, falls sie größer sind, auf eine Höhe von 250 Pixel herunterskaliert, und sollten sie kleiner sein, entsprechend auf 250 Pixel hochskaliert. Es sind also immer alle Bilder exakt 250 Pixel hoch. Über den Shortcode, den man an der gewünschten Stelle einfügt (in meinem Fall 5), kann man die Anzahl der angezeigten Bilder individuell festlegen.
Funktionsweise
- Shortcode:
Das Plugin stellt den Shortcode (latest_images) zur Verfügung.
Optional kann die Anzahl der angezeigten Bilder mit dem Attribut count gesteuert werden, z.B. (latest_images count=“8″). (Wieder [eckige] statt (runde) Klammern nehmen.) - Bilderauswahl:
Das Plugin sucht in der Mediathek nach den neuesten Bild-Dateien (post_type = attachment, post_mime_type = image), sortiert sie nach Datum (neueste zuerst) und gibt die gewünschte Anzahl zurück. - Ausgabe:
Die Bilder werden in einem flexiblen Grid (Flexbox) nebeneinander dargestellt.
Jedes Bild wird in einem Container mit Schatten, abgerundeten Ecken und festgelegter Größe (250x250px) angezeigt.
Die Bilder werden automatisch zugeschnitten (object-fit: cover), damit sie den Container optimal ausfüllen.
Technische Details
- Shortcode-Funktion:
Die Funktion show_latest_images() verarbeitet die Shortcode-Attribute, holt die gewünschten Bilder und baut das HTML für die Galerie zusammen. - Sicherheit:
Die Bild-URLs werden mit esc_url() ausgegeben, um potenzielle Sicherheitsrisiken zu minimieren. - Responsivität:
Durch Flexbox und das automatische Umbruchverhalten (flex-wrap: wrap) passt sich die Galerie an verschiedene Bildschirmgrößen an.
Beispiel mit 15 Vorschaubildern …
