Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 18. Februar 2019

WordPress und das Beitragsbild: So vermeidest du Probleme

Das Beitragsbild in WordPress kann sich – je nach Theme – mas­siv auf dein Design aus­wir­ken. Vor allem dann, wenn du es ver­gisst oder ande­re Probleme auf­tre­ten.

Das Beitragsbild an sich

Wenn du den Begriff Beitragsbild nicht kennst, weil du ihn in dei­nem WordPress-Backend rechts neben dem Texteditor nicht fin­dest, dann unter­stützt dein Theme ver­mut­lich das Feature „Beitragsbild“ oder (in eng­li­scher Sprache) „Featured Image“ nicht. In dem Fall bekommst du mit Sicherheit irgend­wann eines der wei­ter unten benann­ten Probleme. Nämlich dann, wenn du auf ein Theme wech­selst, das mit Beitragsbildern arbei­tet.

Beitragsbilder, neben der Bezeichnung „Featured Image“ auch manch­mal als „Post Thumbnail“ bezeich­net, sind Bilder, die den jewei­li­gen Beitrag oder die jewei­li­ge Seite bild­lich reprä­sen­tie­ren sol­len. Wo und wie sie ange­zeigt wer­den, ent­schei­det das ein­ge­setz­te Theme allein. Genau die­ser Umstand ist die Ursache für eines der ande­ren wei­ter unten beschrie­be­nen Probleme.

Beitragsbilder set­zen sich grund­sätz­lich nicht von allei­ne. Selbst wenn du alle Bilder, die du in einem Beitrag ver­wen­den willst, hoch­ge­la­den hast, musst du eines davon oder ein zusätz­li­ches expli­zit zum Beitragsbild erklä­ren. Dieser erfor­der­li­che Verfahrensschritt ist für man­che Zeitgenossen nicht leicht zu ver­in­ner­li­chen.

Meine leidigen Erfahrungen mit Beitragsbildern

Kennst du das? Du hast einen Beitrag ver­öf­fent­licht und wie­der ein­mal das Beitragsbild ver­ges­sen. Auf Social Media hat dein Post nun prak­tisch kei­ne Chance. Mir pas­sier­te das wesent­lich öfter als mir lieb sein konn­te. Daher mach­te ich mich auf die Suche nach einer ver­nünf­ti­gen Lösung für die­ses Problem.

Kennst du das? Du hast dein Theme gewech­selt und das neue Theme arbei­tet mit ande­ren Beitragsbildgrößen. Jetzt sehen dei­ne bis­he­ri­gen Bilder ver­zerrt aus. Auch die­ses Problem begeg­ne­te mir vor nicht all­zu lan­ger Zeit. Entsprechend mach­te ich mich auf die Suche nach einer ver­nünf­ti­gen Lösung.

Kennst du das? Du hast dein Theme gewech­selt. Dein neu­es Theme arbei­tet mit Beitragsbildern, du hast aber bis­lang kei­ne ver­wen­det. So sehen dei­ne bis­he­ri­gen 500 Posts ziem­lich ein­drucks­los aus. Du kannst es dir schon den­ken. Auch die­ses Problem muss­te ich vor kur­zem einer Lösung zufüh­ren.

Es gibt eine weni­ger fle­xi­ble und eine sehr fle­xi­ble Lösung für die skiz­zier­ten Probleme. Nehmen wir zunächst die weni­ger fle­xi­ble ins Visier.

Die WordPress-Bordlösung für das Problem

Mit zwei Codeschnipseln kön­nen wir dafür sor­gen, dass dein WordPress stets das ers­te im Beitrag ver­wen­de­te Bild zum Beitragsbild erklärt und ent­spre­chend ver­wen­det. Das ist sicher­lich bes­ser als gar nichts, je nach Design jedoch nicht immer die bes­te Wahl.

Zeigt dein Theme etwa das Beitragsbild auch in der Einzelansicht des Beitrags noch­mal in vol­ler Pracht über dem eigent­li­chen Text an, so ergibt es kei­nen Sinn, das ers­te Bild im Beitrag, wel­ches ja dann zusätz­lich zum Beitragsbild erko­ren wur­de, aber natür­lich trotz­dem wei­ter­hin im Beitrag vor­han­den ist, qua­si dop­pelt anzu­zei­gen.

Nutzt dein Theme indes die Beitragsbilder nur in der Funktion des „Post Thumbnails“, etwa als Preview zum Teaser auf der Startseite, dann ist die Schnipsellösung eine, die für dich sogar die bes­se­re sein kann.

Du schreibst also fol­gen­den Code in dei­ne functions.php:

//macht das erste Inhaltsbild zum Beitragsbild
function main_image() {
$files = get_children('post_parent='.get_the_ID().'&post_type=attachment
&post_mime_type=image&order=desc');
if($files) :
$keys = array_reverse(array_keys($files));
$j=0;
$num = $keys[$j];
$image=wp_get_attachment_image($num, 'large', true);
$imagepieces = explode('"', $image);
$imagepath = $imagepieces[1];
$main=wp_get_attachment_url($num);
$template=get_template_directory();
$the_title=get_the_title();
print "<img class="frame" src="$main" alt="$the_title" />";
endif;
}

In dei­nem Theme (oder Child-Theme) ergänzt du dann noch den fol­gen­den Code:

<?php if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) {
  echo get_the_post_thumbnail($post->ID);
} else {
   echo main_image();
} ?>

Die Änderungen nimmst du natür­lich immer lokal mit einem Text-Editor dei­ner Wahl vor und lädst die Dateien her­nach per FTP wie­der auf dei­nen Webspace hoch. Verwende nicht die Online-Codeeditoren im Backend. Nachdem du die zu ändern­den Dateien her­un­ter­ge­la­den hast, machst du eine Kopie davon, damit du ein Backup hast, falsch irgend­was schief gehen soll­te.

So. Nachdem du die Änderung online hast, wird nun stets das ers­te Bild im Beitrag auch als Beitragsbild ver­wen­det. Nicht mehr, aber auch nicht weni­ger.

Flexiblere Lösung per Plugin (oder Theme)

Mit der eben vor­ge­stell­ten Lösung haben wir es geschafft, ohne wei­te­res Zutun auto­ma­tisch zu einem Beitragsbild zu kom­men. Dafür muss­ten wir aller­dings im Code rum­fuhr­wer­ken und wir haben nur eine gene­ra­li­sier­te Lösung. Stets wird das ers­te Bild im Beitrag auch als Beitragsbild ver­wen­det. Was, wenn du das gar nicht willst oder dich davor scheust, im Code zu arbei­ten?

Dann nimmst du ein­fach das Plugin „Quick Featured Images“ von Martin Stehle.

Quick Featured Images
Quick Featured Images
Entwickler: Martin Stehle
Preis: Kostenlos

Martin Stehles Plugin ist so etwas wie das Schweizer Taschenmesser für WordPress Beitragsbilder. Das Plugin ist in der Basis-Version kos­ten­los. Für unse­re hier beschrie­be­nen Probleme brauchst du die kos­ten­pflich­ti­ge Version.

Diese kos­ten­pflich­ti­ge Pro-Version, die über noch einen gan­zen Haufen wei­te­rer Features ver­fügt, kannst du für 75 (eine Site) oder 195 Euro (unbe­grenz­te Anzahl an Sites) käuf­lich erwer­ben. Die Beträge beinhal­ten das Plugin und Updates für ein Jahr. Nach Ablaiuf des Jahres ent­schei­dest du dich für eine Weiterzahlung, um auch die fol­gen­den Updates zu bekom­men oder setzt das Plugin in der letz­ten aktu­el­len Version wei­ter ein.

Hast du die Pro-Version instal­liert, bedarf etwa des Setzen des ers­ten Inhaltsbildes als Beitragsbild kei­ner Code-Frickelei, son­dern ledig­lich des Setzens eines Hakens:

Das aller­dings ist nur die leich­tes­te Übung für Stehles Plugin. Für mei­ne Probleme des ver­ges­se­nen und der nicht vor­han­de­nen Beitragsbilder war das indes voll­kom­men aus­rei­chend und kos­te­te mich kei­ne fünf Minuten.

Nach der Installation und Aktivierung fin­dest du in der links­sei­ti­gen Navigation den Punkt „Beitragsbilder“, wie du dem obi­gen Screenshot ent­neh­men kannst. Das Setzen des ers­ten Inhaltsbildes als Beitragsbild erle­digst du übri­gens im Untermenü „Vorgegebene Bilder“.

Informationen zu den übri­gen kos­ten­pflich­ti­gen Features des Plugins „Quick Featured Images“ fin­dest du auf die­ser Seite. So kann das Plugin etwa das ers­te Inhaltsbild nicht nur zum Beitragsbild machen, son­dern zusätz­lich direkt aus dem Inhalt ent­fer­nen, damit es nicht zur wei­ter oben beschrie­be­nen dop­pel­ten Anzeige kommt.

Ist Stehles Plugin für dich funk­ti­ons­mä­ßig der Overkill oder willst du kein Geld aus­ge­ben, dann soll­test du dir „Easy Add Thumbnail” von Samuel Aguilera anse­hen. Dieses über­aus schlan­ke Stückchen Code tut wirk­lich nichts ande­res als das ers­te Bild eines Beitrags zum Beitragsbild, also zum Featured Image zu machen.

Entsprechend funk­tio­niert es natür­lich auch nur in den Fällen, in denen du zum Beitrag min­des­tens ein Bild mit den Standardmethoden hoch­ge­la­den hast. Das Plugin küm­mert sich dabei stets um alle dei­ne Beiträge, funk­tio­niert dem­nach nicht nur für neue Veröffentlichungen. Hat ein Beitrag bereits ein Featured Image, rührt das Plugin die­ses nicht an. Aguileras Lösung ist kom­plett kos­ten­frei und kann auch über das Backend instal­liert wer­den.

Easy Add Thumbnail
Easy Add Thumbnail
Entwickler: Samuel Aguilera
Preis: Kostenlos

Im Repository fin­den sich noch eine Handvoll wei­te­rer Alternativen, die jedoch sämt­lich seit lan­ger Zeit nicht mehr gepflegt wer­den und denen im Review-Bereich jeweils beschei­nigt wird, dass sie nicht mehr funk­tio­nie­ren.

Willst du kein sepa­ra­tes Plugin ver­wen­den, soll­test du beim nächs­ten Theme-Wechsel dar­auf ach­ten, dass das Designgerüst dei­ner Wahl eine ent­spre­chen­de Funktionalität mit­bringt. Das gilt bei­spiels­wei­se für Divi von ElegantThemes. Hier schal­test du in den Optionen ein­fach das Feature „Erstes Bild aus Beitrag ver­wen­den“ an.

Divi ist ins­ge­samt kei­ne schlech­te Wahl. Nicht zu Unrecht brüs­ten sich die Entwickler damit, mit Divi das popu­lärs­te Premium-Theme für WordPress erschaf­fen zu haben. Kaufen kannst du es indes nur über eine Mitgliedschaft im Theme-Club von ElegantThemes. Die kos­tet dich pro Jahr 89 USD (oder ein­ma­lig 249 USD) und erlaubt dir die Verwendung aller 87 Themes, die die Schmiede der­zeit im Portfolio hat.

Kommen wir abschlie­ßend zum Problem der unpro­por­tio­na­len Bildanzeige beim Themewechsel. Hier müs­sen schlicht­weg die Beitragsbilder neu gene­riert wer­den, damit sie zu den Abmessungen pas­sen, die das jewei­li­ge Theme regis­triert.

Für die­sen Zweck eig­net sich das Plugin „Regenerate Thumbnails“ von Alex Mills.

Regenerate Thumbnails
Regenerate Thumbnails

„Regenerate Thumbnails“ ist eben­falls ein kos­ten­lo­ses Plugin und kann bequem vie Backend instal­liert und akti­viert wer­den. Auf die Funktionalität greifst du auf ver­schie­de­ne Weise zu.

Unter Werkzeuge > Vorschaubilder regen. fin­dest du einen ein­zel­nen Button mit der Aufschrift Regeneriere alle Vorschaubilder, der genau das tut. Dabei ver­wen­det das Plugin die Werte, die unter Einstellungen > Medien ein­ge­tra­gen sind und die Werte, die das jewei­li­ge Theme fest­legt. Wenn du selek­ti­ver vor­ge­hen willst, fin­dest du die Möglichkeit, die Vorschaubilder neu zu gene­rie­ren auch in Medien > Medienübersicht an jedem ein­zel­nen Bild:

Fazit: Nimm die Plugins oder achte aufs richtige Theme

Mit zwei Plugins hast du die bespro­che­ne Thematik der Beitragsbilder gut im Griff und bist auch für zukünf­ti­ge Themewechsel gerüs­tet. Alternativ ach­test du beim Themewechsel direkt dar­auf, dass das Theme dei­nes Herzens die Problematik behan­delt. Die genann­ten Plugins und erst recht das Divi-Theme wer­den zudem ordent­lich gepflegt, so dass ich hier eine vol­le Empfehlung aus­spre­chen kann.

(Der Beitrag erschien erst­mals im August 2017 und wur­de seit­dem mehr­fach auf den aktu­el­len Stand gebracht. Das letz­te Update erfolg­te am 14. Februar 2019.)

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

Ein Kommentar

  1. Hallo!

    > … Beitragsbild ver­ges­sen. Auf Social Media hat dein Post nun prak­tisch kei­ne Chance.
    Stimmt,

    Nur, selbst wenn man sich von vorn­her­ein ein Theme mit Beitragsbildern nimmt, auch wenn alles funk­tio­niert, wenn man nichts ver­gisst:
    FB mag die Site nicht und jedes 2.te Bild bleibt meist eine graue Fläche!

    Toll, wenn FB dann auch noch meckert: “Füge Bilder hin­zu” oder beim bewer­ben das Bild ver­misst. Das ist eine Frechheit, die seit der DSGVO noch schlim­mer wur­de.

    Scheinbar ist das Teilen von Beiträgen exter­ner Sites ein hoch­kom­ple­xes Gebiet gewor­den. Hab 100 Anleitungen zu „og“ Metatags, FB-ID´s, API-Keys, Apps, FB-Debugger, FB Crawler uvam. stu­diert, aber es bleibt immer das Gleiche:
    Die (exter­nen) Bilder wer­den nicht in FB Profilen und Seiten gezeigt …

    Früher hat man ein­fach den Link in einen FB-Beitrag kopiert, fer­tig, er erschien samt Bild.
    Heute braucht man ein Informatikstudium?

    Ansonsten, tol­ler Artikel, kann va den Satz im Fazit unter­stri­chen:
    > “Alternativ ach­test du beim Themewechsel direkt dar­auf, dass das Theme dei­nes Herzens die Problematik behan­delt.”
    + Wichtig: Bildbeschreibung/Beschriftung soll­te nativ ange­zeigt wer­den – va. wg. Copyright!

Schreibe einen Kommentar

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