Fix of the Overlay Position
Learn how to correct the overlay position.
It is possible that the position of the image source overlays shifts significantly. When this happens, it is often because the page shifts again after the position has already been established. This can be due to a script that loads later during page construction or when a user interacts with the site.
In the current case, posts, including post images, were listed on a website. This list could be dynamically filtered using an AJAX function. However, after filtering, the position of the image sources was no longer correct.
Depending on the cause and your own programming knowledge, there are the following solutions:
Reposition Overlays
Image Source Control uses JavaScript to place the overlays within the image containers. The script checks the position every 100 milliseconds. You can find the scripts under /public/assets/js/captions.js.
To correct the position of the image sources, you can execute the function isc_update_captions_positions().
Depending on when the positions should be corrected, you can run the script with a delay or at a trigger. For example, if an AJAX filter is used to reposition post images, you must execute the mentioned function after the AJAX function has rebuilt the page. Whether this is possible, you may need to ask the developer of the function.
If this solution does not 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.
It is also possible that the executed script overwrites the CSS of Image Source Control. We are happy to look at the exceptions in email support.
Custom CSS for Positioning
Activate the setting Overlay > Layout > Remove markup and style to prevent the automatic positioning and styling of overlays by Image Source Control.
You can now write your own CSS and markup. See the filter isc_overlay_html_source for this.
Prevent Page Shifts
The simplest “solution” is to prevent the page shifts or execute them below images. You may be able to do without an AJAX filter.
Contact Support
Is the appropriate solution not listed? Then contact our email support.
Questions? Feedback? How can I help?