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

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.

Sample CSS for styling the Avada background image overlay
/** 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.

Divi

The Divi page builder loads images differently than WordPress core.

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

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.

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.

Click to see the full CSS code.
@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.