Skip to main content

Benutzerdefinierte Klassennamen für Bilder – Taxonomie-Tag

Um ein einzelnes Bild oder vielleicht eine Auswahl von Bildern zu gestalten, müssen Sie dem/den Bild(ern) einen Klassennamen geben. Der Klassenname muss sich vom allgemeinen mediaobject oder inlinemediaobject unterscheiden, das standardmäßig allen Bildern zugewiesen ist. Wenn der Klassenname vorhanden ist, kann diese Klasse separat in Ihrem CSS gestaltet werden.

Eine Möglichkeit, einen Klassennamen für ein Bild hinzuzufügen, ist die Verwendung von Taxonomie-Tags:

  1. 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.

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

    HTML help center layout. The Classes and Attributes section is selected. The Output Taxonomies option is set to Enable.

  3. Drücken Sie Speichern.

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

    Taxonomy_Manager_Expanded.jpg

  5. 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.

    Paligo editor showing the media section of the content manager on the left. On the right, a floating content panel contains taxonomy tags. There is a callout arrow to show you that you can drag taxonomy tags from the floating content panel on to the image files.

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

  7. 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.

  8. 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;
}

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

  10. 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.