Eine Bildergalerie mit WordPress-Bordmitteln erstellen

Eine Bildergalerie mit WordPress-Mitteln erstellenEin Bild sagt oft mehr als tausend Worte. Deswegen sind Bilder für die Gestaltung einer Website eigentlich kaum wegzudenken.

Bilder können Ihre Inhalte visuell unterstützen oder lange Texte optisch auflockern. Sie bieten dem Auge kleine „Ruheinseln“ oder können bewusst Aufmerksamkeit auf sich ziehen.

Heute möchte ich Ihnen zeigen, wie Sie mit ganz einfachen WordPress-Bordmitteln eine ansprechende Bildergalerie gestalten können.

Dafür starten Sie genau so, als ob Sie ein einzelnes Bild in Ihre Website einfügen möchten: Setzen Sie den Cursor an die Stelle, an der Sie die Bildergalerie einfügen möchten und klicken Sie auf den Button „Dateien hinzufügen“.

Datei hinzufügen

Zum Vergrößern bitte Bild anklicken

Laden Sie die Bilder, die Sie für die Galerie verwenden möchten wie gewohnt in die Mediathek hoch.

Wenn die Bilder bereits in der Mediathek vorhanden sind können Sie diese auch ganz einfach durch anklicken auswählen. An den ausgewählten Bildern erschent dann jeweils ein kleines Häkchen.
Wenn Sie alle Bilder ausgewählt haben, klicken Sie links oben auf den Link „Galerie erstellen“ (siehe Screenshot)

Galerie erstellen

Zum Vergrößern bitte Bild anklicken

Sie sehen dann in der Fußleiste noch einmal die ausgewählten Bilder im Miniformat. Wenn alles passt, klicken Sie auf den Button „Erstelle eine neue Galerie“.


Erstelle eine neue Galerie

Zum Vergrößern bitte Bild anklicken.

So gelangen Sie in den „Bearbeitungsmodus“ für die Galerien. Auf dieser Seite haben Sie die Möglichkeit, die Reihenfolge der Bilder durch „Drag & Drop“ zu verändern und ggfs. Bildunterschriften für die Bilder einzufügen.

Auf der Website selbst erscheinen die Galeriebilder als sogenannte „Thumbnails“, also verkleinerte „Vorschaubilder“. Damit diese Vorschaubilder in einer hübschen Lightbox geöffnet werden können empfiehlt es sich, in den Einstellungen rechts bei „Link zur“ die „Medien-Datei“ auszuwählen.

Geben Sie bitte außerdem noch an, wie viele Spalten Ihre Galerie haben soll. Die Anzahl der Spalten entscheidet darüber, wie viele Bilder in einer Reihe nebeneinander angezeigt werden sollen.
Wenn alles passt, können Sie die Galerie erstellen. So könnte das dann in Ihrer Website aussehen:

Bildergalerie in WordPress

Zum Vergrößern bitte Bild anklicken.

Lightbox-Effekt mit Plugin „WP Lightbox“

Standardmäßig öffnen sich die Bilder der Galerie (wie übrigens alle Bilder in WordPress, die zur Medien-Datei verlinkt werden) in einem separaten Fenster. Zwar kann man so die Bilder in der vollen Größe ansehen, aber das ist keine wirklich hübsche Lösung, und es besteht auch keine Möglichkeit, durch die Bilder „durchzublättern“.

Viel schöner ist es, wenn die Bilder sich in einer sogenannten „Lightbox“ öffnen. Dabei verdunkelt sich der Hintergrund, der aber noch leicht transparent durchschimmert und das Bild „leuchtet“ darüber in voller Größe.

Lightbox Effekt mit WP Lightbox

Zum Vergrößern Bild anklicken.

Über Pfeiltasten, die beim überfahren mit der Maus erscheinen, kann man sich durch die Bilder navigieren.

Diesen Lightbox-Effekt erreichen Sie durch die Installation des Plugins „WP Lightbox“

Sie müssen das Plugin nur installieren und aktivieren. Es sind keine weiteren Einstellungen erforderlich, damit Sie ab sofort hübsche Lightbox-Galerien auf Ihrer Website zeigen können.

Wie das aussehen kann können Sie direkt in diesem Beitrag testen: Klicken Sie einfach eines der hier eingefügten Bilder an und blättern Sie durch die sich öffnende Lightbox-Galerie 🙂

Bildquelle:
© stockphoto-graf – Fotolia.com

Print Friendly, PDF & Email

Kommentare

Eine Bildergalerie mit WordPress-Bordmitteln erstellen — 40 Kommentare

  1. Mit Bildergalerien arbeite ich auch auf meinen Blogs und erst neulich publizierte ich so eine schöne WordPress-Bildergalerie auf meinem RU-Blog.

    Ansonsten habe ich in der Vergangenheit viel mit dem Plugin Nextgen Gallery gearbeitet, sehe es aber auch ein, dass man auch ohne ein Plugin an schöne Galerien kommen kann.

    • Hallo Alex, Nextgen Gallery ist mir persönlich in den letzten Monaten zu störanfällig geworden – Es macht nicht mehr so richtig Spaß, damit zu arbeiten.

      Und für eine simple Gallerie mit einem hübschen Lightbox-Effekt genügen die WordPress-Bordmittel wirklich allemal 😉

  2. Hallo Michaela,
    ja das kann ich nachvollziehen und bei manchen Blogs von mir läuft die Netxgen Gallery leider nicht mehr. Ich versuchte den Code für die Galerie im Artikel zu platzieren, aber es erscheinen keine Bilder. Daher lasse ich es auch sein, seit Neuestem und nutze wie du hier beschrieben hast die Bordmittelchen von WordPress.

  3. Hallo Michaela,
    seit kurzem beschäftige ich mich auch mit WP und bin auf der Suche nach „Bildvergrößerungen“ zu Deinem Artikel hier gekommen und habe auch das Plugin „WP-Lightbox 2“ installiert. NAch Deiner Anleitung hat der Einbau auch soweit funktioniert – nur hätte ich gern auch eine andere Darstellung der Lightbox … das „Close.gif“ etc. kann ich ja austauschen – nur wie bzw. in welchen CSS-Dateien kann ich die Farbe etc. ändern ?

    Danke für eine Antwort und schon mal einen guten Rutsch ins neue Jahr – Sven

  4. Auch ich nutze als Naturfotograf auf meiner Fotohomepage eine Bildergalerie, welche lediglich auf der simplen aber vollkommend ausreichenden WP-integrierten Galerie basiert. Als Lightbox-Plugin kann ich „WP Lightbox 2“ empfehlen.

  5. die Idee dieses Beitrags ist einleuchtend. Tut mir leid, es sagen zu müssen – die ultimative und vor allem unabhängige Plugin-Galerie-Lösung ist nach wie vor nicht in Sicht. Als NextGen-Galerie-Geschädigter bin ich in den letzten 10 Jahren auch mit allem Für und Wieder anderer Galerie-Plugins konfrontiert worden. Wie sah meine letzte Lösung aus? Meine Herausforderung war es, mit einer Website mit ca. 250 Galerien und rund 17.000 (!) großformatigen Bildern (vormals unter dem Plugin NextGen-Galerie) umzuziehen. Habe letztlich das Anlegen aller Galerien komplett erledigt und neu organisiert OHNE Plugin – allein nur mit dem WordPress-Bordmitteln bzw. der WP-Mediathek. Die Lösung war oK – abgesehen von einigen Wochen Feierabendarbeit an Aufwand. Letztlich ist es auch recht benutzerfreundlich für einen „normalen“ User, die Mediathek direkt in einem Beitragsentwurf bearbeiten zu können und alle Veränderungen live zu sehen. Die eigentliche Herausforderung dabei war es, sich vor dem Beginn eine durchgängige Datei-Namenskonvention klar zu machen und konsequent durchzuziehen. Es ist gut möglich. So hat man Ordnung in der Mediathek, klare Zuordnung zu Galerien sind schnell möglich auch bei vielen Dateien – man findet Alles über das Suchfeld schnell wieder. Und letztlich hege ich die Hoffnung, dass das hervorragende WP-Entwicklerteam an dieser Mediathek künftig weiter an der Benutzerfreundlichkeit „schraubt“. Böse Überraschungen von geupdateten, externen Galerie-Plugins bleiben mir so in Zukunft erspart. Zur besseren Ansicht der Galerien/Fotos habe ich unabhängig davon einen Fullscreen-Image-Slider ergänzt – der auch alle Bild-Informationen (Beschreibungen, Dateinamen, Kamera-Informationen, Social-Links, etc.) mitliefert.

  6. Hallo Michaela,
    deine Seite ist klasse. Habe mir als Quereinsteiger schon die ein oder andere Idee geholt Ich erstelle gerade für unseren Verein eine Homepage. Habe jetzt eine Frage und vielleicht hast du mir eine Lösung. Aktuell möchte ich eine Seite (Beitrag) mit verschiedenen Galerien erstellen. Das klappt zwar, wenn ich aber über die Lightbox die Bilder anschaue, werden alle Bilder gezeigt. Also auch von den anderen Galerien, die ich extra angelegt habe. Liegt es vielleicht daran, dass alle auf einer Seite sind?
    Danke und noch frohe Ostern. Markus

  7. Pingback: Wie viele Plugins sind zu viel? › WordPress-Bistro

  8. Vielen Dank für die tolle Anleitung.
    Ich bin WP-Anfänger und wollte „geschwind“ mal eine Diashow aufsetzen.

    Alles hat soweit geklappt, auch mit WPLightbox2, nur skaliert das Plugin die Bilder nicht. Wo stelle ich das ein?

    Vielen Dank vorab.

  9. Sorry, habe weitere Fragen/Bemerkungen:

    1. Für die Strukturierung der Medien brauche ich ein Plugin (da habe ich, sorry, erst mal mit dem Kopf geschüttelt). OK, WPMediaFolder installiert.

    2. Aus WPMediaFolder kann ich aber keine Diashow mit WP-Bordmitteln generieren, richtig?

    3. Die Sortierung der Bilder bereitet mir noch Probleme. Keine Ahnung warum das durcheinandergeht. Die Dateien sind in der Bezeichnung sauber aufsteigend benannt.

    • Hallo Thomas,

      1. Du hast recht – die fehlenden Strukturierungsmöglichkeiten in der Mediathek sind m.E. im Moment einer der größten Schwachpunkte in WordPress. Da kann definitiv nachgerüstet werden.

      2. Eine Diashow (ich vermute Du meinst einen Slider?) kannst Du mit WP-Bordmitteln in der Tat leider nicht erstellen. Nur die Galerie. Wenn Du eine einfache Möglichkeit suchst einen Slider einzubinden schau Dir mal das Plugin „Shortcodes Ultimate“ an.

      3. Die Sortierung der Bilder erfolgt in der Reihenfolge, in der die Bilder eingefügt werden. Du kannst aber die Sortierung der Bild-IDs im Shortcode noch anpassen – oder durch Drag & Drop bevor Du die Galerie einfügst.

      Herzliche Grüße
      Michaela

  10. Weiß jemand, ob man in einer WordPress-Bildergalerie die einzelnen Bilder jeweils benutzerdefiniert verlinken kann?
    Hat jemand Erfahrungen mit dem Plugin Envira Gallery?
    Freundliche Grüße,
    Carlo Milan

    • Hallo Carlo,

      Wenn Du keine Lightbox benötigst für die Galerie, dann kannst Du in die Bilder der Galerie auch mit einem externen Link versehen. Das geht soweit ich weiß auch in der Envira Gallery.

      Wenn Du den Lightbox-Effekt aber nutzen möchtest bzw. Deinen Lesern die Möglichkeit geben möchtest sich durch die Bilder durchzuklicken, dann kannst Du nicht noch zusätzlich einen Link auf die Bilder einbinden.

      Herzliche Grüße
      Michaela

    • Hallo Mikel, dazu bin ich ehrlich gesagt etwas überfragt.
      Ich fürchte aber, wenn Dein WordPress auf deutsch eingestellt ist und WP Lightbox 2 in englisch angezeigt wird dann gibt es keine deutsche Sprachdatei.

      Herzliche Grüße
      Michaela

  11. Hallo Michaela, ich habe mir gerade mit großem Interesse deinen Beitrag durchgelesen. Ich stehe gerade vor dem Problem das ein Kunde eine Seite benötigt, auf der Fotos von Reisetouren zum download angeboten werden sollen. Das ganze soll außerdem noch Passwortgeschützt sein, damit nur die Teilnehmer der Tour zugriff haben.
    Ich bin mir jetzt nicht so sicher ob man die Bilder auf den 1&1 Server laden sollte oder ob man eine externe Lösung (z. B. Dropbox) wählen sollte. Was wäre deine Meinung?
    Zur Zeit gefällt mir das Plugin PixProof noch ganz gut, weil man hier eben gleich die Bilder die einen Interessieren auswählen kann und alle in einem downloaden kann.
    Bei den WP Bordmitteln gehe ich mal von rechts Klick und Bild speichern aus, oder?

    • Hallo Mario, mit Bildern im Web ist das so eine Sache – einmal hochgeladen können Sie immer irgendwie abgegriffen werden. Dessen muss man sich einfach bewusst sein.

      Rechtsklicksperre hilft eventuell bei sehr unbedarften Usern, aber die Bilder sind in dem Moment in dem sie aufgerufen werden rein technisch bereits im Browserverlauf des Besuchers gespeichert und man kann sie von dort herunterladen wenn man weiß wie.

      Und da die Rechtsklicksperre die Usability für andere sinnvolle Funktionen ebenfalls blockiert ist davon eigentlich eher abzuraten.

      Dagegen hilft eigentlich nur ein Wasserzeichen im Bild – Das ein echter Profi aber vermutlich auch „korrigieren“ könnte.

      Du kannst die Bilder in ein Verzeichnis in Deinem Webspace hochladen und Google & Co. den Zugriff auf dieses Verzeichnis verbieten um ein indexieren der Bilddateien zu verhindern. Das bietet zumindest einen gewissen Schutz, ist aber auch nicht 100%ig.

      Den geschützten Bereich richtest Du dann entweder über einen einfachen, rudimentären Passwortschutz ein oder Du verwendest ein Mitglieder-Plugin wie z.B. Page Security by Contexture oder Digimember (wenn du’s mit Bezahltfunktion koppeln möchtest).

      PixProof kenne ich leider nicht.

      Ich hoffe, das hilft Dir ein klein wenig weiter?

      Herzliche Grüße
      Michaela

  12. Hallo, vielleicht bin ich aktuell etwas blind, aber wie füge ich einer Galerie im nachhinein noch weitere Bilder hinzu ? Sorry für so eine „dumme“ Frage, aber bin noch Anfänger 😉

  13. Hallo Michaela, die Galerie mit der Lightbox zu erstellen geht wirklich supereinfach. Danke für deine Hilfe!
    Meine Schwierigkeit ist jetzt nur, einen beschreibenden Text einzubinden. Wenn ich die Galerie wie von dir beschrieben mit WP-Bordmitteln erstellen, werden immerhin mit den Thumbnails Bildunterschriften angezeigt. Das ist mit der bisher verwendeten Galerie NextGen nicht der Fall (oder ich bin – noch – zu sehr am Anfang). Bei der NextGen-Lightbox öffnet sich das Foto und ein, leider nicht zu formatierender, Text (Bildbeschreibung) ist sichtbar. Bei der WP-Lightbox2 wird nur die Bildunterschrift angezeigt, nicht die Beschreibung. Kann ich das irgendwo einstellen?
    Liebe Grüße Iris

    • Hallo Iris, wenn Du eine Bildunterschrift vergibst, dann zeigt das Plugin WP Lightbox diese unter dem geöffneten Bild an, wenn man sich durch die Galerie klickt.
      Die Bildbeschreibung selbst bekommst Du auf mit den ganz einfachen Bordmitteln leider nicht unter das Bild.

      Herzliche Grüße
      Michaela

      • OK, vielen Dank für deine schnelle Antwort. Dann muss ich halt weiter an meinem Problemchen schrauben… Wenigstens weiß ich jetzt, dass ich nicht irgendetwas übersehen habe.
        Liebe Grüße
        Iris

  14. Hallo Michaela
    Danke für diese supereinfache Erklärung, die hab sogar ich verstanden 😉
    Leider komme ich nur bis zum downloaden der Datei.

    Diese wird bei mir nicht als .zip gedownloadet (hab ich dann selber verpackt aufm Rechner). Beim wieder hoch laden werde ich nach meinem FTP-login gefragt, welche ich brav eingebe.
    Und genau dann kommt der gefürchtete Satz:
    ‚To perform the requested action, WordPress needs to access your web server. Please enter your FTP credentials to proceed. If you do not remember your credentials, you should contact your web host.‘

    Keine Ahnung was ich falsch mache, ich muss ja dasselbe Passwort eingeben um überhaupt so weit zu kommen, kann also schlecht falsch sein.. =(

    Hilfe..? Weisst du Rat?
    Danke im Voraus!

    • Hallo Abby,
      ich vermute Deine Website ist bei All-Inkl. gehostet? Dort hast Du durch die sicher gesetzten Dateirechte immer die Erfordernis die FTP-Zugangsdaten einzugeben.

      Ich verstehe nur nicht so ganz wo Du die Daten eingeben musst bzw. welche Datei Du herunterlädst?

      Und letzte Frage: Du bist sicher dass Du die FTP-Zugangsdaten nicht mit den WordPress Login-Daten verwechselst?

      Herzliche Grüße
      Michaela

  15. WordPress und Galerie, da bin ich auch noch auf der Suche nach einer gescheiten Lösung. was mir an WordPress gefällt, ist die Verknüpfung mit SEO, die ich bei NextGen wohl nicht habe.
    Was mir aber auch negativ auffällt, ist, dass ich in einem Artikel nicht mehr als eine funktionierende Galerie einsetzen kann. Wenn ich in einem langen Artikel mit verschiedenen Unterpunkten zu den Themen passend eine weitere Galerie einbaue, zeigt diese im Anschluss die Bilder der ersten Galerie. Und Umgekehrt. Auch die Präsentation stört: Toll wäre die Möglichkeit, beispielsweise 4 kleine Bilder nebeneinander zu zeigen und erst beim Anklicken eines dieser Bilder öffnet sich in separatem kleinen Fenster eine lightbox mit beliebig vielen Bildern.
    Auch die Pflege der SEO-Daten scheint mühsam. Jedes Bild muss zur Bearbeitung angeklickt und beschrieben werden, man kommt aber nur durch vorsichtiges zurückspringen wieder an den richtigen Ort der Galerie. Bei einigen tausend Bildern, die ein Blog schnell bekommt, ist das mehr als nervig.

    • Hallo Kai,

      mit ein wenig Gefrickel und Tricksereien geht das zwar auch, dass Du in einem Beitrag vier Bilder einstellst und dann eine Galerie mit mehreren Bildern in einer Lightbox aufgeht. Welche Bilder in der Galerie angezeigt werden hängt davon ab, welche Bilder Du im entsprechenden Beitrag über „Datei hinzufügen“ eingefügt hast. Also: Bilder einfügen, dann wieder löschen und nur die Bilder einstellen, die Du als Vorschaubilder sehen möchtest. Die anderen hochgeladenen Bilder werden dann in der Galerie angezeigt.

      Zugegebenermaßen ist das aber ausgesprochen umständlich und frickelig und macht so auch nicht wirklich Spaß.

      Für Deine Anforderungen würde ich empfehlen vielleicht wirklich mal einen Blick auf die Envira-Galerie zu werfen. Damit dürft Dein Leben vermutlich leichter werden. Mit Bordmitteln stößt Du da schon hin- und wieder an Deine Grenzen.

      Herzliche Grüße
      Michaela

  16. Vielen Dank für das Galerie-Tutorial, hat alles geklappt so weit. Allerdings würde ich gerne die Bilder in der Galerie mit unterschiedlichen URLs verlinken. z.B. Produktbilder, die dann mit einem Klick (im Bereich der Bildfläche) auf die Seite verweisen, wo das Produkt gekauft werden kann. Wie geht das?

    • Hallo Victoria,
      die Verlinkung auf eine andere Seite kannst Du nur nutzen, wenn Du den Lightbox-Effekt nicht verwendest.

      In dem Fall kannst Du beim auswählen des Bildes in der grauen Spalte rechts unten unter „Attribute“ den Link vorgeben, zu dem das Bild nach dem Anklicken verlinken soll.

      Herzliche Grüße
      Michaela

  17. Hallo Michaela,

    vielen Dank für deine Mühe.

    Allerdings habe ich das Problem, dass es in meiner Mediathek schlicht und ergreifend keine linke Spalte – und somit auch kein „Gallerie erstellen“ gibt.

    Ich verwende WordPress 4.6.1.

    Liebe Grüße

    Stefan

    • Hi Stefan,

      selbes Problem hatte ich auch. Die ganze einfache Lösung: Du darfst nicht(!!) direkt auf Medien klicken. Dort findest du die Gallerie nicht Du must er in (!!!) den Beitrag gehen. Rechts oben dann auf „Dateien hinzufügen“ klicken. Dann erscheint auch der Reiter „Galerie erstellen“.

      Grüße
      Micka

      • Hallo Micka,

        Danke, dass Du Dir die Zeit genommen hast auf Stefan’s Frage zu antworten 🙂

        Ich freue mich immer, über den „Community“-Aspekt, der hier in den Kommentaren teilweise entsteht.

        Herzliche Grüße
        Michaela

  18. Guten Tag Michaela,
    ich bin WP Neuling. Habe die Version 4.6.1 und bekomme meine Bilder in den Galerien nicht in mehreren Spalten angeordnet. Die Option Spaltenanzahl habe ich gefunden. Die Einstellung wird aber nicht übernommen. Gibt es einen Trick?
    Schönen Adventssonntag…
    Gruß René

  19. Hallo Michaela,
    ich habe vor kurzem mein Theme „Bridge child“ aktualisiert und nun funktioniert die Lightbox der integrierten WP-Bildergalerie nicht mehr. Die Galerie erscheint zwar unter dem Post wie gehabt, nur leider kann ich die die angeklickten Bilder nicht mehr fortlaufend weiter anschauen, die „weiter und zurück-Pfeile“ fehlen.

    http://demanescale.de/zeigt-her-eure-pfoetchen/

    Über eine Antwort und eventuelle Ratschläge wäre ich sehr dankbar.

    Freundliche Grüße,
    Eva

    • Hallo Eva,

      eine superschöne Seite hast Du da!
      Wie hast Du denn die Galerie-Seite erstellt, dass Du für jede Seite ein Ansichtsbild hast?

      Lieben Dank und viele Grüße
      Kerstin

    • Hallo Rolf, eigentlich sollten die Galerien nach wie vor funktionieren wie hier vorgestellt. Vielleicht deaktivierst Du mal testweise alle Plugins, möglicherweise gibt es da einen Konflikt der die Galerie am funktionieren hindert.

      Herzliche Grüße
      Michaela

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.


Ich möchte auch den WordPress-Rundbrief abonnieren