WordPress & Webwork

WordPress: Artikelbilder in der Kopfzeile (Header)

Wie man es umsetzen kann, dass der Kunde auf bestimmten Unterseiten ein abweichendes Bild in den Kopfbereich (Headergrafik) einsetzen kann.

WordPress-Icon In einem Projekt wo WordPress als "klassisches" CMS eingesetzt wird … also auf einer Website ohne Blog-Charakter … wurde vom Kunden gewünscht, dass man die Möglichkeit hat, bei bestimmten Unterseiten ein abweichendes Bild im Kopfbereich einzufügen.

Da bei der Installation schon einige wichtige Plugins im Einsatz sind, dachte ich mir ich setze auf eine einfache Code-Lösung und habe die abgespeckte Variante dessen genommen, die auch schon bei dem Vorgänger-Standard-Theme Twenty Ten (2010) im Einsatz ist.

Das Prinzip ist, die Artikelbilder als abweichende Grafiken im Kopfbereich zu nehmen. Zuerst aktivieren wir in der functions.php die Artikelbilder (egl. Post Thumbnails):

add_theme_support( 'post-thumbnails' );

Da aber die Maße der Kopfgrafik (960 x 108 Pixel) nicht mit den Maßen der anderen Vorschaubilder übereinstimmt, musste ich in der functions.php ein weiteres Format definieren:

if ( function_exists( 'add_image_size' ) ) {
	add_image_size( 'kopfgrafik', 960, 108 );
}

Die Parameter-Angaben dürften soweit klar sein: Name des neuen Formats, die Breite und die Höhe des Bildes. Weitere Infos zu add_image_size() findet man in der offiziellen Dokumentation.

Anschließend wurde die Template-Datei header.php angepasst:

<?php if (has_post_thumbnail()) {
    the_post_thumbnail('kopfgrafik');
    } else { ?>
    <img src="/wp-content/uploads/2012/02/home_grafik.jpg" width="960" height="108" alt="" />
<?php } ?>

Mit diesem Code erreicht man, dass sofern ein Artikel oder Seite über ein Artikelbild verfügt, dieses auch im Kopfbereich eingefügt wird. Ist kein Artikelbild definiert, dann wird die definierte Standardgrafik eingebunden.

Man muss beim Bildupload lediglich darauf achten, dass man die Kopfgrafik bzw. das Artikelbild in voller Größe einbindet:

WordPress: Artikelbild im Kopfbereich

Wie man sieht, keine Raketenwissenschaft. Versetzt aber den Kunden dennoch in der Lage mit Bordmitteln, die Kopfgrafik bei Bedarf auf einzelnen Unterseiten auszutauschen und man spart sich ein zusätzliches Plugin.

6 Reaktion(en)

  1. Kuchen und Kakao

    Da die Grafik per
    the_post_thumbnail('kopfgrafik');
    eingebunden wird, ist die Auswahl der richtigen Größe im Bildupload nicht notwendig, WordPress wählt die korrekte Größe bei der Einbindung durch das voreingestellte Keyword aus.

    Zudem ist es nicht zwingend notwendig, eine zusätzliche Bildgröße "Kopfgrafik" zu definieren, wenn nur an dieser Stelle Artikelbilder eingesetzt werden sollen. Nach der Aktivierung der Post-Thumbnails per
    add_theme_support( 'post-thumbnails' );
    reicht es, die Größe für die Standard-Post-Thumbnails per
    set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
    zu definieren (HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT natürlich ersetzen mit der passenden Größe in Pixeln. )
    Wird dies vorgenommen, reicht ein Aufruf von
    the_post_thumbnail();
    um das Post-Thumbnail auszugeben.

    P.S.: twenty-ten enthält bereits die Aufrufe
    add_theme_support( 'post-thumbnails' );
    und
    set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true );
    Sie sind zu finden in der functions.php in der Funktion "twentyten_setup".

    Viele Grüße,
    Kuchen und Kakao

    1. Vladimir

      @KuK,

      reicht es, die Größe für die Standard-Post-Thumbnails per
      set_post_thumbnail_size( HEADER_IMAGE_WIDTH, HEADER_IMAGE_HEIGHT, true ); zu definieren

      Klar, dass geht auch. Anstatt add_image_size( 'kopfgrafik', 960, 108 ); gibt man set_post_thumbnail_size( 960, 108, true ); ein. Ich persönlich erkenne hier keinen wirklichen Vorteil. In beiden Fällen muss man eigene functions.php anpassen. Es ging ja hier nicht um die Anpassung von 2010 sonder um ein individuelles Theme.

      twenty-ten enthält bereits die Aufrufe
      add_theme_support( 'post-thumbnails' );

      weiß ich. 🙂 Deswegen schrieb ich ja auch:

      die auch schon bei dem Vorgänger-Standard-Theme Twenty Ten (2010) im Einsatz ist.

  2. Kuchen und Kakao

    Ich persönlich erkenne hier keinen wirklichen Vorteil

    Naja, es spart Platz auf dem Server. 1 Datei pro hochgeladenes Bild um genau zu sein. Zumindest, wenn man ein bestehendes Theme wie Twentyten, dass von sich aus post-thumbnail Unterstützung mitbringt , verwendet und für seine Zwecke anpasst. Beim Beispiel TwentyTen wird eine Größe über set_post_thumbnail_size gesetzt; wenn jetzt zusätzlich weitere Bildgrößen über add_image_size hinzugefügt werden, kann die Datenmenge je nach Menge der hochgeladenen Bilder schon deutlich variieren.

    Aber zum Beitrag zurück: Zumindest sollte in deinem Beispiel die Zeile

    add_image_size( 'kopfgrafik', 960, 108 );

    in

    add_image_size( 'kopfgrafik', 960, 108, true );

    geändert werden, damit die Grafik exakt beschnitten wird. Gerade bei Kopfgrafiken ist häufig ein fester Bereich vorgesehen (in diesem Fall vermutlich 960px x 108px). Beim Aufruf ohne "true" wird das Bild nur solange verkleinert, bis beide Seiten kleiner oder gleich den angegebenen Maximalwerten sind. Das kann bei einem Seitenverhältnis von 1:1 dazu führen, dass in diesem Beispiel dein Headerbild nur 108px x 108px groß wäre…

    Viele Grüße,
    Kuchen und Kakao

    1. Vladimir

      @KuK,

      Naja, es spart Platz auf dem Server. 1 Datei pro hochgeladenes Bild um genau zu sein.

      bei insgesamt 5-6 individuellen Bildern im Kopfbereich zu verschmerzen. 🙂 Ich denke, die zusätzlichen 80-90 KByte lassen sich ohne Probleme unterbringen auf dem Server unterbringen.

      Wenn es so viel Bilder wären, die dann auch von der Datenmenge ins Gewicht fallen, dann würde ich persönlich eh empfehlen, dass man bei so etwas auf Galerie- oder Slider-Plugins zurückgreift. Manuell per Post Thumbnails viele Dutzend oder sogar hunderte von Kopfgrafiken auszutauschen ist eine sehr undankbare Aufgabe.

      Das kann bei einem Seitenverhältnis von 1:1 dazu führen, dass in diesem Beispiel dein Headerbild nur 108px x 108px groß wäre

      Die Grafiken werden nach und nach in passender Form bzw. exakter Größe von 960×108 geliefert.

Die Kommentare in diesem Beitrag sind geschlossen.

WordPress-Schulungs­unter­lagen

Anleitung für Autoren und Redakteure
Schneller und unkomplizierter Einstieg in die redaktionelle Betreuung einer WordPress-Installation.

Handbuch für Administratoren
Schneller und unkomplizierter Einstieg in die technische Betreuung einer WordPress-Installation.

Anschauen