Bildvergleichsblock
Zeigen und vergleichen Sie die Unterschiede zwischen zwei Bildern mit dem Schieberegler des Image-Compare-Blocks.
Image-Compare-Block hinzufügen
Der Image-Compare-Block ist auf allen Websites verfügbar, die mit Jetpack verbunden sind. Er ist Teil der Blocksuite von Jetpack und standardmäßig aktiviert. Für die Nutzung des Image-Compare-Blocks ist kein kostenpflichtiges Upgrade erforderlich. In unserem Jetpack Blocks Artikel erfahren Sie mehr über die verfügbaren Blöcke und wie Sie sie aktivieren.
Jetpack Blocks require the Block Editor (also referred to as the Gutenberg editor). If you’ve installed the Classic Editor plugin, you have a few options:
- Deactivate the Classic Editor: Go to Plugins ? Installed Plugins in your WP Admin and deactivate the Classic Editor plugin.
- Enable both editors: If you prefer flexibility, navigate to Settings ? Writing in your WP Admin (not the menu under Jetpack settings). Set Allow users to switch editors to Yes. You will only see these options if you have the Classic Editor plugin installed and active.
Some custom themes or plugins may prevent you from using the Block Editor. In that case, please contact the support team for the plugin or theme for further assistance.
For more details, see Using Blocks and the Classic Editor.
Sie können den Image-Compare-Block hinzufügen, indem Sie im Blockauswahldialog danach suchen und/oder ihn im Abschnitt von Jetpack auswählen. Sie erkennen ihn an seinem grünen Symbol mit zwei verbundenen Bildern. Ausführliche Anweisungen zum Hinzufügen von Blöcken finden Sie unter Jetpack Blocks.
Führen Sie die folgenden Schritte aus, um Bilder zum Image-Compare-Block hinzuzufügen:
- Der Block funktioniert am besten mit zwei Bildern gleicher Breite und Höhe. Versuchen Sie daher, Bilder mit ähnlichen Abmessungen zu verwenden.
- Nachdem Sie den Block hinzugefügt haben, können Sie Bilder wie bei einem regulären Bildblock zu Ihrer Galerie hinzufügen.
- Sie können Bilder von Ihrem Computer hochladen, sie aus Ihrer Mediathek auswählen oder aus einer externen Quelle hinzufügen.
- Nachdem Sie Bilder hinzugefügt haben, können Sie über die Blockleiste und die Seitenleiste Ihre Anpassungen vornehmen.
- Fügen Sie dem Block nach dem Hochladen Ihrer Bilder bei Bedarf eine Beschriftung hinzu.
Beachten Sie, dass Sie den Block löschen und von vorn beginnen müssen, wenn Sie versehentlich die falschen Bilder hochladen oder ihre Reihenfolge ändern möchten.
Blockeinstellungen
Jeder Block verfügt über bestimmte Optionen in der Seitenleiste des Editors sowie über Optionen in der Blockleiste. Wenn die Seitenleiste nicht angezeigt wird, klicken Sie neben der Schaltfläche „Veröffentlichen“ auf das Einstellungen-Symbol (es sieht wie ein Menü aus).
Der Image-Compare-Block bietet nur wenige Optionen. Die wichtigste davon ist die Ausrichtung des Schiebereglers der Bilder.
Ausrichtungseinstellungen
Mit den Ausrichtungseinstellungen können Sie die Ausrichtung der Bilder von nebeneinander zu übereinander ändern. Dadurch ändert sich auch, wie der Schieberegler zwischen den Bildern bewegt wird.
Sie können die Ausrichtung beliebig oft ändern. Achten Sie jedoch darauf, die Änderungen zu speichern, bevor Sie die neue Ausrichtung testen.
Erweitert
Fügen Sie Ihrem Block eine Klasse für CSS hinzu, schreiben Sie benutzerdefiniertes CSS und gestalten Sie den Block nach Ihren Vorstellungen.
Bekannte Probleme
Der Image-Compare-Block verwendet den von Jetpack bereitgestellten Site Accelerator zum Bereitstellen und Optimieren von Bildern für eine bessere Leistung. Die gleichzeitige Verwendung mehrerer Optimierungs- oder Caching-Dienste neben Site Accelerator kann zu Konflikten führen, insbesondere bei der Darstellung der Bilder durch den Block.
Häufige Probleme sind fehlende Bilder oder ein nicht funktionierender Schieberegler. Sie werden oft durch Plugins verursacht, die Bild-URLs ändern, Bildformate automatisch konvertieren oder Lazy Loading und Umschreibungen von CDN anwenden, was Jetpack beeinträchtigen kann.
Wenn beim Image-Compare-Block dauerhaft Darstellungsprobleme auftreten:
- Deaktivieren Sie testweise vorübergehend alle Plugins zur Bildoptimierung (z. B. EWWW Image Optimizer), um die Kompatibilität zu prüfen.
- Wenn der Block nach der Deaktivierung funktioniert, überprüfen Sie beim erneuten Aktivieren die Einstellungen des Plugins. Versuchen Sie, Funktionen wie Lazy Loading oder die Verarbeitung von CDN zu deaktivieren.
- Testen Sie den Block.
Vermeiden Sie es grundsätzlich, mehrere Optimierungs- oder Caching-Ebenen zu aktivieren, die sich mit dem Site Accelerator von Jetpack überschneiden.
Still need help?
Please contact support. We’re happy to advise.
Datenschutzinformationen
Der Image-Feature-Block ist standardmäßig aktiviert. Er kann nicht deaktiviert werden. Der Image-Compare-Block ist im Blockauswahldialog immer verfügbar.
| Verwendete Daten | |
|---|---|
| Websiteinhaber/-benutzer
Keine. | Websitebesucher
Keine. |
| Erfasste Aktivitäten | |
| Websiteinhaber/-benutzer
Beim Trennen von Google Photos erfassen wir, dass die Verbindung zu Google Photos getrennt wird. | Websitebesucher
Keine. |
| Synchronisierte Daten (Mehr erfahren) | |
| Websiteinhaber/-benutzer
Wir synchronisieren Optionen, die angeben, ob das Feature aktiviert ist und wie seine verfügbaren Einstellungen konfiguriert sind. | Websitebesucher
Keine. |
