Compatibility with other plugins and themes

Known issues with WordPress plugins and themes and possible fixes.

Please note that most fixes come up via email support or provided by kind users. We do not monitor changes. If you discover a new compatibility issue or have an addition to this page, please reach out.

Avada Builder

Background images

The Avada page builder has a unique way of loading background images. It required an individual solution for us to load image overlays on them.

Since the usual image source overlay could break the elements in the frontend, publishers need to make some manual adjustments.

Avada Builder loads the background image URL in a data-bg attribute, like this:

<div data-bg="https://example.com/image.jpg">
    …CONTENT…
</div>Code language: HTML, XML (xml)

Image Source Control automatically detects this and stores the image overlay string in the data-isc-source-text, e.g.,

<div data-bg="https://example.com/image.jpg" data-isc-source-text="Source: Thomas">
    …CONTENT…
</div>Code language: HTML, XML (xml)

You can access this attribute and follow the instructions on How to display and style captions for group background images for styling or creating a custom overlay from the added attributes.

When you enable the ISC option Overlay > Included Images > Developer Options > Avada Builder: Display the overlay text for background images, the image source string is added to the element with the image background, e.g.,

<div data-bg="https://example.com/image.jpg" data-isc-source-text="Source: Thomas">
    <span class="isc-source-text">
        Source: Thomas
    </span>
    …CONTENT…
</div>Code language: HTML, XML (xml)

This source text is unstyled. Open the following section to find a sample CSS style that positions the overlay at the bottom right of the image container.

/** You might need to replace .fullwidth-box.has-mask-background with another selector
or add a custom one like to the Avada blocks with background images **/
.fullwidth-box.has-mask-background .isc-source-text {
    bottom: 5px;
    right: 5px;
    position: absolute;
    background-color: rgb(51, 51, 51);
    color: rgb(255, 255, 255);
    opacity: 0.7;
    padding: 0px 0.15em;
    text-shadow: none;
    z-index: 9999;
}

/** This prevents the above fix to break captions for "real" images **/
.isc-source .isc-source-text { bottom: inherit; right: inherit; }Code language: CSS (css)

Please note that the solution above only works for <div> elements with a background image. Avada sometimes uses <span>, e.g., images in menus. Due to a lack of use cases, we ignore that use case for now. Please let us know, if you need that.

Finding images in the content

In one support case in June 2024, we saw that the Avada page builder probably caused images added by the page builder to the content to be missing in the Global Source List. The solution was to add the following PHP code to the site:

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

Blocksy

Add image credits to post excerpts

Blocksy, the theme we also use on this website, 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.

The following code can be used to add image sources on archive pages of any theme with an appropriate hook.

/**
 * 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.

Divi

The Divi page builder loads images differently than WordPress core.

If your overlays don’t show up, please try the following settings.

• set Overlay > Included images to “Images on the whole page”
• set Overlay > Included images > Developer options to “Display the overlay within HTML tags that use inline styles”. See How to display and style captions for group background images for more information

Dynamic image gallery

If you are using a gallery with a navigation, you might need the following adjustments.

Add the following CSS to your site if the images in the gallery are pushed down.

.dp-ddg-image-container {
    padding-top: 0 !important;
}Code language: CSS (css)

Add the following JavaScript code to your site if the overlay is at the wrong position when using the navigation. This will reload the overlay position when someone uses a navigation button.

$('.dp-ddg-page-button').click(function() {
    isc_update_captions_positions();
});Code language: JavaScript (javascript)

Elementor

Captions for background images

The Elementor Pro page builder loads some background images via CSS files. See Adding image captions to Elementor background images on how to display image sources for them.

Optimized Image Loading (Lazy Loading)

Lazy loading images can lead to overlays being misplaced when scrolling the page since the position of the lazy-loaded images is shifting. You can either disable the optimization feature or use one of these code snippets to fix the overlay position in the background.

Jetpack

Site Accelerator

The Site Accelerator feature in Jetpack moves images to other URLs (= CDN). This prevents Image Source Control from identifying the URLs as belonging to the user’s actual domain.

We were made aware of this by a user, but after they disabled this feature, were was no incentive to add support for this. Please reach out to us if you want to sponsor support for compatibility.

Swyft (Theme)

• Swyft Theme by Code Supply, available through Themeforest
• Last tested: December 28th, 2023
• Conflicting feature in ISC: Overlays on featured images

The Swyft theme displays a large and a small version of featured images and uses CSS to hide one of them. Their CSS rule doesn’t work when overlays are enabled for images outside the post content.

Add the following CSS rules to your site to fix that.

@media (min-width: 576px){
    .cs-entry__header .cs-entry__overlay .cs-overlay-background .isc-source {
        display: none;
    }
}

.cs-entry__header .cs-entry__overlay .cs-overlay-background .isc-source:last-child {
    display: none;
}

@media (min-width: 576px) {
    .cs-entry__header .cs-entry__overlay .cs-overlay-background .isc-source:last-child {
        display: block;
    }
}

.cs-entry__header .cs-entry__overlay .cs-overlay-background .isc-source {
    width: 100%;
    height: 100%;
    object-fit: cover;
}Code language: CSS (css)

Polylang

If image sources don’t show up for images on pages translated with Polylang plugin, you might want to disable their “Media” module.

If that module is absolutely needed and you have resources to help us find another solution, then please reach out.

Toolset Plugin

• Last tested: May, 2023
• Conflicting feature in ISC: Overlays

The Toolset plugin might cause image source overlays to appear twice.

The solution is to enable the option “Do not apply third-party filters to the output” in the WYSIWYG field settings.

WebP Express

The WebP Express plugin creates new WEBP images in a custom folder. Based on a user’s feedback, Image Source Control cannot recognize these secondary images and display captions for them.

If this project finds a sponsor, I am happy to look further into it. Please let me know if you are interested.

WP All Import

A user asked if one could import image sources when importing images using the WP All Import plugin.

Image Source Control saves image sources as post meta information. According to the user, they were able to import post meta information for images with WP All Import – though they didn’t provide a source for that.

They used the isc_image_source meta key to insert the image source string and isc_image_source_url for the target URL for the source.

WPBakery Page Builder

• Compatibility with WP Bakery page builder version 7.6
• Last tested: late May 2024
• Long-term support: if users fund further development

As of June 2024, Image Source Control can display image attribution overlays for background images added by WP Bakery. This type of support was made possible thanks to a user contribution and might not be continued if the WP Bakery page builder makes changes in this regard.

Notes on the compatibility:

• WP Bakery support for Overlays must be enabled in the Overlay section of the ISC settings. This setting is only visible when WP Bakery is enabled.
• Only one image URL per WP Bakery block is supported.
• The Per-page List shows image sources for background images only if the “Any image URL” option is selected.

Image Source Control tries to apply the same styling to the overlay for WP Bakery background images as it does for other overlays. On one test site, this caused the container with the background image to change size. As a solution, you need to give the container, which now also includes the isc-source class, a static CSS value line-height.