Bubsites

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.

Zeige alle ...