Sie können einen Blickpunkt festlegen, um zu verhindern, dass ein wichtiger Teil eines Bildes abgeschnitten wird. Blickpunkte sind besonders nützlich für responsive Layouts, bei denen dasselbe Bild in verschiedenen Größen angezeigt werden kann.
Blickpunkte für Hintergrundbilder
Einschränkungen bei der Verfügbarkeit von Blickpunkten:
- Bildskalierungstyp: Die Eigenschaft "Skalierung" muss auf Auf Frame zuschneiden oder Ohne eingestellt sein.
- Bildquellentyp: Die Quelle darf keine externe URL sein, sondern muss lokal sein.
- Dynamische Anzeigen: In dynamischen Anzeigen werden keine Blickpunkte unterstützt.
- Animation: Blickpunkte können nicht animiert werden. Wenn Sie die Abmessungen eines Bildes animieren, gilt der festgelegte Blickpunkt für die ursprüngliche Bildgröße.
Wenn Sie einen Blickpunkt aktivieren, werden die Ausrichtungsoptionen überschrieben.
Blickpunkt festlegen
- Öffnen Sie das Dialogfeld Blickpunkt des Bildes bearbeiten auf eine der folgenden Arten:
- Wählen Sie das Bild im Anzeigebereich aus und klicken Sie dann im Bereich Eigenschaften auf das Kästchen Blickpunkt aktivieren.
- Klicken Sie mit der rechten Maustaste auf das Bild und wählen Sie im Pop-up-Menü die Option Blickpunkt festlegen… aus.
- Ziehen Sie den Blickpunkt an die gewünschte Stelle.
- Standardmäßig liegt der Blickpunkt in der Mitte des Bildes.
- Das Steuerelement für den Blickpunkt wird als weißer Kreis dargestellt, der gut sichtbar und anklickbar ist. Der eigentliche Blickpunkt wird jedoch durch das Fadenkreuz in der Mitte angegeben.
- Über die Pfeiltasten auf der Tastatur können Sie den Blickpunkt um jeweils ein Pixel verschieben.
- Wenn Sie den Blickpunkt auf die Mitte zurücksetzen möchten, klicken Sie mit der rechten Maustaste auf das Bild und wählen Sie im Pop-up-Menü die Option Zurücksetzen aus oder drücken Sie Strg + R (Windows) oder ⌘ + R (Mac).
- Wechseln Sie zum Tab Vorschau, um festzustellen, wie sich der Blickpunkt bei unterschiedlichen Seitenverhältnissen auf das Zuschneiden des Bildes auswirkt.
- Klicken Sie auf OK.
Wenn Sie die Bildquelle ändern, werden Sie von Google Web Designer gefragt, ob Sie den Blickpunkt beibehalten, bearbeiten oder verwerfen möchten.
Blickpunkt bearbeiten
Sie können die Position eines vorhandenen Blickpunktes ändern:
- Öffnen Sie das Dialogfeld Blickpunkt des Bildes bearbeiten auf eine der folgenden Arten:
- Klicken Sie mit der rechten Maustaste auf das Bild und wählen Sie im Pop-up-Menü die Option Blickpunkt bearbeiten… aus.
- Wählen Sie das Bild aus und klicken Sie im Steuerfeld "Eigenschaften" neben dem Kästchen Blickpunkt aktivieren auf Position des Blickpunktes festlegen
.
- Ziehen Sie den Blickpunkt an die neue Position.
- Klicken Sie auf OK.
Blickpunkt wechseln
Sie können einen Blickpunkt deaktivieren, um festzustellen, wie Ihr Bild stattdessen mit den Ausrichtungsoptionen erscheint. Die zuvor festgelegte Position des Blickpunktes wird in Web Designer gespeichert. Wenn Sie den Blickpunkt wieder aktivieren, befindet er sich an derselben Position.
Sie können den Blickpunkt für das ausgewählte Bild auf eine der folgenden Arten wechseln:
- Klicken Sie im Bereich "Eigenschaften" auf das Kästchen Blickpunkt aktivieren.
- Klicken Sie mit der rechten Maustaste auf das Bild und wählen Sie im Pop-up-Menü entweder Blickpunkt aktivieren oder Blickpunkt deaktivieren aus.
Blickpunkt entfernen
- Klicken Sie mit der rechten Maustaste auf das Bild.
- Wählen Sie im Pop-up-Menü die Option Blickpunkt entfernen aus.
Bild mit Blickpunkt tauschen
Wenn Sie die Funktion Bild tauschen… verwenden oder die Quelle eines Bildes mit aktiviertem Blickpunkt ändern, können Sie entscheiden, ob Sie den Blickpunkt für das neue Bild beibehalten, bearbeiten oder verwerfen möchten.
Blickpunkte und Medienregeln
Sie können die Position eines Blickpunktes nicht mithilfe von Medienregeln ändern. Gehen Sie so vor, wenn Sie abhängig von der Größe des Darstellungsbereichs unterschiedliche Bilder einblenden möchten, aber die Bilder nicht denselben Blickpunkt haben können: Fügen Sie alle Bilder in Ihr Dokument ein und verwenden Sie Medienregeln, um die Deckung der Bilder für die Größen des Darstellungsbereichs auf 0 zu setzen, für die sie nicht sichtbar sein sollen.
Blickpunkte in der Codeansicht
In der Codeansicht werden die Blickpunktkoordinaten im Attribut focalpoint für das Element gwd-image festgelegt. Beispiel:
<gwd-image class="gwd-image-1t0s" id="gwd-image_1" scaling="none" source="assets/moon_landscape.jpg" focalpoint="540 295"></gwd-image>