Archiv der Kategorie: HTML

Alle Bilder: jetzt gehts an die Ausgabe

Jetzt kommt die Schlamperei auf

Wenn alles geklappt hat, dürfte der phpmyadmin jetzt nur noch die fünf mit dem „as“ benamsten Felder ausgeben. Und wenns euch genauso geht wie mir und ihr beim Bilder hochladen geschlampert habt, steht im alt-Text und im Titel genau das gleiche drin, und die Beschreibung ist in vielen Fällen leer, einfach weil man beim Hochladen nichts angegeben hat. Ich war sogar noch etwas mehr gschlampert: bei mir haben die Felder Bildtitel, Bildbeschreibung und Bild_alttext den selben Wert, weil ich hier einfach mit Copy&Paste gearbeitet habe.

Wo bleibt da die Barrierefreiheit?

Ganz einfach, ich komme damit durch, weil es sich bei meinen Beiträgen um schlichte Kochrezepte handelt. Wenn da als alt-Text „lasagne“ oder „huhn-mit-prosecco“ steht, ist das voll OK weil sich im Kontext „Online-Kochbuch“ jeder etwas darunter vorstellen kann.

Das PHP-Skript

Ich hab da erstmal eine tabellarische Ausgabe gemacht:

join_posts_und_postmeta

join_posts_und_postmeta

Das Wichtigste ist eigentlich, daß in der foreach-Schleife die Felder aus dem Join jetzt mit dem Alias angesprochen werden, den wir jeweils mit dem „as“ angelegt haben. Sonst ist der Aufbau analog zu dem, was wir schon mit den Beiträgen und den Beitragsbildern gemacht haben, erinnern sie sich?

Ich geh mal jetzt ein bißchen in den Schnelldurchgang, das haben wir ja schließlich alles schon mal gehabt. Tabellentags raus, img src rein, div um die foreach-Schleife gelegt, ein wenig CSS Styling.

Die neue foreach-Schleife

Die sieht jetzt so aus:

join_post_und_postmeta_ausgabe

join_post_und_postmeta_ausgabe

Wenn man jetzt beim Hochladen der Bilder aussagekräftige Inhalte für Bildbeschreibung, -beschriftung -titel und alt-Text eingegeben hätte, bekäme man auch was Ordentliches zu sehen. Probieren sie es aus, laden sie mal ein paar neue Bilder hoch und machen sie sich die Mühe, alle Felder vernünftig auszufüllen. Dazu hätte ich noch einige Anmerkungen, aber jetzt schauen wir uns erstmal unsere Ausgabe aller Bilder an. Bei mir sieht man gleich, daß ich geschummelt habe und in der Bildbeschreibung das selbe drinsteht wie in der Bildbeschriftung, und daß meine Bildchen sehr unterschiedliche Formate haben:

neu_join_screenshot

neu_join_screenshot

Wenn man übrigens mit der Maus über eines der Bilder fährt, poppt der title-Text auf – hübscher Effekt, finde ich 🙂

WordPress macht das allerdings von selber nicht, im img src-Tag im post_content wird der Bildtitel nicht mit eingetragen, der entschwindet irgendwo im Nirvana 🙁

Das Problem mit den Hoch- und Querformaten

Tscha, da haben wir es wieder. Natürlich kommen die Querformate hier wieder zu klein raus, weil die Breite ja mit der width-Anweisung im img src Tag festgelegt ist. Aber ich hab lieber das GANZE Bild in der Anzeige, als ein zugeschnittenes Quadratchen mit x-beliebigem Bildausschnitt. Meine persönliche Meinung.

Was fehlt noch?

Jetzt wäre es natürlich schick, wenn man zu jedem Bild auch einen Link auf den zugehörigen Beitrag oder die zugehörige Seite hätte. Was hab ich da wispern gehört – parent_id? Genau! Aber dafür gibts einen neuen Beitrag.

Jetzt aber wirklich: CSS für die Datenbankausgabe

Die erste Div, noch ganz spartanisch

Wo waren wir stehengeblieben? Die für den Besucher uninteressanten Datenbankfelder fliegen raus, haben wir gesagt. Wir behalten nur den Beitragstitel, den Link zum Beitrag und das Beitragsbild, und packen diese in eine Div, und das sieht dann erstmal ganz spartanisch so aus:

div_ohne_class

div_ohne_class

Entsprechend spartanisch ist auch das Ergebnis, das sieht noch gar nichts gleich:

div_ohne_class_ausgabe

div_ohne_class_ausgabe

Das geht aber auch hübscher!

„des hamma glei“, das haben wir gleich, wie das auf bairisch heißt. Wir ordnen der Div eine CSS-Klasse zu, im öffnenden div-Tag, mit einem schönen sprechenden Namen:

echo „<div class=’div_sparta‘>“;

Mit der neuen Klasse div_sparta begeben wir uns jetzt in die style.css unseres Child Themes und tragen hier erstmal folgendes ein:

.div_sparta {
    float:left;
    heigth: 300px;
    width: 25%;
   }

Das sieht doch schon wesentlich besser aus:

div_sparta_ausgabe

div_sparta_ausgabe

Hier sieht man übrigens gleich, wo jemand geschlampert hat und das Beitragsbild fehlt! Das sind die leeren weißen Stellen.

Was haben wir gemacht?

Der wichtigste Punkt ist float: left, der teilt unserer Div mit, daß sie sich im Dokumentenfluß nach links begeben soll, damit neben ihr auch noch jemand Platz hat. Die
height kann man nach Geschmack wählen, aber die width ist noch wichtig, die hab ich mal auf 1/4 der Seitenbreite gestellt, das sind die 25%. So haben 4 Divs nebeneinander Platz. Man kann für 3 Divs nebeneinander 33,333% einstellen, für 5 Divs nebeneinander 20%, usw., da kann jeder selber rumprobieren.

Anmerkung: aus dem PHP-Code kann jetzt die width-Anwesung aus dem img src Tag raus, das Bild wird automatisch in die Div eingepaßt.

Noch mehr CSS: ich übertreibs mal ein bißchen

Ich hab jetzt mit Absicht mal ein bißchen zuviel rumgestylt, damit man mal eine Vorstellung von den Möglichkeiten bekommt. Ich habe der Div eine neue Klasse evisdiv verpaßt, die sieht so aus:

.evisdiv{
    background-color: #fc6;
    float: left;
    height: 330px;
    width: 20%;
    overflow: hidden;
    border: 1px solid blue;
    border-radius: 20px;
    margin: 10px;
    padding: 10px;
    box-shadow: 5px 5px 3px #888
 
}

Und hier das Ergebnis:

evisdiv_ausgabe

evisdiv_ausgabe

Soll ich jetzt echt im Einzelnen erklären, was ich gemacht habe? Na schön, dies eine Mal, meine Anmerkungen in fett:

.evisdiv{
    background-color: #fc6; Hintergrundfarbe orange
    float: left; Linksbündig
    height: 330px; absolute Höhe in Pixel
    width: 20%; relative Breite in Prozent
    overflow: hidden; Zu große Bilder werden auf die Div-Umrandung zugeschnitten
    border: 1px solid blue; Rahmen blau
    border-radius: 20px; Rahmenecken abgerundet
    margin: 10px; Äusserer Abstand vom Rahmen 10 PIxel
    padding: 10px; Innerer Abstand vom Rahmen 10 Pixel
    box-shadow: 5px 5px 3px #888 Schatten
 
}

Falls sie sich wundern, daß bei einer width von 20 % jetzt doch nur 4 Bilder nebeneinander Platz haben: das liegt an dem margin (äusseren Abstand) den ich eingestellt habe damit die Divs nicht zusammenkleben, der wird zur Div-Größe dazugerechnet.
Ausserdem habe ich unserem post_title im PHP-Code noch ein <h1>-Tag verpaßt, damit er schön groß rauskommt wie es einem Beitragstitel gebührt, der echo sieht jetzt so aus:

echo "<h1>".$einpost->post_title."</h1>";

Das wars jetzt aber, genug geschafft für diesmal… jetzt darf jeder selber spielen. Hab ich schon gesagt, daß CSS echt Laune macht? 🙂

Frisches Styling für unsere olle Datenbankausgabe: ein wenig CSS

Kleiner Exkurs über WordPress und CSS

CSS ist für WordPress das, was ein volles Beauty&Wellnessprogramm für reifere Schönheiten bedeutet, nämlich eine Generalüberholung der angejahrten Basis, ein komplettes Facelifting, eine neue Frisur und auch noch die passenden Designerklamotten, so daß alles wieder jugendfrisch erstrahlt. Das Beste daran ist, daß man das Schönheitsprogramm noch nicht mal selbst codieren muß, dafür gibts Zillionen von großartigen Themes, man sucht sich einfach eins raus das einem zusagt, und das ganze Stylingpaket wird schon fertig mitgeliefert.

Ich halte gar nichts davon, selber groß in der style.css rumzupfuschen, man macht die Layouts damit meist nicht besser. Schließlich haben sich die Theme Designer grosse Mühe gegeben, Schriften, Farben und Seitenlayouts aufeinander abzustimmen, und wenn jetzt eine einfache Programmiererin da im Design rumpfuscht, das wird nix, das lassen wir lieber. Dann sucht man sich lieber gleich ein anderes Theme, das mehr dem eigenen Geschmack entspricht. Es spricht nichts dagegen, mal ein paar Farben anzupassen und kleine „Glitches“ (Fehlerchen) zu korrigieren. Zum Beispiel ist es mir schon in vielen Themes begegnet, daß die Umrandungen von Formularfeldern so gut wie unsichtbar sind. Da hilft dann tatsächlich nur ein mikrochirurgischer Eingriff in der style.css – aber bitte in der unseres Child Themes, nicht in der Originaldatei. Aber dabei sollte man es dann auch belassen, von Laien selbstgestylte Seiten sehen in den meisten Fällen eher peinlich und stümperhaft aus. Neenee, wir lassen der Lady WordPress ihre Designerklamotten, und konzentrieren uns auf andere Aufgaben. Zum Beispiel:

Das neue Styling unserer Datenbankausgabe

Alle alten Programmierer lieben Tabellenausgaben, aber wir verabschieden und jetzt mal von den vielen <tr><td> Tags und setzen auf eine schlichte <div>. Nur so als Erinnerung: eine div oder Division ist ein HTML-Container, der eine Reihe von Eigenschaften hat, auf der Seite positioniert werden kann und Inhalte (Text, Links, Bilder…) umschließt. Divs können beliebig geschachtelt werden, aber da sollte man ein bißchen vorsichtig sein, sonst kommt es zur berüchtigten Div-Suppe, und das Seitenlayout läuft komplett aus dem Ruder 🙂

Jetzt wird erstmal geputzt

Alle für den Programmierer so immens wichtigen Datenbankfelder wie ID, post_type, post_status und so weiter interessieren den Besucher unserer Webseiten null die Bohne und stiften nur Verwirrung, die fliegen jetzt raus. Wir behalten nur den Beitragstitel, den Link zum Beitrag und das Beitragsbild, und packen diese in eine Div, die wir nachher beliebig stylen können. Unser Select bleibt gleich, die Ausgaben in der foreach-Schleife werden deutlich verschlankt. Die Div bekommt noch eine Klasse zugewiesen, der wir einen Namen geben, an dem wir erkennen, daß die von uns selber stammt, mit der gehen wir dann in die style.css. Jetzt aber erstmal unsere geliftete Datenbankausgabe… holà, heute nicht mehr! Zeit zum Abendessen. Mehr dazu morgen, und dann gibts auch wieder Codeschnipsel, versprochen 😉

Ein wirklich nützliches Plugin: der Tablesorter

Ich kenn das bei den alten Programmierhasen, wenn die eine Tabelle sehen kriegen sie dieses Glitzern in den Augen und wollen sie unbedingt nach den verschiedensten Kriterien sortieren, nach Namen und IDs und Datum und was weiß ich noch alles… gemach, gemach. Nicht gleich mit PHP loslegen, das geht heutzutage auch bequemer. Wir holen uns dafür das Plugin Table Sorter an Bord, das beruht auf dem bekannten jQuery Tablesorter 2.0 von Christian Bach und ist sehr einfach in der Anwendung. Es kann zwar ohne Erweiterung kein deutsches Datumsformat, aber das soll uns erstmal nicht stören, in der wp_posts ist kein „German“ Datum drin.

Erste Voraussetzung: die Tabelle muß sauber mit thead und tbody-Tags strukturiert sein, deswegen meine Vorbemerkung aus dem letzten Beitrag. Wenn dann das Plugin installiert ist, genügt eine einfache Erweiterung im <table>-Tag, das schreibt sich so:

<table id='meineTabelle' class='tablesorter'>

Statt ‚meineTabelle‘ können sie einen beliebigen Tabellennamen angeben, er sollte halt innerhalb einer Seite eindeutig sein. Die Zuweisung der class = ‚tablesorter‘ sorgt dafür, daß sich das Plugin einschaltet. Wenn sie jetzt ihre Testseite mit der Tabellenausgabe neu laden, sollte es etwa so aussehen:

tablesorter

tablesorter

Und wenn sie auf die Pfeilchen in der Kopfzeile der Tabelle klicken, werden die Datensätze hübsch nach dieser Spalte sortiert – schick, nicht wahr? Der Tablesorter kann übrigens noch viel mehr, aber das sprengt hier komplett den Rahmen. Selber nachlesen auf der Plugin-Seite , oder auch direkt bei Christian Bach.

Das Sortieren zieht natürlich erst so richtig, wenn man es mit vielen unterschiedlichen Datensätzen zu tun hat, und wir waren ja bei der Abfrage einer Handvoll veröffentlichter Beiträge stehengeblieben. Lassen sie mal die Where-Klausel weg und schauen sie sich alle Einträge in der wp_posts mit dem Table Sorter an, das ist sehr aufschlußreich und erspart einem das SQL-Tippen im phpmyadmin. Konnte ich das Glitzern in den Augen der alten Tabellenhasen befriedigen? Das Potential des Tablesorter ist enorm, das müssen sie zugeben, der ist ungeheuer vielseitig einsetzbar und erspart einem im Zweifelsfall viele Zeilen PHP-Code.