I need to modify the Caption shortcode so that it renders the caption wrapper regardless if there is any caption text present.
I've modified my Media content type with a custom field called Credit. Both the Caption and the Credit are correctly displaying on the front end when both are present. However, if there is no Caption text present, the post editor strips out the Caption shortcode, the wrapping element around the image isn't generated, and the Credit isn't displayed.
Current output when both Credit and Caption are present:
<figure class="wp-caption alignleft">
<img src='...' class="size-medium wp-image-237919">
<figcaption class="wp-caption-text">Some caption here.</figcaption>
<figcaption class="wp-caption-credit">©2018 A. Nonymous</figcaption>
</figure>
Current output with just Credit present:
<img src="..." class="size-medium wp-image-237919 alignleft">
Desired output with just Credit present:
<figure class="wp-caption alignleft">
<img src='...' class="size-medium wp-image-237919">
<figcaption class="wp-caption-credit">©2018 A. Nonymous</figcaption>
</figure>
Complete code I am using to add the custom field to the media post-edit and to render when the [img] shortcode is used:
/*
* Add a "credit" field to media
*
*/
function to4_add_attachment_credit_field( $form_fields, $post ) {
$field_value = get_post_meta( $post->ID, 'to4_img_credit', true );
$form_fields['to4_img_credit'] = array(
'value' => $field_value ? $field_value : '',
'label' => __( 'Credit' ),
'type' => 'textarea',
'helps' => __( 'Set a credit for this attachment.' )
);
return $form_fields;
}
add_filter( 'attachment_fields_to_edit', 'to4_add_attachment_credit_field', 10, 2 );
function to4_save_attachment_credit( $attachment_id ) {
if ( isset( $_REQUEST['attachments'][$attachment_id]['to4_img_credit'] ) ) {
$credit = $_REQUEST['attachments'][$attachment_id]['to4_img_credit'];
update_post_meta( $attachment_id, 'to4_img_credit', $credit );
}
}
add_action( 'edit_attachment', 'to4_save_attachment_credit' );
/**
* Customize <img> shortcode markup..
* @link: /
*/
add_filter( 'img_caption_shortcode', 'to4_img_caption_shortcode', 10, 3 );
function to4_img_caption_shortcode( $empty, $attr, $content ){
preg_match( '/(\d+)$/', $attr['id'], $matches );
$media_id = $matches[1];
$credit = get_field( 'to4_img_credit', $media_id );
$attr = shortcode_atts( array(
'id' => '',
'align' => 'alignnone',
'width' => '',
'credit' => $credit,
'caption' => '',
), $attr );
if ( 1 > (int) $attr['width'] || empty( $attr['caption'] ) ) {
return '';
}
if ( $attr['id'] ) {
$attr['id'] = 'id="' . esc_attr( $attr['id'] ) . '" ';
}
return '<figure ' . $attr['id']
. 'class="wp-caption ' . esc_attr( $attr['align'] ) . '" '
. 'style="max-width: ' . ( 10 + (int) $attr['width'] ) . 'px;" itemprop="image" itemscope itemtype="">'
. do_shortcode( $content )
. '<figcaption class="wp-caption-text" itemprop="caption">' . $attr['caption'] . '</figcaption>'
. '<figcaption class="wp-caption-credit" itemprop="author" itemscope itemtype=""><span itemprop="name">' . $attr['credit'] . '</span></figcaption></figure>';
}