Bildgrößenbestimmung

Für Vektorbilder wie SVG sollten Sie nur contentwidth und contentdepth verwenden. Diese können auch für bestimmte andere Anwendungsfälle verwendet werden, z. B. wenn Sie einen Abstand um ein Bild wünschen, siehe Beispiele für die Bildgrößenanpassung.

In den meisten Fällen ist es besser, die Attribute width und depth zu verwenden, da sie einfacher vorherzusagen sind. Die contentwidth und contentdepth können bei Bitmap-Bildern unerwartete (aber genaue) Ergebnisse liefern. Dies liegt daran, dass es nicht immer möglich ist, die intrinsische Bildgröße eines Bitmap-Bildes bei der Verarbeitung der Ausgabe zu bestimmen.

Definieren Sie die Bildgröße, indem Sie eines der folgenden Attribute für das Element imagedata verwenden:

Das Viewport ist die verfügbare Fläche für das imageobject auf der Seite. Je nachdem, welches Element auf dem imagedata verwendet wird, unterscheidet sich das Ergebnis. Wenn Sie das Bild einstellen:

To the left – Das Bild (2) verwendet 50 % des Viewport (1) To the right – Das Bild (2) wird auf 50 % seiner ursprünglichen Größe verkleinert (1)

Mit der Einstellung Bildgröße können Sie die Auflösung der Bilder in Ihrer veröffentlichten HTML5-Ausgabe steuern. Beispielsweise lässt sich die Auflösung verringern, damit die Bilddatei kompakter ist und die Seite schneller geladen wird. Beim Bearbeiten eines HTML5-Layouts ist die Einstellung Bildgröße verfügbar.

Es gibt mehrere Bildattribute, mit denen die Größe von Bildern gesteuert werden kann, siehe Bildgrößenbestimmung.

Wenn Sie Über das Veröffentlichen den Inhalt, werden die Bilder auf der Grundlage der hinzugefügten Attribute und Werte vergrößert. Sie können Vorschau eines Topics, um zu sehen, wie die Größe in den verschiedenen Ausgaben aussehen wird.

In der Regel sollten Sie nur die width oder die contentwidth eines Bildes einstellen. Die depth oder die contentdepth (Höhe) wird automatisch berechnet, um die Bildabmessungen als ursprüngliche Bilddatei beizubehalten. Wenn Sie sowohl width als auch depth einstellen, wird der kleinere Wert verwendet und das Bild entsprechend skaliert.

Es gibt mehrere weitere Attribute, um Breite und Höhe zu steuern. Weitere Informationen über die Möglichkeiten finden Sie unter DocBook Bildgrößenreferenz.

Für die HTML5-Ausgabe können Sie die Funktionen Miniaturansichten und Lightbox für Bilder kombinieren, um kleine Bildversionen zu erhalten, die bei Auswahl vergrößert werden.

Tipp

So erhalten Sie die SVG-Funktionalität in HTML und HTML5:

• Fügen Sie das Attribut format in Panel „Elementattribute“ hinzu und wählen Sie svg im Dropdown-Menü aus.

• Verwenden Sie contentwidth und contentdepth anstelle von width und depth.

So legen Sie die Attribute für die Bildgröße fest:

Standardmäßig verwendet Paligo eine Nennbreite und -höhe bei der Vorberechnung der prozentualen Skalierung von Bildern. Dadurch könnte es zu Layoutverschiebungen bei HTML5-Helpcenter-Ausgaben kommen und auch Probleme bei der Suchmaschinenoptimierung (SEO) verursachen.

Wenn Sie das Attribut Bildgröße für Ihre HTML5-Ausgabe aktivieren, wendet Paligo bei der Vorberechnung der prozentualen Skalierung von Bildern stattdessen die tatsächliche Breite und Höhe an. Dies beschleunigt das Laden der Webseite und erhöht die Benutzerfreundlichkeit, da der Browser den Seitenaufbau genauer vorausberechnen kann.

Um die Suchmaschinenoptimierung (SEO) und die Benutzererfahrung zu verbessern, kann diese Einstellung in Kombination mit der Einstellung Bildgröße verwendet werden, was die Sichtbarkeit der Website erhöht, siehe Bildauflösung einstellen.

In Ihrer HTML5-Ausgabe können Sie verkleinerte Bilder anzeigen, die bei Auswahl vergrößert werden. Die vergrößerte Version des Bildes wird in einer „Lightbox“ angezeigt, einer separaten Anzeige, die Ihre Inhalte überlagert.

Dies ist besonders nützlich, wenn Sie große Bilder haben, die den Benutzern ein besseres Erlebnis bieten würden, wenn sie kleiner wären. Dies wird erreicht, wenn Sie die Größe der Bilder ändern, indem Sie das Attribut width verwenden oder Miniaturansichten aktivieren und dann die Lightbox-Funktion aktivieren.

Verkleinerte Bilder werden auf der Seite angezeigt

Wenn die Lightbox-Funktion aktiviert ist, werden die Bilder vergrößert, wenn sie ausgewählt werden.

Lightbox aktivieren oder deaktivieren

Um Lightbox für Bilder verwenden zu können, müssen Sie die Funktion im Layout-Editor aktivieren. Lightbox kann auf Miniaturansichten als auch auf Bildern verwendet werden, deren Größe mit dem Attribut width geändert wurde. Klicken Sie auf das Bild unten, um diese Funktion zu testen.

Dieses Bild wird mit dem Attribut width vergrößert und der Wert wird auf 50 % gesetzt.

So aktivieren oder deaktivieren Sie die Lightbox-Funktion für alle Bilder in Ihrer HTML5-Ausgabe:

1. Wählen Sie im oberen Menü Layout aus.

   Paligo zeigt eine Liste von Layouts an. Die Liste ist leer, wenn keine benutzerdefinierten Layouts in Ihrer Paligo-Instanz vorhanden sind.

2. Wählen Sie das Layout, das Sie aktualisieren möchten, oder Ein Layout erstellen aus.

   Tipp

   Sie können die URL des Layout-Editors kopieren und in eine neue Registerkarte in Ihrem Browser einfügen. Dies kann nützlich sein, wenn Sie häufig zwischen Ihren Paligo-Inhalten und den Layout-Einstellungen wechseln.

3. Wählen Sie in der Seitenleiste Bilder aus.

4. Setzen Sie das Kontrollkästchen für Lightbox für Bilder auf:

   • Aktiviert wenn alle Blockbilder die Lightbox-Funktion verwenden sollen.

   • Deaktiviert, um die Lightbox-Funktion auszuschalten.

   Anmerkung

   Wenn Sie die Lightbox-Funktion aktivieren, können Sie entweder alle Blockbilder so einstellen, dass sie Miniaturansichten verwenden, oder Sie können Miniaturansichten einzeln einstellen. Weitere Informationen finden Sie unter Miniaturansichten.

5. Drücken Sie Speichern.

Tipp

Die Lightbox-Funktion ist auch für Zendesk-Ausgaben verfügbar, sie ist jedoch anders eingerichtet.

Für Zendesk verfügt Paligo über Asset-Dateien, die in der Zip-Datei enthalten sind, die beim Veröffentlichen in Ihrem Browser heruntergeladen wird. Sie können diese Asset-Dateien in den Abschnitt Assets im Zendesk-Leitfaden hochladen und dann den folgenden Code zum Abschnitt Dokumentenkopf hinzufügen:

<link href="{{asset 'lightbox.min.css'}}" rel="stylesheet" type="text/css" />
<script src="{{asset 'lightbox.min.js'}}"></script>
<script src="{{asset 'paligo-zd-lightbox.js'}}"></script>

Sie müssen dies nur einmal tun, wenn Sie zum ersten Mal in Zendesk veröffentlichen, siehe Anpassen von Zendesk-Artikeln mit Javascript.

Wenn Sie den Wert für ein Attribut width, depth, contentwidth oder contentdepth festlegen, können Sie eine dieser Einheiten verwenden:

Möglicherweise haben Sie Inhalte, die große Bilder benötigen, aber diese Bilder nehmen zu viel Platz auf der Seite ein und erschweren das Lesen des Textes. Eine Möglichkeit, dies bei HTML5-Ausgaben zu handhaben, ist die Verwendung von „Miniaturansichten“. Hier werden große Bilder in einer viel kleineren Größe auf der Seite angezeigt. Wenn Sie Lightbox für Bilder verwenden, können Leser auf die Miniaturansicht klicken, um eine größere Version anzuzeigen.

In Paligo können Sie Alle Bilder als Miniaturansichten festlegen aus dem HTML5-Layout oder Miniaturansichten für einzelne Bilder festlegen.

Miniaturansichten werden auf der Seite kleiner angezeigt

Wenn Lightbox aktiviert ist, kann ein Benutzer eine Miniaturansicht auswählen, um sie in größerer Größe anzuzeigen