20-20, die Technik hinter den Schiebebildern

Die Vorher-Nachher-Fotos von der Ostseesturmflut erfreuen sich großer Beliebtheit. Das liegt sicherlich auch am WordPress-Plugin, das den Bildervergleich überhaupt erst möglich macht. Um dieses Plugin geht es:

TwentyTwenty
Preis: Kostenlos

So funktioniert’s: Das Plugin ermöglicht den Einsatz von zwei neuen Shortcodes:

[twentytwenty] und [/twentytwenty]

Zwischen diesen beiden Schnipseln baut man zwei gleich große Bilder ein, also Fotos mit identischen Kantenlängen. Das Plugin baut dazu das nötige CSS und HTML zusammen: Es legt beide Fotos übereinander, blendet einen Schieberegler ein und beschneidet sozusagen das oben liegende Bild von rechts, je nachdem, an welcher Stelle der Schieberegler gerade steht.

 

Funktioniert problemlos – sogar responsiv. Bildunterschriften werden nicht mit angezeigt.

Die App liegt in Version 1.0 vor, ist allerdings seit zwei Jahren nicht mehr aktualisiert worden – sie funktioniert hoffentlich noch lange, also auch mit künftigen WordPress-Versionen. Was der Name allerdings bedeutet, konnte ich nicht rauskriegen. Was das alles allerdings mit 20-20 zu tun hat, konnte ich auf die Schnelle nicht herausfinden – vielleicht irgendwas mit Fityfifty.

Autor: Christian

Der Verfasser aller Beiträge auf kohlhof.de