12. März 2023

Vorher-Nachher-Slider in WordPress

Vorher-Nachher-Slider (Before-After-Image-Viewer) sind ein beliebtes und sinnvolles Tool um um Vorher-Nachher-Effekte zu demonstrieren, z.B. um Änderungen an einem Raumdesign, an der Haut von Personen oder Bildbearbeitungen zu zeigen. So z.B.:

Um einen solchen Slider zu erstellen, gibt es bereits fertige Plug-ins für WordPress. Was mir hieran nicht gefällt ist, dass man hier erst den Slider erstellen muss, dann zur Seite wechseln muss, auf der man den Slider einfügen möchte und dann den Slider per Shortcode einfügen muss.

Also habe ich mir hierfür mit LazyBlock einen eigenen Block gebaut. Hierfür nutze ich das jQuery-Plugin von dieser Seite: https://github.com/mamedul/jquery-beforeafter-slider

Im LazyBlock habe ich 2 ImageUpload-Felder eingesetzt. Das hat den Vorteil, dass man die Bilder anschließend direkt im Gutenberg-Editor hochladen kann. Der Block-HTML-Code ist denkbar einfach:

<div class="beforeAfter mt-3 mb-4">
  <img src="{{image-1.url}}">
  <img src="{{image-2.url}}">
</div>Code-Sprache: JavaScript (javascript)

Und schon kann man im Gutenberg-Editor sehr komfortabel Vorher-Nachher-Slider erstellen.