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)

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.

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.

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.