Bilder als Thumbnails mit benutzerdefinierten Feldern

Xethon

Hallo,

ich habe ein Problem, und zwar habe ich in jedem Artikel die benutzerdefinierten Felder bild_1, bild_2 und bild_3, die die URL zum jeweiligen Bild (wurde per File-Upload vom User hochgeladen) enthalten.
Nun möchte ich, dass diese 3 Felder nebeneinander als Thumbnails im Artikel ausgegeben werden und wenn man auf ein Thumbnail klickt, soll das Bild in voller Größe z.B. in lightBox geöffnet werden. Wie könnte man das umsetzen?

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

PKdesignz

Hallo, das ist eigentlich relativ einfach umzusetzen! :-)

Du benötigst noch ein zusätzliches "Benutzerdefiniertes Feld" für das Original-Bild.

Hier ein kleines Beispiel:
Für das Thumbnail nutzen wir folgenden "Key" -> thumb-1
und für das Original nutzen wir -> image-1

Bei "thumb-1" hinterlegst du nun die Url zur kleinen Vorschaugrafik und bei "image-1" hinterlegst du die Originaldatei.

Jetzt müssen wir das Ganze noch ausgeben. Dazu gehst du in die Single.php und fügst folgenden Code ein, wo das ganze erscheinen soll:

HTML

<?php if(get_post_meta($post->ID, "thumb-1", $single = true) != "") : ?>


<a href="<?php if(get_post_meta($post->ID, "image-1", $single = true) != "") : ?><?php echo get_post_meta($post->ID, "image-1", $single = true); ?><?php endif;?>">


<img src="<?php echo get_post_meta($post->ID, "thumb-1", $single = true); ?>" alt=""/>


</a>


<?php endif;?>

Alles anzeigen

Jetzt haben wir das Vorschaubild inkl. einer Verlinkung mit einer größeren Version. Jetzt musst du nur noch ein Lightbox-Plugin einbauen und dem <a>-Tag die richtige ID oder Class zuordnen (diese ist vom Plugin abhängig).

Bsp:

HTML

<?php if(get_post_meta($post->ID, "thumb-1", $single = true) != "") : ?>


<a id="image-lightbox" href="<?php if(get_post_meta($post->ID, "image-1", $single =  true) != "") : ?><?php echo get_post_meta($post->ID,  "image-1", $single = true); ?><?php endif;?>">


<img src="<?php echo get_post_meta($post->ID, "thumb-1", $single = true); ?>" alt=""/>


</a>


<?php endif;?>

Alles anzeigen

Das wäre es dann! :-)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Bilder als Thumbnails mit benutzerdefinierten Feldern

Jetzt mitmachen!