{"id":342,"date":"2022-11-05T13:54:18","date_gmt":"2022-11-05T12:54:18","guid":{"rendered":"https:\/\/www.servicepraxis.com\/plugins\/?page_id=342"},"modified":"2026-02-23T10:17:47","modified_gmt":"2026-02-23T09:17:47","slug":"lightbox","status":"publish","type":"page","link":"https:\/\/www.servicepraxis.com\/plugins\/lightbox\/","title":{"rendered":"Bildergalerien mit einer Lightbox"},"content":{"rendered":"\n

Zur Gestaltung von Multimediainhalten in WordPress bieten sich Lightboxen<\/strong> an. Bei dieser Form der Darstellung wird nach dem Klick auf ein Vorschaubild die Seite beispielsweise abgedunkelt und quasi dar\u00fcber schwebend legt sich gro\u00dfformatig das Bild. Gerade wenn die Website durch Bilder erst richtig auflebt, wie z.\u00a0B. bei Webseiten f\u00fcr K\u00fcnstler, Galeristen oder Auktionsh\u00e4user<\/a>,<\/strong> wo es beim Bild auf Details ankommt<\/strong>, erhalten Sie ein sauberes Design, um Details und Strukturen optimal darzustellen. Liegen alle Bilder in gleicher Gr\u00f6\u00dfe (H\u00f6he x Breite) vor, bedarf es eigentlich keines Plugins wie Lightbox with PhotoSwipe<\/em>. Ein Eintrag der Funktion und etwas Javascript reicht schon aus.<\/p>\n\n\n\n

\n
\n
\n

Masonry<\/p>\n\n\n\n

Mit dem sog. Masonry-Layout k\u00f6nnen Inhalte wie Bilder<\/a> oder Card-Elemente<\/a> ansprechend und platzsparend auf einer Website angezeigt werden. Im Gegensatz zu klassischen Rastern zeichnet es sich durch eine versetzte Optik<\/strong> aus \u2013 daher auch der Name (Masonry = Mauerwerk).<\/p>\n\n\n\n

Aus technischer Sicht ist das echte Masonry-Layout nicht immer problemlos umsetzbar \u2013 zumindest nicht ohne JavaScript und wenn es responsive sein soll. Inkompatible Browser erhalten von mir daher z.\u00a0B. mehrspaltige Darstellung als Fallback. Gemeinsamer Nenner aller Bilder ist hier, dass wir die Vorschaubilder (sogenannte Thumbnails) in die gleiche Breite bringen k\u00f6nnen, die H\u00f6he jedoch unterschiedlich sein wird. Die Generierung der Thumbnails und die Ausgabe auf der Seite in passender Gr\u00f6\u00dfe zum jeweiligen Bildschirm bzw. Endger\u00e4t \u00fcbernimmt dann WordPress.<\/p>\n\n\n\n

Mehr Infos zum Einsatz von Masonry finden Sie hier<\/a>.<\/p>\n<\/div>\n\n\n\n

\n
\"Bildergalerien
Bildergalerien mit Photoswipe Lightbox<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"Bildergalerien
Bildergalerien mit Photoswipe Lightbox<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n

Eigene Bilder versus Stockfotos<\/p>\n\n\n\n

Im Idealfall empfehle ich immer eigenes Bildmaterial als Alleinstellungsmerkmal<\/strong> zu verwenden. Sie unterstreichen die eigene Authentizit\u00e4t und sind auch hinsichtlich des Urheberrechts schon mal fein raus.<\/p>\n\n\n\n

Stockfotos aus Bilddatenbanken<\/strong> haben nat\u00fcrlich Ihre Berechtigung. Gerade dann, wenn es einmal schnell gehen muss, in sozialen Medien etwas ver\u00f6ffentlicht werden soll oder das passende Bild gerade wieder einmal nicht verf\u00fcgbar ist. Allerdings haben Sie keine exklusiven Rechte<\/strong>, sodass das Bild auch auf hunderten anderer Seiten verwendet werden kann. Suchdienste erkennen Fotos, die heute ein wichtiger Rankingfaktor sind, unabh\u00e4ngig von Dateinamen und Alt-Tags. Genauso wie die Verwendung auf verschiedenen Websites und wertet die eigene Seite ggf. aufgrund der mehrfachen Verwendung (sogenannter Duplicate Content<\/em>) ab.<\/p>\n\n\n\n

\n
\n
\n
\"Bildergalerien
Bildergalerien mit Photoswipe Lightbox<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n

Photoswipe<\/p>\n\n\n\n

Photoswipe bietet mit Tiled Deep Zoom<\/em> einen kachelbasiertem Bildbetrachter<\/strong>, der die Anzeige extrem gro\u00dfer Bilder erm\u00f6glicht.<\/p>\n\n\n\n

Im Gegensatz zu anderen Skripten zeigt es Bilder im gr\u00f6\u00dften Format erst an, nachdem der Benutzer \u00fcber das prim\u00e4re Bild hinausgezoomt hat. Ein Plugin f\u00fcr WordPress integriert eine erweiterte Version von PhotoSwipe 4 oder die letzte offizielle Version 5 der Javascript Bibliothek. Mehr Infos und Beispiel hier<\/a>.<\/p>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n

Hinsichtlich Bilddatenbanken mit kostenlosen, lizenzfreien Fotos<\/strong> wie Pixabay oder Unsplash besteht immer die theoretische M\u00f6glichkeit, dass Nutzer:innen Fotos hochladen, an denen diese gar keine Rechte haben oder dass Personen- bzw. Markenrechte o.\u00a0\u00e4. verletzt werden. Neben klassischen Urheberrechtsverletzungen fallen hierunter auch beispielsweise Fotos von Dosen eines bekannten Herstellers von koffeinhaltiger Limonade ebenso wie ein beleuchteter Eiffelturm bei Nacht. Aber auch Fotos des Berliner Hauptbahnhofes ohne Nennung des Architekten. Eine Datenbank mit einer \u00dcbersicht \u00fcber gesch\u00fctztes geistiges Eigentum und dessen Nutzung bietet The Intellectual Property Wiki<\/em> unter wiki.gettyimages.com<\/a>.<\/p>\n\n\n\n

\n
\n

Fallbeispiel Bildergalerien<\/p>\n\n\n\n

Die K\u00fcnstlerin Margot Luf stellt, auf der vom mir programmierten und betreuten Website ihr Werk, gegliedert in Themen, in Wort und Bild in Kombination aus Masonry und Lightbox ausf\u00fchrlich dar: \u279a www.margot-luf-art.de<\/a>.<\/p>\n<\/div>\n<\/div>\n\n\n\n

Bei jeglicher Verletzung des Urheberrechts<\/strong> haften mit ziemlicher Sicherheit Sie als sogenannter St\u00f6rer, nicht aber der Betreiber der Datenbank. Kommerzielle Anbieter von Stockfotos stehen dagegen in der Regel, sofern Sie die deren Lizenzbestimmungen hinsichtlich der Nutzung des Fotos eingehalten haben, f\u00fcr solche Probleme ein. Eingrenzen l\u00e4sst sich die Thematik bei frei verf\u00fcgbaren Bildern durch Nutzung der Bildsuche bei einem Suchdienst. Auch wenn das keine Garantie sein kann, aber je mehr Websites das gew\u00fcnschte Bild einsetzen, desto eher ist davon auszugehen, dass es tats\u00e4chlich frei verwendet werden darf. Manch soziales Netzwerk<\/strong> beh\u00e4lt sich im \u00dcbrigen das Recht vor, die von Ihnen in Beitr\u00e4ge hochgeladenen Bilder auch zu Werbezwecken lizenzfrei zu nutzen.<\/p>\n\n\n\n

Bilder in WordPress<\/strong><\/h3>\n\n\n\n

Oft werde ich nach den optimalen Bildgr\u00f6\u00dfen gefragt. Die Antwort ist, wie es mal wieder nicht anders sein kann: Es kommt darauf an. Zum einen h\u00e4ngen diese vom Layout bzw. Design des Themes bzw. der Website ab, zum anderen wo diese auf der Webpage eingesetzt werden und welchen Zweck die Bilder haben. Die Seiten einer Kunstgalerie leben von Bildern, ein Beratungsunternehmen wird diese eher nur zur Unterstreichung der eigenen Messsage nutzen: www.servicepraxis.com\/bilder<\/a>.<\/p>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"

Zur Gestaltung von Multimediainhalten in WordPress bieten sich Lightboxen an. Bei dieser Form der Darstellung wird nach dem Klick auf ein Vorschaubild die Seite beispielsweise abgedunkelt und quasi dar\u00fcber schwebend legt sich gro\u00dfformatig das Bild. Gerade wenn die Website durch Bilder erst richtig auflebt, wie z.\u00a0B. bei Webseiten f\u00fcr K\u00fcnstler, Galeristen oder Auktionsh\u00e4user, wo es […]<\/p>\n","protected":false},"author":1,"featured_media":338,"parent":0,"menu_order":21,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[6],"class_list":["post-342","page","type-page","status-publish","has-post-thumbnail","hentry","tag-bildergalerien"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/pages\/342","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/comments?post=342"}],"version-history":[{"count":0,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/pages\/342\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/media\/338"}],"wp:attachment":[{"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/media?parent=342"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.servicepraxis.com\/plugins\/wp-json\/wp\/v2\/tags?post=342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}