Buch & Berger

  • Angebot
  • Agentur
  • Blog
  • Kontakt
  • Search

Genesis Featured Image Captions: Bildunterschriften für Post Thumbnails

Für Featured Images (auch: Post Thumbnails) sind in der WordPress-Welt keine Bildunterschriften vorgesehen. Zumindest scheinen sich Theme-Entwickler wenig dafür zu interessieren. Vielleicht gibt es ja einen guten Grund, den ich noch nicht verstanden habe.

Bildunterschriften sind jedenfalls nützlich und in Hinblick auf Fotocredits manchmal auch ein Muss. Wahrscheinlich denke ich das nur, weil ich es von Büchern und Zeitschriften her so gewohnt bin. Vielleicht handelt es sich aber auch um eine universale Lösung, für die es nicht einmal im Web einen adäquaten Ersatz gibt.

Verwendung findet sich dafür nicht nur im Frontend. Auch im Backend eines CMS gehört ein Fotocredit meiner Ansicht nach direkt zum jeweiligen Medium, in der Regel also in das entsprechende Feld unterhalb des Bildtitels. Dort macht das Sinn und nicht im Beitragstext oder ganz woanders, wo sich der Urheber eines Bildes später nur noch über die Suchfunktion oder gar nicht mehr recherchieren lässt.

Bildunterschriften mittels functions.php und Template File

Folgende Lösung gilt für das Genesis Framework, aber sie funktioniert entsprechend abgewandelt auch in anderen WordPress-Themes. Der Code kommt in der Regel entweder in die functions.php oder ein Template File des (Child-) Themes. Der Hook und ev. auch das HTML-Markup müssen angepasst werden:

//* Genesis Featured Image Captions:
// Add Featured Image width caption to custom single post
add_action( 'genesis_entry_header', 'bub_single_post_featured_image', 8 );
function bub_single_post_featured_image() {

  if ( !is_singular( array( 'post', 'bubpost' ) ) ) return;

  $thumb = genesis_get_image( array( 
    'format' => 'html', 
    'size' => genesis_get_option( 'image_size' ), 
    'attr' => array( 'class' => 'wp-post-image' )
    ) );

  $thumb_id = get_post_thumbnail_id();
  $thumb_url_array = wp_get_attachment_image_src($thumb_id, 'thumbnail-size', true);
  $thumb_url = $thumb_url_array[0];
  $caption = get_post( get_post_thumbnail_id() )->post_excerpt;

  echo '<div class="thumbnail-wrapper">';
  echo '<a href="' . $thumb_url . '"' . ' rel="lightbox">' . $thumb . '</a>';
  
  if ( $caption ) {
    echo '<span class="thumbnail-caption">' . $caption . '</span>';
  }

  echo '</div>';

}

Achtung, in den Genesis Theme Settings > Content Archives darf nicht angehakt sein: Include the Featured Image? Wir haben dieses ja soeben eigenhändig hinzugefügt.

Ein bisschen CSS entscheidet jetzt darüber, ob es sich um eine tatsächliche Bildunterschrift oder eigentlich ein Textoverlay handelt. Das Ganze kann z.b. so aussehen:

.thumbnail-wrapper {
  position: relative;
}

.wp-post-image {
  height: auto;
  transition: opacity .5s;
  width: 100%;
}

.wp-post-image:hover {
  opacity: .5;
  transition: opacity .5s;
}

.thumbnail-caption {
  background: rgba(0,0,0,.4);
  color: #e5e5e5;
  display: table;
  font-size: 12px;
  margin: -31px 0 0 0;
  padding: 5px 12px 5px 10px;
  position: absolute;
    bottom: 1px;
    left: 0;
  z-index: 1;
}

Und fertig ist die Bildunterschrift. Man sieht klarerweise nur dann etwas, wenn das Feld für die Bildunterschrift beim betreffenden Bild auch ausgefüllt ist. Da ist logisch, aber mir ist schon so einiges passiert.

Datum: 2015-08-20
Rubrik: Design & Development

Über den Autor

Stefan Buchberger beschäftigt sich seit vielen Jahren mit der Präsentation, Verbreitung und Kommunikation von Inhalten. Er war vor allem als Buchverleger aktiv.

Heute gilt seine Aufmerksamkeit einer nachhaltigeren Form der Webentwicklung, welche die Inhalte zurück in den Fokus rückt.

Seitenleiste

Neue Beiträge

Mann skizziert Projekt auf Tafel

Wege zur Website: Nach Maß und von der Stange

Websites entstehen individuell und nach Maß oder auf Basis bestehender Vorlagen. Vielfach aber: sowohl als …
Rhinozeros

Antworten zur Website-Wartung und Wartungsvereinbarung

In diesem Beitrag beantworten wir Fragen, die uns zum Thema Wartung und Wartungsvereinbarung gestellt wurden …
Screenshot

Blog für die Österreichische Gesellschaft für Literatur

Die Österreichische Gesellschaft für Literatur in der Wiener Herrengasse ist Drehscheibe zwischen Texten, Schreibenden und …
Wireframing auf einem Tablet

Projektablauf: Vom Erstgespräch zur fertigen Website

Bevor Sie sich entschließen, mir mehr über Ihr Vorhaben zu erzählen, möchte ich Ihnen die …

WordPress: Infos zu Warnhinweisen und Fehlermeldungen

The installed version of UpdraftPlus Backup/Restore has not been tested on your version of WordPress …

Newsletter

Unser Newsletter mit Tipps und Angeboten erscheint wenige Male im Jahr. Infos zu Versand und Verarbeitung erhalten Sie in unserer Datenschutzerklärung.

    nav-social-menu

    • Facebook
    • Twitter
    • LinkedIn
    • RSS
  • Impressum
  • Datenschutz
Top ▲
Top ▲
Finde

Zeige alle ...

Generic filters
Durch die Nutzung dieser Website erklären Sie sich mit der Verwendung von Cookies einverstanden. Weiters möchten wir Sie auf unsere Datenschutzinformation aufmerksam machen: Erfahren Sie mehr