An Entwickler: WP Bootstrap 3.2 in Theme oder Plugin

Hallo in die Runde,

===
Spoiler: Der nachfolgende, sehr lange Beitrag richtet sich vorwiegend an Entwickler mit "responsiven" Kenntnissen und der Absicht, etablierte CSS Frameworks zu nutzen, wie Bootstrap oder Foundation.
===

ich arbeite erst seit kurzem an und um Wordpress, entwickle aber bereits viele Jahre mit php im Umfeld CMS u.Ä. Um den Einstige zu finden, erstelle ich seit ca. 3 Wochen ein Bootstrap 3.2 basierendes responsive Theme. Meine Basis dafür war "Twentyforteen", zusammen mit Einblicken in andere, bereits vorhandene Bootstrap Themes. Alles bisherige klappt bestens. Soll heißen: Featured Content, Custom Headers, Widget-Bereiche, mehrere Navigationselemente, Post Thumbnails. Alles ist responsive und spricht jetzt "Bootstrap". Den Bloat an Wordpress Klassen habe ich erst mal beibehalten, habe Bootstrap typische Klassen hinzugefügt. Wirkliches Aufräumen folgt dann am Schluss. Mein Theme erstelle ich für meine private Site, habe also auch keine Probleme, es nach Fertigstellung der Community zu geben.

Nicht gekümmert hatte ich mich bislang um den Content-Bereich, und genau hier beiße ich jetzt auf eine Nuss, die ich nicht geknackt kriege. Es geht um Bilder (oder Ähnliches) im Content. Man neigt natürlich dazu, alles, was das BE unterstützt, auch umzusetzen. Dazu zählen links oder rechts floatende Bilder, mit oder ohne Caption.

Ich suche hier nicht unbedingt die "Lösung" meines Problems, sondern würde lieber das Thema "responsive Images im Text" abstrakt diskutieren.

Im ersten Schritt habe ich mir mal Image Handling bei etablierten Redaktionssystemen angeschaut. SPON, Süddeutsche und Guardian benutzen, auf Wordpress Sprech übersetzt, ausschließlich Post-Thumnails und Gallerien (Bilderstrecke). In-Content Images kommen nicht vor. Noch nicht mal als Block-Elemente, die einfach zu realisieren wären. Keine der Sites hat den Anspruch, responsive zu sein - es wäre somit Pipifax, In-Content Bilder zu nutzen. Tun sie aber nicht.

Damit ein Bild responsive im Text floaten kann, darf es ruhig Breite und Höhe haben. Width und Height sind zwar ein Anachronismus, aber unter dem leidet nicht nur Wordpress. Viel wesentlicher ist, dass das Elternelement weiß, wie breit das Bild ist.

Mit Bordmitteln erzeugt Wordpress folgenden Markup für ein links floatendes Bild mit Caption:

HTML:

Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

Man erkennt das Problem schnell. Die Klasse "size-medium" klebt nicht am Elternelement "figure", sondern am Bild, wo sie überhaupt keinen Sinn macht (zumindest nicht, bevor jemand den Parent-Selektor im css erfunden hat). Wahrscheinlich hängt die Klasse sinnlos am IMG Tag, weil bei Abwesenheit eines Caption keinerlei Wrapper ausgegeben wird, sondern nur der blanke IMG-Tag. Warum eigentlich? "figure" ist auch ohne "figcaption" zulässig.

Gestern habe ich eine Lösung auf Basis des "img_caption_shortcode" Filters erstellt, die funktioniert - zumindest für im System fest vorgegebene Bildergrößen. Der erzeugte Markup sieht so aus (diesmal einige WP Klassen weggelassen):

HTML:

Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

Die Klasse "size-medium" erhält hier eine Breite in % (Bild zu Text-Verhältnis). Das Bild (max-width: 100% füllt sie immer komplett aus, und wird somit responsive. Über Media-Queries nimmt man es ab einem definierten Breakpoint aus dem Textfluss, und gut ist. Tut man dieses nicht, so floated das Bild auch bei kleinsten Displays neben dem Text - im korrekten Verhältnis. Da es mir nicht möglich war, im Filter an die IMG-Klasse zu gelangen (ausser den $content zu filettieren), musste ich die "$atts['width']" abfragen, um zu ermitteln, um welche Bildklasse es sich wohl handeln mag. Das ist übler Bastelkram, und auch nicht geeignet, beliebige Bildabmessungen (arbitrary) zuzulassen. Ich scheitere letztendlich daran, dass ich zwei Filter kombinieren, und aus dem ersten (image_send_to_editor), die Bildklasse in den zweiten (img_caption_shortcode) übergeben müsste. Das geht nicht.

Jetzt, da meine Bastelkramlösung fertig ist, stelle ich mir die Frage, ob floatende Bilder im Text überhaupt noch zeitgemäß sind. Sinn machen diese, in Bootstrap Sprech, nur bei col-md-x und col-lg-x Spalten, oder bei winzigen Icons, die wiederum nicht responsive sein müssten.

Wäre es ein tolerabler Ansatz zu sagen, in einem wirklich responsivem Wordpress Theme von "heute" gibt es keine im Text floatenden Bilder? Mit diesem Paradigma wäre es sehr einfach, Bilder beliebiger Größe responsive und sauber auszugeben. Dies ginge voraussichtlich unter ausschließlicher Nutzung von "img_caption_shortcode". Nach folgendem Ansatz:

1. Jedes IMG / FIGURE-IMG bildet eine Bootstrap row.
2. Anhand der hardcodierten Bildbreite ($atts['width']) werden geeignete Bootstrap column Klassen gewählt (idealerweise berücksichtigt man diese bereits bei der Wahl der Standard Bildformate).
3. Ist diese Bootstrap Klasse eine col-x-12 Klasse, so ist jede Align-Einstellung sinnlos (ignore align). Ist die Klasse < 12, so nutzt man Bootrap col-x-offset- Klassen für die Ausrichtung innerhalb der Zeile. So behalten die Steuerelemente im BE ihre Bedeutung.

Vorteile:

1. Bilder sind trotz old-school Größenangaben automatisch responsive.
2. Auf kleinen Devices "stacken" sie automatisch richtig
3. Ohne custom css oder js und ohne tiefen Eingriff in WP Image Klassen (es wird lediglich die img-responsive Klasse zu allen Bildern hinzugefügt)
4. Identisches Vorgehen nutzt man bei Bootstrap basierenden Galerien sowieso - Images werden in grids gepackt, der Code kann also wiederverwendet werden.

Nachteile:

1. Kein Bild-im-Text
2. Kleines Devices erhalten Desktop Bildgrößen ausgeliefert. Aber das empfinde ich derzeit als Baustelle B - oder als PAL - ein Problem anderer Leute.

Wie wäre Eure Denke dazu? Opfert man "Bild-im-Text", so gewinnt man eine banal einfache Lösung.

Mein Königsweg wäre:

1. Kein zusätzliches JS
2. Kein Custom CSS (pure Bootstrap), außer es geht um wirkliches Styling. Keine Styles, die nur Markup Defizite in WP beheben (das geht auf Dauer immer schief).

Bin gespannt zu erfahren, wie Ihr das handhabt, bzw. handhaben würdet.

Grüße,

Thomas

 

Ja, der Artikel ist ausgezeichnet. Danke für den Link.

Er beschreibt aber eher, was ich unter "Baustelle B" gelistet habe. Ich beobachte die Diskussion um neue Tags für responsive Images bereits seit einer ganze Weile. Im November 2013 war der neue "picture" Tag klinisch tot, jetzt scheint er wieder im Rennen. Auch wenn ihn heute bereits einige Browser unterstützen, so fehlt mir noch das klare Commitment: "Ja, das ist der Weg der Zukunft". Ein wesentlicher Grund für die Nutzung von Bootstrap ist für mich, dass es für einen PHP Entwickler schier unmöglich ist, hinsichtlich Browser-Nickeligkeiten und CSS-Entwicklung auf dem Laufenden zu bleiben. Man arbeitet bereits an Bootstrap 4, und ich denke, da wird auch ein Ansatz für responsive Assets enthalten sein. Soll wohl auch früher kommen, als erwartet.

Zur Implementation muss man natürlich noch mehr Einfluss nehmen auf die Markup Generierung seitens WP. Gerade deshalb such ich derzeit die "kleine Lösung" für zwischendurch.

Das alles sprengt auch längst den Rahmen eines Themes. 30% meines derzeitigen Codes gehörte eher in ein Plugin, denn eigentlich müsste man das gesamte Image-Rendering austauschen. Das ist ne harte Nuss.