Bilder-Vergleich vorher zu nachher

Vor ein paar Tagen war ich für ein kleines WordPress-Projekt auf der Suche nach einem Plugin für die interaktive Darstellung von zwei Fotos mit vorher – nachher Effekt.

Storebro "Adler III" am StegDasselbe Foto mit Sepia Filter

Zum Vergleich den Trenner von links nach rechts bzw. rechts nach links ziehen.

Im WordPress Plugin-Verzeichnis findet sich unter der Suche „Image Comparison“ oder „Image Compare“ das eine oder andere Plugin. Aber Achtung: Einige Vorschläge sind ausschließlich für Pagebuilder wie Elementor oder andere für den Online-Shop mit Woocommerce. Und dann werden wiederum andere Plugins nicht aktuell gehalten (Stand 01.01.2023).

Ich möchte euch drei Plugins vorstellen, die genau das tun, was sie versprechen. Und zum Zeitpunkt 01.01.2023 gepflegt und für WordPress 6.1.1 getestet sind.

Image Comparison

Das erste Plugin, dass ich hier vorstelle, heißt „Image Comparison“ von WPDeveloper. Das Plugin gefällt mir ausgesprochen gut. Es ist anpassbar, und sehr gut dokumentiert. Wer sich ein wenig mit zusätzlichem CSS auskennt, kann das Layout anpassen.

Screenshot vom Vergleich mit dem Image Comparison Plugin.
Plugin Image Comparison

Wesentlich weniger Umfang in den Einstellungen, daher aber gerade für Anfänger schneller einsetzbar ist das nächste Plugin.

Image Comparison Block

Das zweite Plugin heißt „Image Comparison Block“ und findet sich ebenfalls im Plugin-Verzeichnis. Es wirkt ein wenig wie die „Light Version“ des oben vorgestellten Plugin „Image Comparison„. Es ist aus den WordPress-Core-Blöcken erstellt.

Das Ergebnis mit dem Plugin Image Comparison Block
Das Ergebnis mit dem Plugin Image Comparison Block

Das nächste Plugin, dass ich vorstelle, ist zum Zeitpunkt der Veröffentlichung (01.01.2023 – WordPress 6.1.1) nur bis WP 6.0.3 getestet. Es funktioniert aber.

Before After Image Comparison

Screenshot vom Plugin Before After Image Comparison

Am besten gefällt mir das jetzt vorgestellte Plugin. „Before After Image Comparison“ Leider ist es durch die Autoren noch nicht mit WordPress 6.1.1 getestet. Das Plugin hat vielfältige Einstellmöglichkeiten, die mir besonders gut gefallen.

Es gibt wie bei den anderen Plugins sogenannte Label für die Bilder. Zusätzlich ist eine gemeinsame Unterzeile (Caption). Beides lässt sich gut nach seinen eigenen Bedürfnissen anpassen. Die Dokumentation für das Plugin findest du hier.

Das Ergebnis mit Before After Image Comparison
Das Ergebnis mit Before After Image Comparison

Ob Du das Plugin einsetzen möchtest? Hoffentlich werden die Autoren es weiter pflegen.

Resümee

Alle Plugins funktionieren reibungslos für einen Bilder Vergleich mit WordPress. Alle drei vorgestellten Plugins stellen einen Block für den Editor zur Verfügung. Daher sieht man schon bei der Erstellung eines Posts oder einer Seite das zu erwartende Ergebnis.

Um ein vernünftiges Ergebnis zu erhalten, ist es wichtig, dass beide verwendeten Fotos gleich groß sind.


Beitrag veröffentlicht am

in

von

Kommentare

4 Antworten zu „Bilder-Vergleich vorher zu nachher“

  1. Avatar von Thomas
    Thomas

    vielen Dank für deinen tollen Beitrag und deine Empfehlung, das Before After Image Comparison Plugin zu nutzen. Ich kann mich nur anschließen, dass dieses Plugin wirklich großartig ist und es einem ermöglicht, vorher-nachher Bilder einfach und ansprechend zu präsentieren.

    Ich habe jedoch auch gute Erfahrungen mit einem anderen Plugin gemacht, dem A/B Image Plugin von Themify. Es bietet ähnliche Funktionen wie das von dir empfohlene Plugin und ist auch sehr benutzerfreundlich. Hier ist der Link dazu: https://themify.me/addons/ab-image.

    Außerdem möchte ich erwähnen, dass ich auf https://wordtune.me das A/B Image Plugin inklusive Hosting gefunden habe. Dies könnte eine gute Alternative sein, falls der Support für das von dir empfohlene Plugin irgendwann eingestellt wird, was leider manchmal passieren kann.

    Nochmals vielen Dank für deinen Beitrag und deine Empfehlung. Ich hoffe, dass ich mit meinem Beitrag eine zusätzliche Option für andere Leser bieten konnte.

    Beste Grüße,

    1. Avatar von Jonas

      Danke für die Tipps.

  2. Avatar von Nami

    Sehr gut erklärt! Super

Schreibe einen Kommentar

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