{"id":175,"date":"2017-02-17T16:37:21","date_gmt":"2017-02-17T15:37:21","guid":{"rendered":"http:\/\/evileu.de\/zum-schwarzen-pinguin\/?p=175"},"modified":"2017-02-17T18:05:58","modified_gmt":"2017-02-17T17:05:58","slug":"alle-bilder-jetzt-gehts-an-die-ausgabe","status":"publish","type":"post","link":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/2017\/02\/17\/alle-bilder-jetzt-gehts-an-die-ausgabe\/","title":{"rendered":"Alle Bilder: jetzt gehts an die Ausgabe"},"content":{"rendered":"<h2>Jetzt kommt die Schlamperei auf<\/h2>\n<p>Wenn alles geklappt hat, d\u00fcrfte der phpmyadmin jetzt nur noch die f\u00fcnf mit dem &#8222;as&#8220; 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\u00e4llen 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&amp;Paste gearbeitet habe.<\/p>\n<h2>Wo bleibt da die Barrierefreiheit?<\/h2>\n<p>Ganz einfach, ich komme damit durch, weil es sich bei meinen Beitr\u00e4gen um schlichte Kochrezepte handelt. Wenn da als alt-Text &#8222;lasagne&#8220; oder &#8222;huhn-mit-prosecco&#8220; steht, ist das voll OK weil sich im Kontext &#8222;Online-Kochbuch&#8220; jeder etwas darunter vorstellen kann.<\/p>\n<h2>Das PHP-Skript<\/h2>\n<p>Ich hab da erstmal eine tabellarische Ausgabe gemacht:<\/p>\n<div id=\"attachment_207\" style=\"width: 1290px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-207\" decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-207\" src=\"http:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2017\/02\/join_posts_und_postmeta.jpg\" alt=\"join_posts_und_postmeta\" width=\"1280\" height=\"760\" srcset=\"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2017\/02\/join_posts_und_postmeta.jpg 1280w, https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2017\/02\/join_posts_und_postmeta-300x178.jpg 300w, https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2017\/02\/join_posts_und_postmeta-768x456.jpg 768w, https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2017\/02\/join_posts_und_postmeta-1024x608.jpg 1024w, https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2017\/02\/join_posts_und_postmeta-624x371.jpg 624w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><p id=\"caption-attachment-207\" class=\"wp-caption-text\">join_posts_und_postmeta<\/p><\/div>\n<p>Das Wichtigste ist eigentlich, da\u00df in der foreach-Schleife die Felder aus dem Join jetzt mit dem Alias angesprochen werden, den wir jeweils mit dem &#8222;as&#8220; angelegt haben. Sonst ist der Aufbau analog zu dem, was wir schon mit den <a href=\"http:\/\/evileu.de\/zum-schwarzen-pinguin\/2017\/02\/10\/beitragsbild-in-unserer-tabelle-mit-ausgeben\/\">Beitr\u00e4gen und den Beitragsbildern<\/a> gemacht haben, erinnern sie sich?<\/p>\n<p>Ich geh mal jetzt ein bi\u00dfchen in den Schnelldurchgang, das haben wir ja schlie\u00dflich alles schon mal gehabt. Tabellentags raus, img src rein, div um die foreach-Schleife gelegt, ein wenig CSS Styling.<\/p>\n<h2>Die neue foreach-Schleife<\/h2>\n<p>Die sieht jetzt so aus:<\/p>\n<div id=\"attachment_211\" style=\"width: 820px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-211\" decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-211\" src=\"http:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2017\/02\/join_post_und_postmeta_ausgabe.jpg\" alt=\"join_post_und_postmeta_ausgabe\" width=\"810\" height=\"270\" srcset=\"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2017\/02\/join_post_und_postmeta_ausgabe.jpg 810w, https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2017\/02\/join_post_und_postmeta_ausgabe-300x100.jpg 300w, https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2017\/02\/join_post_und_postmeta_ausgabe-768x256.jpg 768w, https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2017\/02\/join_post_und_postmeta_ausgabe-624x208.jpg 624w\" sizes=\"(max-width: 810px) 100vw, 810px\" \/><p id=\"caption-attachment-211\" class=\"wp-caption-text\">join_post_und_postmeta_ausgabe<\/p><\/div>\n<p>Wenn man jetzt beim Hochladen der Bilder aussagekr\u00e4ftige Inhalte f\u00fcr Bildbeschreibung, -beschriftung -titel und alt-Text eingegeben h\u00e4tte, bek\u00e4me man auch was Ordentliches zu sehen. Probieren sie es aus, laden sie mal ein paar neue Bilder hoch und machen sie sich die M\u00fche, alle Felder vern\u00fcnftig auszuf\u00fcllen. Dazu h\u00e4tte ich noch einige Anmerkungen, aber jetzt schauen wir uns erstmal unsere Ausgabe aller Bilder an. Bei mir sieht man gleich, da\u00df ich geschummelt habe und in der Bildbeschreibung das selbe drinsteht wie in der Bildbeschriftung, und da\u00df meine Bildchen sehr unterschiedliche Formate haben:<\/p>\n<div id=\"attachment_220\" style=\"width: 865px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-220\" decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-220\" src=\"http:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2017\/02\/neu_join_screenshot.jpg\" alt=\"neu_join_screenshot\" width=\"855\" height=\"673\" srcset=\"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2017\/02\/neu_join_screenshot.jpg 855w, https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2017\/02\/neu_join_screenshot-300x236.jpg 300w, https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2017\/02\/neu_join_screenshot-768x605.jpg 768w, https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2017\/02\/neu_join_screenshot-624x491.jpg 624w\" sizes=\"(max-width: 855px) 100vw, 855px\" \/><p id=\"caption-attachment-220\" class=\"wp-caption-text\">neu_join_screenshot<\/p><\/div>\n<p>Wenn man \u00fcbrigens mit der Maus \u00fcber eines der Bilder f\u00e4hrt, poppt der title-Text auf &#8211; h\u00fcbscher Effekt, finde ich \ud83d\ude42<\/p>\n<p>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 \ud83d\ude41<\/p>\n<h2>Das Problem mit den Hoch- und Querformaten<\/h2>\n<p>Tscha, da haben wir es wieder. Nat\u00fcrlich 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\u00f6nliche Meinung.<\/p>\n<h2>Was fehlt noch?<\/h2>\n<p>Jetzt w\u00e4re es nat\u00fcrlich schick, wenn man zu jedem Bild auch einen Link auf den zugeh\u00f6rigen Beitrag oder die zugeh\u00f6rige Seite h\u00e4tte. Was hab ich da wispern geh\u00f6rt &#8211; parent_id? Genau! Aber daf\u00fcr gibts einen neuen Beitrag.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Jetzt kommt die Schlamperei auf Wenn alles geklappt hat, d\u00fcrfte der phpmyadmin jetzt nur noch die f\u00fcnf mit dem &#8222;as&#8220; 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\u00e4llen leer, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[9,10,11,7,4,2],"tags":[],"_links":{"self":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/175"}],"collection":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/comments?post=175"}],"version-history":[{"count":14,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/175\/revisions"}],"predecessor-version":[{"id":227,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/175\/revisions\/227"}],"wp:attachment":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/media?parent=175"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/categories?post=175"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/tags?post=175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}