Bilder

Öffnen Sie in Paligo das Topic, das das zu gestaltende Bild enthält, sobald es veröffentlicht wurde.

Wählen Sie das Bild aus und wählen Sie dann im Menü „Elementstruktur“ das Element mediaobject aus. Wählen Sie aus dem Menü Zum Element gehen.

Fügen Sie im Bereich Elementattribute über das Feld Attribut hinzufügen ein Attribut role hinzu. Geben Sie für den Wert des Attributs role den Namen ein, den Sie als Klassennamen verwenden möchten. Verwenden Sie Kleinbuchstaben.

Drücken Sie Speichern.

Verwenden Sie einen Code-/Texteditor, um eine benutzerdefinierte CSS-Stylesheet-Datei zu erstellen (oder bearbeiten Sie eine vorhandene CSS-Datei, die Sie für Paligo verwenden).

Wenn Paligo Ihre Inhalte veröffentlicht, wird die Rolle dem „Container“ mediaobject <div> oder <span> inlinemediaobject für das Bild hinzugefügt. Wenn Sie zum Beispiel ein Blockbild haben und eine Rolle mit dem Wert diagram-large hinzufügen, wird dies in der HTML-Datei wie folgt aussehen:

<div class="mediaobject diagram-large">
    <div class="material-placeholder">
        <img src="image/1602519409130b.png" style="" alt="image2-transparent.png" class="materialboxed">
    </div>
</div>

Wenn Sie ein Inline-Bild haben und eine Rolle mit dem Wert diagram-small hinzufügen, wird es in der HTML-Datei wie folgt angezeigt:

<span class="inlinemediaobject diagram-small">
    <img src="image/16025194086577.jpg" alt="large-version-screenshot2.jpg">
</span>

Um das Bild anstelle des Containers <div> oder <span> zu gestalten, verwenden Sie einen CSS-Selektor, der auf das Bild innerhalb des Containers ausgerichtet ist, zum Beispiel:

.mediaobject.diagram-large img {
    border: blue;    
    border-style: dashed;
}

oder für ein Inline-Bild:

.inlinemediaobject.diagram-small img {
    border: blue;    
    border-style: dashed;
}

Speichern Sie Ihre CSS-Datei und laden Sie das benutzerdefinierte CSS hoch, siehe Hochladen benutzerdefinierter CSS.

Veröffentlichen Sie Ihren Inhalt mithilfe des HTML-Layouts, das die CSS-Datei mit der Bild-Gestaltung enthält.

Wählen Sie Layout aus und bearbeiten Sie dann das HTML5-Layout für die Veröffentlichung. Alternativ können Sie ein neues HTML5-Layout erstellen und bearbeiten.

Stellen Sie in den Einstellungen Klassen und Attribute Ausgabetaxonomien als Klassennamen auf Aktivieren ein.

Drücken Sie Speichern.

Wählen Sie den Taxonomie-Manager im Content Manager aus, um die Struktur zu öffnen.

zwei Möglichkeiten angezeigt werden:

Tipp

Es kann einfacher sein, das Floating Panel zu verwenden, wenn Sie Taxonomie-Tags auf Bilder ziehen. Um das Floating Panel anzuzeigen, wählen Sie das Optionsmenü (... ) für das Taxonomie-Tag und wählen Sie dann Floating Panel.

Veröffentlichen Sie Ihren Inhalt unter Verwendung des HTML-Layouts, das Sie in Schritt 2 bearbeitet haben.

Sehen Sie sich die veröffentlichte Ausgabe in einem Browser an. Verwenden Sie das Inspektionstool des Browsers, um das Bild in der HTML-Datei zu finden. Sie sollten sehen, dass es einen Klassennamen hat, der mit dem Taxonomie-Tag übereinstimmt.

Verwenden Sie einen Code-/Texteditor, um eine benutzerdefinierte CSS-Stylesheet-Datei zu erstellen (oder bearbeiten Sie eine vorhandene CSS-Datei, die Sie für Paligo verwenden).

Gestalten Sie im CSS die Klasse, die für das Bild hinzugefügt wurde. Wenn Sie beispielsweise ein Taxonomie-Tag namens „Battery“ hinzugefügt hätten, hätte das Bild in Ihrer HTML-Ausgabe folgende Elemente:

<div class="mediaobject taxonomy-product-battery">
    <div class="material-placeholder">
        <img src="image/1602a53b445615.jpg" style="" alt="battery.jpg" class="materialboxed">
    </div>
</div>

Sie könnten also das Bild mit einem CSS-Selektor gestalten, um das Bild innerhalb der Klasse .taxonomy-product-battery auszuwählen. Um dem Bild beispielsweise einen blau gestrichelten Rahmen zu geben, können Sie Folgendes verwenden:

.mediaobject.taxonomy-product-battery img {
    border: blue;    
    border-style: dashed;
}

Speichern Sie Ihre CSS-Datei und laden Sie das benutzerdefinierte CSS hoch, siehe Hochladen benutzerdefinierter CSS.

Veröffentlichen Sie Ihre Inhalte mithilfe des HTML-Layouts, das Ihr benutzerdefiniertes CSS enthält.

In der HTML-Ausgabe sollte das Bild nun das benutzerdefinierte Styling verwenden, das Sie in Ihrem CSS definiert haben.