ACF Media Credit

© Don Gaines

This plugin outputs a Credit & Credit Link field for items in the Media Library. The plugin then filters the content of a page or post and checks to see if a media credit exists, if it does, then it’s added. If not, the image is displayed in normal fashion. Let’s get to the details of this, shall we? (This currently does not support credits for anything other than images. If there’s a demand/response to have it work for other media items then I’ll work on that.)

This is a standard image

You might find it paired with some content. What’s happening right now, for this credit to display, is the ACF Media Credit plugin is running through a regular expression to see what matches. If it finds a match then it gets the ID and uses the ID to see if any media credit fields exist. Not too shabby, huh? So far, there’s no work for you on this end of things. If you inspect this element you’ll see that the image is now wrapped in a div. This helps us align the credit appropriately because the div picks up the alignment attributes set when you insert the image. But, there are functions you can use in your code to display the image.

Image with a caption

This is an image with a caption. We’re not running a regular expression for these. For images with captions we’re filtering the caption shortcode and if a media credit exists, then it displays, otherwise, it just spits out the normal caption shortcode. You’ll also notice, if you inspect element, this image is wrapped in a unique div that picks up the necessary classes & alignments from the caption shortcode output. This credit is not linked as you can see. This also checks for the ‘figure’ markup of html5 (TwentyFourteen supports this). If you’d like a little more control over how the credit is displayed then please use the img_caption_shortcode filter:

add_filter( 'img_caption_shortcode', 'your_function_name', 10, 3 );

Functions

---

The Post Thumbnail Media Credit

the_post_thumbnail_media_credit();

The header image above uses this function to display the credit. The position can be manipulated based on where you add this to your code and then further CSS. This is especially useful as our regular expression isn’t checking for background images. Does not require an attachment ID.

The Media Credit HTML

the_media_credit_html($attachment_id)

outputs:

<span class="acf-media-credit">
  <span class="acf-credit">
    <a href="http://www.creditlink.com">Credit</a>
  </span>
</span>

If you’re doing some really custom work in a theme and want to just return the html markup of the media credit then this function can do it. You just need your image ID. This will RETURN, not ECHO.

The Media Credit

the_media_credit($attachment_id);

This runs an echo on the_media_credit_html();

The Plain Media Credit

the_plain_media_credit($attachment_id);

Returns the most basic markup possible for the media credit:

<a href="http://www.creditlink.com">Credit</a>

Viewing the returned array

print_r(get_media_credit($attachment_id));

Lastly, you can view the array of media credit info with the code above where you would sub $attachment_id with the ID of your attachment image. For the example below I’m using the ID of 102 (it’s the rock picture near the top of the page) and I’ve wrapped my print_r in a ‘pre’ tag so it’s cleaner to view.

Filters

---

The Base Output Filter

add_filter('acf_media_credit_base_output', 'your_function_name');

This filter allows you to tweak or totally change the basic output of the credit. Normally the credit is output like so:

<span class="acf-media-credit">
  <span class="acf-credit">
    <a href="http://www.creditlink.com">Credit</a>
  </span>
</span>

With this filter you could change the separator:

function change_sep($image_credit){
  $image_credit = str_replace('|', '\', $image_credit);
  return $image_credit;
}
add_filter('acf_media_credit_base_output', 'change_sep');

or add ‘rel=”nofollow”‘ to the links:

function nofollow($image_credit){
  $pattern = '/<a href="(.*?)" target="_blank">/';
  $new_link = '<a href="${1}" target=_blank" rel="nofollow">';
  $image_credit = preg_replace($pattern, $new_link, $image_credit);
  return $image_credit;
}
add_filter('acf_media_credit_base_output', 'nofollow');

The Div Class Filter

add_filter('acf_media_credit_div_class', 'your_function_name');

This filter allows you to change or add to the ‘media-credit’ class that is added to the div wrapping the image plus credit. To change it entirely use:

function change_class($media_credit_div_class){
  $media_credit_div_class = 'new-credit-class';
  return $media_credit_div_class;
}
add_filter('acf_media_credit_div_class', 'change_class');

To add to the ‘media-credit’ class use:

function change_class($media_credit_div_class){
  $media_credit_div_class .= 'new-credit-class';
  return $media_credit_div_class;
}
add_filter('acf_media_credit_div_class', 'change_class');