1

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
* https://codex.wordpress.org/Plugin_API/Filter_Reference/attachment_fields_to_edit
*/

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: https://allisontarr.com/2018/02/12/acf-custom-field-media-item/
 */

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="http://schema.org/ImageObject">'
     . do_shortcode( $content )
     . '<figcaption class="wp-caption-text" itemprop="caption">' . $attr['caption'] . '</figcaption>'
     . '<figcaption class="wp-caption-credit" itemprop="author" itemscope itemtype="https://schema.org/Person"><span itemprop="name">' . $attr['credit'] . '</span></figcaption></figure>';
}
  • How did you add this custom field to your front end? Did you follow an article or tutorial? If so, can you link it here? – That Brazilian Guy Jan 7 at 22:38
  • The credit field is added to the media upload form using instructions from the Codex or via Advanced Custom Fields. The credit field is rendered in the front end whenever the image shortcode is used, via instructions from Allison Star – Slam Jan 9 at 8:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.