• Zur Hauptnavigation springen
  • Skip to main content
  • Zur Hauptsidebar springen
  • Zur Fußzeile springen
MAMEDi  @  Home » Design + WordPress » Flexible Bildergalerie mit „Kolumnen“

MAMEDi-Logo MAMEDi

  • Home
  • ! BLOG ?
  • Referenzen
  •   
  • Mediation
  • ? MM !
  • Impressum

Flexible Bildergalerie mit „Kolumnen“

20. August 2016 MAMEDi Kommentar schreiben!

Für die Darstellung einer Bildergalerie, z.B. in einem Artikel, wird nicht unbedingt ein Plugin benötigt. Denn „WordPress“ bietet bereits von Haus aus verschiedene Möglichkeiten, wie man Bilder fließend in Artikel oder eine Seite einbauen kann. Das funktioniert jedoch nicht reibunglos ohne Probleme, weil die „CSS“-Angaben in jedem Fall an das eigene Theme angepaßt werden müssen, damit es nicht halbfertig, unprofessionell oder gar stümperhaft aussieht.

Hinweis: Bei der hochformatigen „Portrait“-Ansicht mit einem Tablet (768 x 1024 Pixel) und den kleineren Smartphones werden die in diesem Artikel besprochenen „Kolumnen“ nicht mehr nebeneinander, sondern untereinander dargestellt.

Flexible Darstellung beim „Responsive Design“

Manche Themes bieten eine weitere Möglichkeit, sogenannte „Kolumnen“, mit denen sich sowas ohne große Umstände sehr gut organisieren läßt. Bei einem modernen, flexiblen Theme übernehmen sie alles Notwendige für das „Responsive Design“ und passen sich dynamisch an die Bildschirmgröße des jeweiligen Gerätes (Smartphone, Tablet, Desktop oder Laptop) an.

? Drei Kolumnen !

Drei Bilder im selben Format.

Text für erstes Bild

Text für zweites Bild

Text für drittes Bild

? Vier Kolumnen !

Für das querformatige Bild wurden zwei Kolumnen zusammengefaßt.

Text für erstes Bild

Text für zweites Bild

Text für drittes Bild

Durch solche „Kolumnen“ bekommt man eine ebenso simple wie elegante Möglichkeit abgegrenzte Bereiche zu definieren, ohne dafür ein Plugin installieren zu müssen. Für diese Anwendung sind nur ein paar grundlegende „CSS“- und „HTML“-Kenntnisse erforderlich.

? Zwei, drei und vier Kolumnen !

Damit läßt sich alles platzsparend darstellen, sieht gut sortiert aus und ist „Responsive“.

Text für erstes Bild

Text für zweites Bild

Text für erstes Bild

Text für zweites Bild

Text für drittes Bild

Text für erstes Bild

Text für zweites Bild

Text für drittes Bild

Text für viertes Bild

Bei einer Mischung aus hoch- und querformatigen Bildern muss man sorgfältig arbeiten und gegebenfalls die Fotos zuschneiden, damit nicht das passiert, was sich an den folgenden beiden Beispielen nachvollziehen läßt, wo die Verteilung der Fotos ziemlich unfertig aussieht.

? Halbfertig bis chaotische Darstellung !

Bildschirmfoto · Zahnzentrum Dinklage

Bildschirmfoto: Der Artikel bei „Made in Dinklage“

Fotos in Artikel über das Zahnzentrum Dinklage

Fotos im Artikel: „Im Zahnzentrum Dinklage wird’s noch musikalischer“ (18. August 2016)

Bildschirmfoto · Kolpingorchester Dinklage

Chaotische Darstellung bei „Made in Dinklage“

Methoden: WP-Caption, WP-Galerie oder Kolumnen

Bei diesen halbfertig wirkenden Beispielen wurde mit der „wp-caption“-Methode von „WordPress“ gearbeitet, die eher für ein einzelnes Bild gedacht ist und wie ja zu sehen ist, klappt es damit nicht. Stattdessen wäre es besser, eine Galerie mit der gewünschten Spaltenanzahl in „WordPress“ zu erstellen, wobei dann allerdings noch die CSS-Klassen an das Theme anzupassen sind. Mit den in diesem Artikel vorgestellten Kolumnen und den neueren Webstandards (HTML5 und CSS3) funktioniert sowas ohne Probleme und ist obendrein „Responsive“.

CSS-Angaben: wp-caption

.wp-caption { … }
.wp-caption img { … }
.wp-caption p.wp-caption-text { … }

Nicht nur der erste Arbeitschritt, die Fotos auszuwählen und zuzuschneiden, damit sich hoch- und querformatige Bilder gut in einer Galerie zusammenlegen lassen, ist wichtig. Auch der zweite Schritt, die passende Methode (richtig) anzuwenden, ist entscheidend und zum Dritten müssen die technischen Voraussetzungen – speziell: ein gut strukturiertes Theme – gegeben sein.

? Galerie mit Plugin · „Master-Slider“ !

Zuckertopf

Ach Herrje, wie süß ist das denn?

Zwei Birnen

Obstfoto mit Lichtquelle von rechts.

Tachometer

Upps, etwas unscharf und total verwackelt.

Zwei Bananen

Überreif und (so gerade eben) nicht mehr zu genießen.

Wischeimer

Aufräumen, „Saubermachen“ und Ordnung halten gilt auch für eine Homepage.

Erdbeeren

Mit Teelöffel (für Linkshänder) in Glasschälchen auf blauer Tischdecke.

Bleistiftzeichnung

Das „MAMEDi“-Strichgesicht in Weiss auf verrauschtem Hintergrund.

Slider mit Vorschau

Mit Slider und Vorschaubildern läßt sich eine kompakte Darstellung realisieren.

Keksdose

Ebenso wie im „Analogen“ gibt es im „Digitalen“ Boxen für verschiedene Zwecke.

Vom „Master-Slider“ gibt es eine kostenlose und eine „Pro-Version“.

Es gibt schon einige interessante Plugins (siehe oben), die eine umfangreiche Auswahl mit verschiedenen Darstellungsoptionen (inclusive Slider) für Bildergalerien anbieten, aber wie bereits erwähnt, wird für eine kleinere Galerie nicht unbedingt ein Plugin benötigt. Ob mit oder ohne Plugin, die Pflege und Aktualisierung einer Internetpräsenz erfordert eine konsequent sorgfälte Arbeitsweise, damit alles gut organisiert bleibt. Mit „responsiven Kolumnen“ lassen sich viele Dinge und vor allem ein aufgeräumtes, gut strukturiertes Erscheinungsbild verwirklichen.

Drei Beispiele mit Kolumnen*

1) „Medi ? ation“
2) „Responsive Webdesign“
3) „Percussion-Festival 2009“

* Die journalistische „Kolumne“ ist hier nicht gemeint, sondern ein Layout mit mehreren Spalten (engl. „columns“). In diesem Artikel geht es um die Verteilung des Inhalts in „Kolumnen“ (= Spalten), jedoch nicht um den seit „CSS3“ möglichen „Spaltensatz“ (Gliederungsmittel beim Buchdruck), der im Web bislang eher selten anzutreffen ist.

? Schlußbemerkung mit zwei Gedanken !

Beim Gemeinschaftsportal „Made in Dinklage“ ist die halbfertig wirkende Darstellung von Bildern in Artikeln und eine unübersichtliche Formatierung der Texte häufiger anzutreffen, was mich wundert, da das Projekt von einem Dienstleister „professionell“ betreut wird.

Außerdem wurde sie erst im November 2014 gestartet, also zu einer Zeit, als das Thema „Responsive Webdesign“ für eine zukünftige Homepage als Voraussetzung und technische Grundlage bereits in aller Munde war und eine gewisse Selbstverständlichkeit hatte.

Mehr zu „Made in Dinklage“ bei MAMEDi.

Design + WordPress Design, Dinklage, Kolumnen, Plugin

Who is „MAMEDi“?

Unter dem programmatischen Akronym „MAMEDi“ schreibt hier der Schlagzeuger, Komponist und Dipl.-Musikpädagoge „Manfred Menke“ (Dinklage) unregelmäßig nach Lust und Laune und garantiert völlig meinungsfrei über alles (Un)Mögliche. Da er für verschiedene Projekte als „Mediengestalter“ tätig ist, befasst sich ein Teil seiner BLOG-Artikel mit Problemen, die bei der Organisation, der Aktualisierung und der Pflege von Internetpräsenzen auftreten können, wobei er grundsätzlich an funktionierenden und praktischen Lösungen interessiert ist.

Homepage: „www.manfred-menke.de“, Projekt: „www.schlagzeug-dinklage.de“

Vorheriger Beitrag: « Plugins für Responsive Navigation
Nächster Beitrag: Umzug und Umstellung auf „https“ »

Leser-Interaktionen

Kommentar schreiben! Antworten abbrechen

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

Haupt-Sidebar

Hallo Blog-Leser(in)!

MAMEDi-Logo

Für die Richtigkeit oder den „Wahrheitsgehalt“ der hier bereit gestellten Informationen geben die Autoren keine Gewähr und übernehmen auch keine Haftung für irgendwelche daraus resultierenden Konsequenzen. Deshalb gilt das ironisch formulierte Motto: „Lesen auf eigene Gefahr!“. Oder: „Alles, was hier steht ist wahr, auch wenn's nicht stimmt, ist das klar!“

MAMEDi

SD-Visitenkarte
DEMO-Homepage
! Ach, wie „süss“ ist das denn ?

Kaum zu glauben. Dieser (alte) Zuckertopf ist das letzte Überbleibsel von einem „Kaffeeservice“ meiner Mutter und ist bereits mehr als 60 Jahre alt. Nun ziert er als süßes Favicon die „DEMO“-Homepage.

Die letzten 13 Artikel

  • Zeitenwende · Philosophische Momente
  • Ein frohes, neues Jaaaaahhh!
  • Dynamische Wahrheit
  • Haben wir nicht auch alle Wurzeln?
  • Desinfektion mit Chlordioxid
  • Konzert · Arparimba im Autohaus Ruhe
  • Tschüss Berlingo!
  • Konzert: „Zeitgenössische Musik“ (Dinklage)
  • Herbst im Burgwald Dinklage
  • Unerwünschtes „OSTER“-Feuer am Friedhof
  • Ein Logo für Schlagzeug Dinklage
  • Triomotion begeistert das Publikum
  • Konzert mit „TRIOMOTION“ in Dinklage
Snatakazing

Kategorien

  • Allgemein / Infos (38)
  • Computer + Technik (12)
  • Design + WordPress (39)
  • Ernährung + Umwelt (22)
  • Geh Dichte + Texte (31)
  • Ideen, Leben, Werte (36)
  • Musik + Projekte (33)
  • Politisch – Unkorrekt! (30)
  • Spaß + Humor = Ernst (14)

Strichgesicht @ MAMEDi

MAMEDi-Logo

Diese am 8. März 2009 spontan gekritzelte Bleistiftzeichnung zeigt ein vor Begeistertung leicht schielendes „Strichgesicht“ und ist seit 2014 das Maskottchen dieser Homepage, die anfänglich unter „mmdiesein.de“ firmierte und seit August 2013 unter „MAMEDi“ läuft.

Footer

   
! Datenschutz ?

Kontakt  @  MAMEDi

Fon  (0 44 43) 50 84 54
Mobil  (01 79) 32 56 808
E-Post:  „mail@mamedi.de“

MAMEDi-Schuhe

Web · Projekte

Barfuß gehen ist zwar schön, für manche Wege aber ungeeignet. Deshalb ist gutes Schuhwerk wichtig, um unversehrt ans Ziel zu kommen. Eine Homepage benötigt ebenfalls eine solide Basis. Diese hier wird mit „WordPress“ als Motor angetrieben.

Die letzten 13 Artikel

  • Zeitenwende · Philosophische Momente
  • Ein frohes, neues Jaaaaahhh!
  • Dynamische Wahrheit
  • Haben wir nicht auch alle Wurzeln?
  • Desinfektion mit Chlordioxid
  • Konzert · Arparimba im Autohaus Ruhe
  • Tschüss Berlingo!
  • Konzert: „Zeitgenössische Musik“ (Dinklage)
  • Herbst im Burgwald Dinklage
  • Unerwünschtes „OSTER“-Feuer am Friedhof
  • Ein Logo für Schlagzeug Dinklage
  • Triomotion begeistert das Publikum
  • Konzert mit „TRIOMOTION“ in Dinklage

Über MAMEDi

Logo · MAMEDI.DE Der Name „MAMEDi“ ist das „Akronym“ für „Manfred Menke, Dinklage“ und präsentiere auf dieser Seite u.a. meine Arbeit als Mediengestalter. Dazu gehören Konzeption und Gestaltung von Internetseiten sowie die Erstellung von Drucksachen wie Flyer und Plakate. Das Motto „Lesen auf eigene Gefahr!“ für den BLOG gilt weiterhin.

MM-Homepage

MM-2018-Favicon Wenn ich gerade kein Medium gestalte oder irgendwelche Pixel als „MAMEDi“ hin und her schubse, schlage ich genauso begeistert ganz woanders zu. Ausführliche Informationen zu allen Kompositionen und über meine Aktivitäten im Arbeitsfeld als Schlagzeuger, Komponist und Dipl.-Musikpädagoge gibt es auf meiner „MM“-Homepage, die meine musikalische (Internet)Seite dokumentiert.

Musik: „www.manfred-menke.de“
Vier Pflaumen
  • Home
  • ! BLOG ?
  • Referenzen
  • ? MM !
  • Impressum

MAMEDi  ·  Copyright © 2022  ·  WordPress