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');
Leave a Reply