Dieter Petereit 18. Februar 2019

WordPress und das Beitragsbild: So vermeidest du Probleme

Das Beitragsbild in WordPress kann sich – je nach Theme – massiv auf dein Design auswirken. Vor allem dann, wenn du es vergisst oder andere Probleme auftreten.

Das Beitragsbild an sich

Wenn du den Begriff Beitragsbild nicht kennst, weil du ihn in deinem WordPress-Backend rechts neben dem Texteditor nicht findest, dann unterstĂŒtzt dein Theme vermutlich das Feature „Beitragsbild“ oder (in englischer Sprache) „Featured Image“ nicht. In dem Fall bekommst du mit Sicherheit irgendwann eines der weiter unten benannten Probleme. NĂ€mlich dann, wenn du auf ein Theme wechselst, das mit Beitragsbildern arbeitet.

Beitragsbilder, neben der Bezeichnung „Featured Image“ auch manchmal als „Post Thumbnail“ bezeichnet, sind Bilder, die den jeweiligen Beitrag oder die jeweilige Seite bildlich reprĂ€sentieren sollen. Wo und wie sie angezeigt werden, entscheidet das eingesetzte Theme allein. Genau dieser Umstand ist die Ursache fĂŒr eines der anderen weiter unten beschriebenen Probleme.

Beitragsbilder setzen sich grundsĂ€tzlich nicht von alleine. Selbst wenn du alle Bilder, die du in einem Beitrag verwenden willst, hochgeladen hast, musst du eines davon oder ein zusĂ€tzliches explizit zum Beitragsbild erklĂ€ren. Dieser erforderliche Verfahrensschritt ist fĂŒr manche Zeitgenossen nicht leicht zu verinnerlichen.

Meine leidigen Erfahrungen mit Beitragsbildern

Kennst du das? Du hast einen Beitrag veröffentlicht und wieder einmal das Beitragsbild vergessen. Auf Social Media hat dein Post nun praktisch keine Chance. Mir passierte das wesentlich öfter als mir lieb sein konnte. Daher machte ich mich auf die Suche nach einer vernĂŒnftigen Lösung fĂŒr dieses Problem.

Kennst du das? Du hast dein Theme gewechselt und das neue Theme arbeitet mit anderen BeitragsbildgrĂ¶ĂŸen. Jetzt sehen deine bisherigen Bilder verzerrt aus. Auch dieses Problem begegnete mir vor nicht allzu langer Zeit. Entsprechend machte ich mich auf die Suche nach einer vernĂŒnftigen Lösung.

Kennst du das? Du hast dein Theme gewechselt. Dein neues Theme arbeitet mit Beitragsbildern, du hast aber bislang keine verwendet. So sehen deine bisherigen 500 Posts ziemlich eindruckslos aus. Du kannst es dir schon denken. Auch dieses Problem musste ich vor kurzem einer Lösung zufĂŒhren.

Es gibt eine weniger flexible und eine sehr flexible Lösung fĂŒr die skizzierten Probleme. Nehmen wir zunĂ€chst die weniger flexible ins Visier.

Die WordPress-Bordlösung fĂŒr das Problem

Mit zwei Codeschnipseln können wir dafĂŒr sorgen, dass dein WordPress stets das erste im Beitrag verwendete Bild zum Beitragsbild erklĂ€rt und entsprechend verwendet. Das ist sicherlich besser als gar nichts, je nach Design jedoch nicht immer die beste Wahl.

Zeigt dein Theme etwa das Beitragsbild auch in der Einzelansicht des Beitrags nochmal in voller Pracht ĂŒber dem eigentlichen Text an, so ergibt es keinen Sinn, das erste Bild im Beitrag, welches ja dann zusĂ€tzlich zum Beitragsbild erkoren wurde, aber natĂŒrlich trotzdem weiterhin im Beitrag vorhanden ist, quasi doppelt anzuzeigen.

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 bessere sein kann.

Du schreibst also folgenden Code in deine 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 deinem Theme (oder Child-Theme) ergÀnzt du dann noch den folgenden 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ĂŒrlich immer lokal mit einem Text-Editor deiner Wahl vor und lĂ€dst die Dateien hernach per FTP wieder auf deinen Webspace hoch. Verwende nicht die Online-Codeeditoren im Backend. Nachdem du die zu Ă€ndernden Dateien heruntergeladen hast, machst du eine Kopie davon, damit du ein Backup hast, falsch irgendwas schief gehen sollte.

So. Nachdem du die Änderung online hast, wird nun stets das erste Bild im Beitrag auch als Beitragsbild verwendet. Nicht mehr, aber auch nicht weniger.

Flexiblere Lösung per Plugin (oder Theme)

Mit der eben vorgestellten Lösung haben wir es geschafft, ohne weiteres Zutun automatisch zu einem Beitragsbild zu kommen. DafĂŒr mussten wir allerdings im Code rumfuhrwerken und wir haben nur eine generalisierte Lösung. Stets wird das erste Bild im Beitrag auch als Beitragsbild verwendet. Was, wenn du das gar nicht willst oder dich davor scheust, im Code zu arbeiten?

Dann nimmst du einfach 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 kostenlos. FĂŒr unsere hier beschriebenen Probleme brauchst du die kostenpflichtige Version.

Diese kostenpflichtige Pro-Version, die ĂŒber noch einen ganzen Haufen weiterer Features verfĂŒgt, kannst du fĂŒr 75 (eine Site) oder 195 Euro (unbegrenzte Anzahl an Sites) kĂ€uflich erwerben. Die BetrĂ€ge beinhalten das Plugin und Updates fĂŒr ein Jahr. Nach Ablaiuf des Jahres entscheidest du dich fĂŒr eine Weiterzahlung, um auch die folgenden Updates zu bekommen oder setzt das Plugin in der letzten aktuellen Version weiter ein.

Hast du die Pro-Version installiert, bedarf etwa des Setzen des ersten Inhaltsbildes als Beitragsbild keiner Code-Frickelei, sondern lediglich des Setzens eines Hakens:

Das allerdings ist nur die leichteste Übung fĂŒr Stehles Plugin. FĂŒr meine Probleme des vergessenen und der nicht vorhandenen Beitragsbilder war das indes vollkommen ausreichend und kostete mich keine fĂŒnf Minuten.

Nach der Installation und Aktivierung findest du in der linksseitigen Navigation den Punkt „Beitragsbilder“, wie du dem obigen Screenshot entnehmen kannst. Das Setzen des ersten Inhaltsbildes als Beitragsbild erledigst du ĂŒbrigens im UntermenĂŒ „Vorgegebene Bilder“.

Informationen zu den ĂŒbrigen kostenpflichtigen Features des Plugins „Quick Featured Images“ findest du auf dieser Seite. So kann das Plugin etwa das erste Inhaltsbild nicht nur zum Beitragsbild machen, sondern zusĂ€tzlich direkt aus dem Inhalt entfernen, damit es nicht zur weiter oben beschriebenen doppelten Anzeige kommt.

Ist Stehles Plugin fĂŒr dich funktionsmĂ€ĂŸig der Overkill oder willst du kein Geld ausgeben, dann solltest du dir „Easy Add Thumbnail” von Samuel Aguilera ansehen. Dieses ĂŒberaus schlanke StĂŒckchen Code tut wirklich nichts anderes als das erste Bild eines Beitrags zum Beitragsbild, also zum Featured Image zu machen.

Entsprechend funktioniert es natĂŒrlich auch nur in den FĂ€llen, in denen du zum Beitrag mindestens ein Bild mit den Standardmethoden hochgeladen hast. Das Plugin kĂŒmmert sich dabei stets um alle deine BeitrĂ€ge, funktioniert demnach nicht nur fĂŒr neue Veröffentlichungen. Hat ein Beitrag bereits ein Featured Image, rĂŒhrt das Plugin dieses nicht an. Aguileras Lösung ist komplett kostenfrei und kann auch ĂŒber das Backend installiert werden.

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

Im Repository finden sich noch eine Handvoll weiterer Alternativen, die jedoch sÀmtlich seit langer Zeit nicht mehr gepflegt werden und denen im Review-Bereich jeweils bescheinigt wird, dass sie nicht mehr funktionieren.

Willst du kein separates Plugin verwenden, solltest du beim nĂ€chsten Theme-Wechsel darauf achten, dass das DesigngerĂŒst deiner Wahl eine entsprechende FunktionalitĂ€t mitbringt. Das gilt beispielsweise fĂŒr Divi von ElegantThemes. Hier schaltest du in den Optionen einfach das Feature „Erstes Bild aus Beitrag verwenden“ an.

Divi ist insgesamt keine schlechte Wahl. Nicht zu Unrecht brĂŒsten sich die Entwickler damit, mit Divi das populĂ€rste Premium-Theme fĂŒr WordPress erschaffen zu haben. Kaufen kannst du es indes nur ĂŒber eine Mitgliedschaft im Theme-Club von ElegantThemes. Die kostet dich pro Jahr 89 USD (oder einmalig 249 USD) und erlaubt dir die Verwendung aller 87 Themes, die die Schmiede derzeit im Portfolio hat.

Kommen wir abschließend zum Problem der unproportionalen Bildanzeige beim Themewechsel. Hier mĂŒssen schlichtweg die Beitragsbilder neu generiert werden, damit sie zu den Abmessungen passen, die das jeweilige Theme registriert.

FĂŒr diesen Zweck eignet sich das Plugin „Regenerate Thumbnails“ von Alex Mills.

Regenerate Thumbnails
Regenerate Thumbnails
Preis: Kostenlos

„Regenerate Thumbnails“ ist ebenfalls ein kostenloses Plugin und kann bequem vie Backend installiert und aktiviert werden. Auf die FunktionalitĂ€t greifst du auf verschiedene Weise zu.

Unter Werkzeuge > Vorschaubilder regen. findest du einen einzelnen Button mit der Aufschrift Regeneriere alle Vorschaubilder, der genau das tut. Dabei verwendet das Plugin die Werte, die unter Einstellungen > Medien eingetragen sind und die Werte, die das jeweilige Theme festlegt. Wenn du selektiver vorgehen willst, findest du die Möglichkeit, die Vorschaubilder neu zu generieren auch in Medien > MedienĂŒbersicht an jedem einzelnen Bild:

Fazit: Nimm die Plugins oder achte aufs richtige Theme

Mit zwei Plugins hast du die besprochene Thematik der Beitragsbilder gut im Griff und bist auch fĂŒr zukĂŒnftige Themewechsel gerĂŒstet. Alternativ achtest du beim Themewechsel direkt darauf, dass das Theme deines Herzens die Problematik behandelt. Die genannten Plugins und erst recht das Divi-Theme werden zudem ordentlich gepflegt, so dass ich hier eine volle Empfehlung aussprechen kann.

(Der Beitrag erschien erstmals im August 2017 und wurde seitdem mehrfach auf den aktuellen Stand gebracht. Das letzte Update erfolgte 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.
Dr. Webs exklusiver Newsletter
Hinweise zur Protokollierung der Anmeldung, dem Einsatz von MailChimp als Versanddienstleister und zu den Widerrufsrechten findest Du in unseren Datenschutzhinweisen.

Ein Kommentar

  1. Hallo!

    > … Beitragsbild vergessen. Auf Social Media hat dein Post nun praktisch keine Chance.
    Stimmt,

    Nur, selbst wenn man sich von vornherein ein Theme mit Beitragsbildern nimmt, auch wenn alles funktioniert, wenn man nichts vergisst:
    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 hinzu“ oder beim bewerben das Bild vermisst. Das ist eine Frechheit, die seit der DSGVO noch schlimmer wurde.

    Scheinbar ist das Teilen von BeitrĂ€gen externer Sites ein hochkomplexes Gebiet geworden. Hab 100 Anleitungen zu „og“ Metatags, FB-IDÂŽs, API-Keys, Apps, FB-Debugger, FB Crawler uvam. studiert, aber es bleibt immer das Gleiche:
    Die (externen) Bilder werden nicht in FB Profilen und Seiten gezeigt 


    FrĂŒher hat man einfach den Link in einen FB-Beitrag kopiert, fertig, er erschien samt Bild.
    Heute braucht man ein Informatikstudium?

    Ansonsten, toller Artikel, kann va den Satz im Fazit unterstrichen:
    > „Alternativ achtest du beim Themewechsel direkt darauf, dass das Theme deines Herzens die Problematik behandelt.“
    + Wichtig: Bildbeschreibung/Beschriftung sollte nativ angezeigt werden – va. wg. Copyright!

Schreibe einen Kommentar

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