Korrektur der Overlay-Position

Hier findest du Lösungen, um die Position des Overlays zu korrigieren.

Es kann vorkommen, dass die Position von Bildquellen-Overlays deutlich verrutscht. Wenn das passiert, liegt es häufig daran, dass sich die Seite nach dem Laden der Position nach dem Aufbau der Seite noch einmal verschiebt. Das kann an einem Script liegen welches noch später lädt, entweder beim Seitenaufbau oder durch Interaktion des Nutzers.

Im aktuellen Fall wurden Beiträge samt Beitragsbild auf einer Webseite aufgelistet. Diese Liste konnte mit Hilfe einer AJAX-Funktion dynamisch gefiltert werden. Nach dem Filtern stimmte aber die Position der Bildquellen nicht mehr.

Es gibt je nach Ursache und eigenen Programmierkenntnissen, folgende Lösungen.

Overlays neu positionieren

Image Source Control nutzt JavaScript, um die Overlays innerhalb der Bildcontainer zu platzieren. Das Script prüft die Position alle 100 Millisekunden. Du findest die Scripte unter /public/assets/js/captions.js.

Um die Position der Bildquellen zu korrigieren, kannst du die Funktion isc_update_captions_positions() ausführen.

Je nachdem, wann die Positionen korrigiert werden sollen, kannst du das Script mit einem delay ausführen oder bei einem Trigger. Zum Beispiel, wenn ein AJAX-Filter verwendet wird um Beitragsbilder neu zu platzieren, muss du die genannte Funktion ausführen, nachdem die AJAX-Funktion die Seite neu aufgebaut hat. Ob das möglich ist, musst du ggf. beim Entwickler der Funktion erfragen.

Sollte diese Lösung nicht funktionieren, dann ist vielleicht das Markup durch die Neuordnung kaputt gemacht worden. Das CSS von Image Source Control benötigt folgenden Selector, um zu funktionieren: .isc-source .isc-source-text. Sollte einer davon fehlen, so funktioniert es nicht mehr.

Es ist auch möglich, dass das ausgeführte Script das CSS von Image Source Control überschreibt. Hier schauen wir uns gerne die Ausnahmen im E-Mail-Support an.

Eigenes CSS zur Positionierung

Aktiviere die Einstellung Overlay > Layout > Entferne Markup und CSS-Style um die automatische Positionierung und das Styling von Overlays durch Image Source Control zu unterbinden.

Du kannst jetzt eigenes CSS und Markup schreiben. Siehe dazu den Filter isc_overlay_html_source.

Seitenänderungen unterbinden

Die einfachste “Lösung” ist, die Änderung der Seite zu unterbinden oder unterhalb der Bilder auszuführen. Auf einen AJAX-Filter kann man ggf. verzichten.

Support kontaktieren

Die passende Lösung ist nicht aufgeführt? Dann kontaktiere unseren Premium-Support.

Porträt von Thomas Maier, Gründer und Geschäftsführer von Image Source Control

Fragen? Wie kann ich helfen?