Learn here how to customize Image Source Control to your needs.

Please consult a developer or consider hiring me if the examples below exceed your coding experience or comfort level.

Frontend layout

Fix the overlay position

The position of the image captions is determined after the page is loaded. However, sometimes, elements are loaded later or react to some user interaction, and if they shift the page layout, the captions could shift, too.

If this happens, you can trigger the isc_update_captions_positions() JavaScript function to correct all caption positions. Here are a few examples.

Update positions 1 second after the page fully loaded:

document.addEventListener( 'DOMContentLoaded', function() {
    setTimeout( isc_update_captions_positions, 1000 );
});Code language: JavaScript (javascript)

Update positions every second. This might be the only solution for very dynamic page layouts.

setInterval( isc_update_captions_positions, 1000 );

Update positions when another element is clicked:

document.querySelector('.submit-button').addEventListener( 'click', isc_update_captions_positions );Code language: JavaScript (javascript)

If these solutions don’t work, the rearrangement may have broken the markup. The CSS of Image Source Control requires the following selector to work: .isc-source .isc-source-text. If one of them is missing, positioning no longer works.

See also isc_overlay_html_source below for custom overlay layouts.

How can I adjust the font size?

You can adjust the font styling in overlays and Per-page lists using custom CSS.

You can place the CSS snippets listed below using one of the following ways:

  • In the styles.css of your theme – ideally, a child theme.
  • Through Appearance > Customizer > Additional CSS
  • For block themes, through Appearance > Editor > Styles
    • Click on the edit icon
    • Click on the “Styles” icon at the top right
    • Click on the three vertically aligned dots
    • Choose “Additional CSS”

Overlay

Reduce the font size.

.isc-source-text { font-size: 0.8em !important; }Code language: CSS (css)

Per-page list

Reduce the font size.

.isc_image_list_box { font-size: .8em; }Code language: CSS (css)

Add an icon to the caption

You can add an icon to the overlay using either the isc_overlay_html_source filter in PHP or CSS. For the PHP filter, please take a look at the plugin code to learn more.

Use .isc-source .isc-source-text:before to add an element before the text. Here is a draft for some CSS that adds an SVG image icon. Please find a tool online to convert an SVG into a data URL.

.isc-source .isc-source-text:before {
    content: url('data:image/svg+xml;base64,...'); /* replace ... with your Base64 encoded SVG */
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 5px; /* Adjust spacing between the icon and text */
    vertical-align: middle; /* Aligns the icon with the text */
}Code language: CSS (css)

Styling the global list

The Global list comes without much styling to match your theme and, therefore, your site’s style.

You can make adjustments with custom CSS and the list’s class isc_all_image_list_box. Here are a few examples:

/* align headlines to the left and increase the space between them */
.isc_all_image_list_box th {
    text-align: left;
    padding-right: 10px;
}

/* increase the space between table rows */
.isc_all_image_list_box td, .isc_all_image_list_box th {
    padding-bottom: 20px;
}Code language: CSS (css)

Filter hooks (PHP)

We’ll happily include more hooks to fit your needs—go ahead and contact us. To add your filter, proceed and use add_filter() as described in the WordPress Plugin API.

We recommend you look at the definition of the filters in the source code of ISC to learn how to use them exactly.

isc_filter_url_pre_get_image_by_url

Use this filter if the image URLs in the frontend divert from the ones in the Media Library and database.

The problem and solution are explained in detail in Adding overlays to images with dynamic URLs.

isc_image_posts_meta_limit

By default, the Global List will only show up to 10 posts on which a given image was found. You can change that number using the isc_image_posts_meta_limit filter. The example below limits this to 5 posts.

add_filter('isc_image_posts_meta_limit', function( $limit ){
    return 5;
}Code language: PHP (php)

isc_images_in_posts

This allows you to register images with a post before the isc_post_images post meta information is saved—for example:

add_filter('isc_images_in_posts', 'your_images_in_posts_filter', 10, 2);
function your_images_in_posts_filter($image_ids, $post_id) {
	// look at the source code to see how the $image_ids array is structured
	return $image_ids;
}Code language: PHP (php)

isc_images_in_posts_simple

Similar to isc_images_in_posts above but to be used when saving the isc_image_posts meta. Register more posts that use a specific image—for example:

$image_urls = apply_filters('isc_images_in_posts_simple', $image_urls, $post_id);Code language: PHP (php)

isc_overlay_html_source

Use isc_overlay_html_source to add custom markup to the output of the Overlay source.

You can use it in combination with the “Unstyled credit line” style to wrap image sources in your very own markup:

// Add custom output to the overlay
add_filter('isc_overlay_html_source', function($source = '', $image_id = 0) {
	return "<span class='image-source' style='font-weight: bold;'>$source</span>";
}, 10, 2);Code language: PHP (php)

This small plugin uses the filter and comes with sample CSS. Use it for your own experiments.

The isc_overlay_html_source filter is only used when markup around image sources strings is intended. I.e., the filter is omitted for source information in data attributes.

You can also use the isc_overlay_html_markup_before and isc_overlay_html_markup_after hooks to add a wrapper around the image that has the source. Check out the plugin’s source code to see how they are used.

isc_public_source_url_html

The isc_public_source_url_html filter can be used to manipulate the whole HTML that creates the source link—for example:

Remove “nofollow” from all source links

add_filter('isc_public_source_url_html', function( $source_link_html) {
	return str_replace('rel="nofollow"', '', $source_link_html);
});Code language: PHP (php)

Remove “nofollow” only from specific images

Please note: array(12, 123) just serves as an example and needs to be replaced with your own attachment IDs.

add_filter('isc_public_source_url_html', function($source_link_html, $attachment_id) {
	// the example works for images with the ID 12 and 123
    if(!in_array($attachment_id, array(12, 123), true)) {
		return $source_link_html;
	}
	return str_replace('rel="nofollow"', '', $source_link_html);
}, 10, 2);Code language: PHP (php)

isc_public_excluded_post_ids

Use the isc_public_excluded_post_ids filter to disable ISC functions on certain posts – or any other post type single pages in the frontend.

Here is an example to exclude the post ID 1323:

add_filter( 'isc_public_excluded_post_ids', function( $excluded_post_ids ){
	$excluded_post_ids[] = 1323;
	return $excluded_post_ids;
});Code language: PHP (php)

When ISC is excluded from a given page, the frontend index also stops running, which means that the images exclusively displayed on this post are not listed in the global source list either.

isc_unused_images_per_page

Use this filter to change the number of unused images on the Unused Images page. Default is 100.

add_filter( 'isc_unused_images_per_page', function(){
	return 1000;
});Code language: JavaScript (javascript)

Other customizations

Disable ISC on certain pages

You can disable Image Source Control completely on certain pages or page types.

Use the isc_public_excluded_post_ids hook to do this. See How to disable image sources for details, examples, and further options to disable image sources.

Enable ISC fields in the block options and media overlay

By default, when editing a post or page, you will only see ISC fields in the options of image blocks or when uploading an image in the media overlay. Enabling both could cause them to override each other.

However, you can enable both using the following PHP snippet.

add_filter( 'isc_force_block_options', '__return_true' );Code language: JavaScript (javascript)

When set, the block option plugin setting is visually disabled.

How to add custom code?

There are various possibilities for adding custom code to your site. My main rule is to handle customizations where I can best find them and not spread them over multiple methods. This could be a custom plugin, a child theme, or a code snippet manager.

Here are a few methods I have used in the path. Consider hiring me if you feel overwhelmed.

  • Theme Files: Appearance > Theme Editor, to edit the functions.php, styles.css or JavaScript file of your theme
  • Child Themes: Create a child theme and modify its files via FTP or hosting file manager
  • Customizer: Appearance > Customize > Additional CSS
  • Custom Plugin: Develop a custom plugin with all your adjustments
  • Code Snippet: Use a code snippets manager to handle all customizations in your WordPress backend. I am using Code Snippets
  • Widgets; Appearance > Widgets > Custom HTML/Text Widget
  • Page Builders: Use custom code modules within builders like Elementor or Divi