{"id":5607,"date":"2017-01-05T00:17:16","date_gmt":"2017-01-04T23:17:16","guid":{"rendered":"http:\/\/www.kohlhof.de\/kohlhof\/?p=5607"},"modified":"2023-06-07T19:50:43","modified_gmt":"2023-06-07T17:50:43","slug":"20-20-die-technik-hinter-den-schiebebildern","status":"publish","type":"post","link":"https:\/\/www.kohlhof.de\/kohlhof\/2017\/01\/05\/20-20-die-technik-hinter-den-schiebebildern\/","title":{"rendered":"20-20, die Technik hinter den Schiebebildern"},"content":{"rendered":"<div class='__iawmlf-post-loop-links' style='display:none;' data-iawmlf-post-links='[]'><\/div>\n<p>Die <a href=\"https:\/\/www.kohlhof.de\/kohlhof\/2017\/01\/04\/hochwasser-und-sturmflut-an-der-ostseekueste\/\">Vorher-Nachher-Fotos von der Ostseesturmflut<\/a> erfreuen sich gro\u00dfer Beliebtheit. Das liegt sicherlich auch am WordPress-Plugin, das den Bildervergleich \u00fcberhaupt erst m\u00f6glich macht. Um dieses Plugin geht es:<\/p>\n<!-- WP-Appbox (Version: 4.5.10 \/\/ Store: wordpress \/\/ ID: twentytwenty) -->\n<div class=\"wpappbox wpappbox-40a4e7ddfe16a063bbfa2cf8f4390cdb wordpress colorful compact\">\n\t<div class=\"appicon\">\n\t\t<a target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/wordpress.org\/plugins\/twentytwenty\/\"><img decoding=\"async\" src=\"\/\/s.w.org\/plugins\/geopattern-icon\/twentytwenty_706f70.svg\" alt=\"twentytwenty\" \/><\/a>\n\t<\/div>\n\t<a target=\"_blank\" rel=\"nofollow\" class=\"applinks\" href=\"https:\/\/wordpress.org\/plugins\/twentytwenty\/\"><\/a>\n\t<div class=\"appdetails\">\n\t\t<div class=\"apptitle\"><a target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/wordpress.org\/plugins\/twentytwenty\/\" class=\"apptitle\">twentytwenty<\/a><\/div>\n\t\t<div class=\"price\">\n\t\t\t<span class=\"label\">Preis: <\/span>\n\t\t\t<span class=\"value\">Kostenlos<\/span> \n\t\t\t<span class=\"rating\"><\/span>\n\t\t<\/div>\n\t<\/div>\n<\/div><!-- \/WP-Appbox -->\n<p>So funktioniert&#8217;s: Das Plugin erm\u00f6glicht den Einsatz von zwei neuen Shortcodes:<\/p>\n<p>[twentytwenty]\u00a0und\u00a0[\/twentytwenty]<\/p>\n<p>Zwischen diesen beiden Schnipseln baut man zwei gleich gro\u00dfe Bilder ein, also Fotos mit identischen Kantenl\u00e4ngen. Das Plugin baut dazu das n\u00f6tige CSS und HTML zusammen: Es legt beide Fotos \u00fcbereinander, blendet einen Schieberegler ein und beschneidet sozusagen das oben liegende Bild von rechts, je nachdem, an welcher Stelle der Schieberegler gerade steht.<\/p>\n<div class=\"twentytwenty\" class=\"twentytwenty-container\" style=\"display: none; max-width: 100%; width: 1280px; height: 853px\"><img decoding=\"async\" src=\"https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2017\/01\/IMG_6009-2.jpg\"\/><img decoding=\"async\" src=\"https:\/\/www.kohlhof.de\/kohlhof\/wp-content\/uploads\/2017\/01\/IMG_6009-1.jpg\"\/><\/div>\n<p>&nbsp;<\/p>\n<p>Funktioniert problemlos &#8211; sogar responsiv. Bildunterschriften werden nicht mit angezeigt.<\/p>\n<p>Die App liegt in Version 1.0 vor, ist allerdings seit zwei Jahren nicht mehr aktualisiert worden &#8211; sie funktioniert hoffentlich noch lange, also auch mit k\u00fcnftigen 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 &#8211; vielleicht irgendwas mit Fityfifty.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Die Vorher-Nachher-Fotos von der Ostseesturmflut erfreuen sich gro\u00dfer Beliebtheit. Das liegt sicherlich auch am WordPress-Plugin, das den Bildervergleich \u00fcberhaupt erst m\u00f6glich macht. Um dieses Plugin geht es: So funktioniert&#8217;s: Das Plugin erm\u00f6glicht den Einsatz von zwei neuen Shortcodes: Zwischen diesen beiden Schnipseln baut man zwei gleich gro\u00dfe Bilder ein, also Fotos mit identischen Kantenl\u00e4ngen. Das &hellip; <a href=\"https:\/\/www.kohlhof.de\/kohlhof\/2017\/01\/05\/20-20-die-technik-hinter-den-schiebebildern\/\" class=\"more-link\"><span class=\"screen-reader-text\">\u201e20-20, die Technik hinter den Schiebebildern\u201c <\/span>weiterlesen<\/a><\/p>\n","protected":false},"author":55,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"h5ap_radio_sources":[],"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[1118,630,1120,722,736,1119,150],"class_list":["post-5607","post","type-post","status-publish","format-standard","hentry","category-allgemein","tag-bilder","tag-foto","tag-nachher","tag-plugin","tag-vergleich","tag-vorher","tag-wordpress"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paimI-1sr","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/www.kohlhof.de\/kohlhof\/wp-json\/wp\/v2\/posts\/5607","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kohlhof.de\/kohlhof\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kohlhof.de\/kohlhof\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kohlhof.de\/kohlhof\/wp-json\/wp\/v2\/users\/55"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kohlhof.de\/kohlhof\/wp-json\/wp\/v2\/comments?post=5607"}],"version-history":[{"count":8,"href":"https:\/\/www.kohlhof.de\/kohlhof\/wp-json\/wp\/v2\/posts\/5607\/revisions"}],"predecessor-version":[{"id":5616,"href":"https:\/\/www.kohlhof.de\/kohlhof\/wp-json\/wp\/v2\/posts\/5607\/revisions\/5616"}],"wp:attachment":[{"href":"https:\/\/www.kohlhof.de\/kohlhof\/wp-json\/wp\/v2\/media?parent=5607"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kohlhof.de\/kohlhof\/wp-json\/wp\/v2\/categories?post=5607"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kohlhof.de\/kohlhof\/wp-json\/wp\/v2\/tags?post=5607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}