How to add image credits below post excerpts
Image Source Control allows you to display the source of the featured images below the post excerpt on your homepage or archive pages.
This plugin option works out of the box for many themes and the Post Excerpt block.
If you haven’t, get and install Image Source Control, go to Settings > Image Sources(?), and enable the Insert below excerpts option. In most cases, the featured image caption on your homepage and archive pages should be displayed right now.
If you have set up Image Source Control according to the documentation and the image credits don’t show up, you can try the custom code solution below to add this feature to your theme.
Image Credit Overlays on archive pages
Instead of adding the image credits below the excerpt, you can add them as a text image overlay. This also works if your overview pages don’t show the post excerpt.
This works out of the box if you enable the Overlay option in Image Source Control. If the post list is generated by your theme, you also need to enable Overlay > Included Images > Images on the whole page.
Custom code to add image credits to post excerpts
Some themes generate archive pages with post excerpts differently than the usual way in WordPress core. One example is Blocksy, the theme we also use on this website. The popular theme displays the image created correctly below automatically created excerpts—using the first words from the text—but not for manually written excerpts added in the post options.
This gave me a reason to see how Blocksy and Image Source Control can be extended with custom code to show image credits for the featured image below post excerpts.
You can use the following code as a basis to add image sources on archive pages of any theme with an appropriate hook.
Please note that we cannot support or write custom solutions in support, but we are happy to change this post if you find any issues.
/**
* Add the featured image source to archive pages of the Blocksy theme
*
* Blocksy only outputs the featured image source by default for automatically created excerpts.
* For manually created ones, it does not add the source, so we need to do this manually.
*/
add_filter( 'blocksy:excerpt:output', function( $excerpt ) {
$options = ISC_Class::get_instance()->get_isc_options();
$post = get_post();
// Blocksy uses the blocksy:excerpt:output filter for manual and automatic excerpts. The follow check makes sure that the source is only added to the manual excerpt.
if ( is_singular() && ! $post->post_excerpt ) {
return $excerpt;
}
// Honor the "Insert below excerpts" option in the ISC settings.
if ( empty( $options['list_on_excerpts'] ) ) {
return $excerpt;
}
return $excerpt . ISC_Public::get_instance()->get_thumbnail_source_string( $post->ID );
}, 100 );
Code language: PHP (php)
Some notes about the code above:
- Change
blocksy:excerpt:output
in line 7, if your theme provides a different hook to add content below excerpts. - Remove the
! $post->post_excerpt
check from line 12 if your theme neither shows the image source below manually written nor automatically created excerpts.
Questions? Feedback? How can I help?
Reach out directly via the contact form.