{"id":99,"date":"2017-02-10T16:20:20","date_gmt":"2017-02-10T15:20:20","guid":{"rendered":"http:\/\/evileu.de\/zum-schwarzen-pinguin\/?p=99"},"modified":"2017-02-10T16:20:20","modified_gmt":"2017-02-10T15:20:20","slug":"beitragsbild-in-unserer-tabelle-mit-ausgeben","status":"publish","type":"post","link":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/2017\/02\/10\/beitragsbild-in-unserer-tabelle-mit-ausgeben\/","title":{"rendered":"Beitragsbild in unserer Tabelle mit ausgeben"},"content":{"rendered":"<p>Nachdem wir jetzt ja ersch\u00f6pfend gekl\u00e4rt haben, was ein Beitragsbild eigentlich ist, gehts jetzt an die spa\u00dfige Seite, n\u00e4mlich die Ausgabe der Beitragsbilder in unserer eigenen Datenbankabfrage. Wir haben immer noch den selben alten Select:<\/p>\n<p><em>SELECT * from wp_posts where post_status = &#8218;publish&#8216; and post_type = &#8218;post&#8216;<\/em><\/p>\n<p>Und wir haben immer noch die selbe foreach-Schleife mit der Formatierung als HTML-Tabelle. Jetzt geht es ein bi\u00dfchen von hinten durch die Brust ins Auge weiter.<\/p>\n<h2>2 WordPress-Funktionen f\u00fcr Beitragsbilder<\/h2>\n<p>Wir holen uns zuerst \u00fcber die ID des aktuellen Beitrags die ID des Beitragsbilds=Thumbnails, das geht mit der WordPress-eigenen Funktion get_post_thumbnail_id(), und zwar machen wir das so:<\/p>\n<p><em>get_post_thumbnail_id($einpost-&gt;ID)<\/em><\/p>\n<p>(Kleine Erinnerung: genauere Details zu den WordPress-Funktionen im <a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/get_post_thumbnail_id\">Codex<\/a> nachschauen!)<br \/>\nMit der Thumbnail-ID holen wir uns mit der Funktion wp_get_attachment_url() die URL des Beitragsbildes:<\/p>\n<p><em>wp_get_attachment_url(get_post_thumbnail_id($einpost-&gt;ID))<\/em><\/p>\n<p>Ich liebe diese sprechenden Funktionsnamen! \ud83d\ude42<br \/>\nDas Ganze legen wir dann noch auf eine Variable, und dann sieht die neue Zeile in unserer foreach-Schleife so aus:<\/p>\n<p><em>$artikelbild_url = wp_get_attachment_url(get_post_thumbnail_id($einpost-&gt;ID));<\/em><\/p>\n<p>Sie k\u00f6nnen sich ja spa\u00dfeshalber erstmal die Variable $artikelbild_url so wie sie ist mit echo ausgeben, oder wir packen das Ergebnis der ganzen Prozedur gleich in einen img-Tag. Ich hab versprochen, mehr Codeschnipsel, also bitte, nochmal die komplette foreach-Schleife:<\/p>\n<div id=\"attachment_100\" style=\"width: 646px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-100\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-100 size-full\" src=\"http:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2017\/02\/thumbnail_url_holen.jpg\" alt=\"thumbnail_url_holen\" width=\"636\" height=\"230\" srcset=\"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2017\/02\/thumbnail_url_holen.jpg 636w, https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2017\/02\/thumbnail_url_holen-300x108.jpg 300w, https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2017\/02\/thumbnail_url_holen-624x226.jpg 624w\" sizes=\"(max-width: 636px) 100vw, 636px\" \/><p id=\"caption-attachment-100\" class=\"wp-caption-text\">thumbnail_url_holen<\/p><\/div>\n<p>Und? Rumms, da kommen doch die Bilder gleich in voller Gr\u00f6\u00dfe auf den Bildschirm gerauscht, das ist jetzt genauso h\u00e4\u00dflich wie im Theme Twenty Fourteen. Abhilfe schafft eine width-Angabe im img-Tag:<\/p>\n<p><em>echo &#8222;&lt;td&gt;&lt;img src ='&#8220;.$artikelbild_url.&#8220;&#8218;width = &#8218;100px&#8216;&gt;&lt;\/td&gt;&#8220;;<\/em><\/p>\n<p>Statt 100px k\u00f6nnen sie nat\u00fcrlich einen beliebigen Wert eingeben, aber ich wollte ungef\u00e4hr Pa\u00dffotogr\u00f6\u00dfe, das sieht bei mir jetzt so aus:<\/p>\n<div id=\"attachment_101\" style=\"width: 635px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-101\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-101 size-large\" src=\"http:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2017\/02\/passfotos-1024x567.jpg\" alt=\"passfotos\" width=\"625\" height=\"346\" srcset=\"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2017\/02\/passfotos-1024x567.jpg 1024w, https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2017\/02\/passfotos-300x166.jpg 300w, https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2017\/02\/passfotos-768x425.jpg 768w, https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2017\/02\/passfotos-624x346.jpg 624w, https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-content\/uploads\/2017\/02\/passfotos.jpg 1107w\" sizes=\"(max-width: 625px) 100vw, 625px\" \/><p id=\"caption-attachment-101\" class=\"wp-caption-text\">passfotos<\/p><\/div>\n<p>Schon deutlich h\u00fcbscher, nicht wahr? Und jetzt wollen wir mal die ganzen inzwischen \u00fcberfl\u00fcssigen Felder wie ID usw. ausblenden und der Sache per CSS ein pfiffigeres Styling verpassen, aber dazu gibt es einen neuen Beitrag.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nachdem wir jetzt ja ersch\u00f6pfend gekl\u00e4rt haben, was ein Beitragsbild eigentlich ist, gehts jetzt an die spa\u00dfige Seite, n\u00e4mlich die Ausgabe der Beitragsbilder in unserer eigenen Datenbankabfrage. Wir haben immer noch den selben alten Select: SELECT * from wp_posts where post_status = &#8218;publish&#8216; and post_type = &#8218;post&#8216; Und wir haben immer noch die selbe foreach-Schleife [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[9,7,4,2],"tags":[],"_links":{"self":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/99"}],"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=99"}],"version-history":[{"count":1,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/99\/revisions"}],"predecessor-version":[{"id":102,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/99\/revisions\/102"}],"wp:attachment":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/media?parent=99"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/categories?post=99"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/tags?post=99"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}