Skip to main content

Bilder

Mit Paligo können Sie alle Bilder hinzufügen und verwalten, die Sie für Ihre technische Redaktion benötigen. Dazu zählen Bilder in der Quellsprache oder Bilder für Ihre Übersetzungen.

Die Bildtypen

  • Ein Bild hinzufügen Verwenden Sie ein Bild, wenn Sie ein Bild ohne Titel und Bildunterschrift verwenden möchten.

  • Ein Bild hinzufügen - Verwenden Sie eine Abbildung, wenn Sie ein Bild mit einem Titel und einer Beschriftung wünschen.

  • Ein Inline-Bild hinzufügen - Verwenden Sie ein Inline-Bild, um ein kleines Bild hinzuzufügen, das im Textfluss erscheint, z. B. ein Symbol, das innerhalb eines Absatzes erscheint.

  • Nebeneinander liegende Bilder hinzufügen - Verwenden Sie Bilder nebeneinander, um zwei Bilder nebeneinander in derselben Zeile zu zeigen, anstatt sie übereinander zu stapeln.

Paligo verfügt über eine Medienbibliothek, die alle Bilder enthält, die Sie hochladen. Wenn Sie Bilder in die Medienbibliothek hochladen:

  • Paligo vergleicht den Bilddateinamen mit den bereits in der Medienbibliothek vorhandenen Bildern. Werden Bilder mit übereinstimmenden Dateinamen gefunden, können Sie diese aktualisieren oder die neuen und vorhandenen Bilder hinzufügen.

  • Paligo verwaltet die Bildformate und übersetzten Bilder automatisch. Wir nennen dies Intelligentes Bildmanagement.

Überlassen Sie Paligo die komplexe Verwaltung unterschiedlicher Versionen von Bildern:

  • Automatische Bildformate: Es werden Bilder in nur einem Format hochgeladen, wie z. B. die Version mit der höchsten Auflösung oder als Quelldatei in Photoshop (PSD) oder Illustrator (AI). Paligo übernimmt automatisch die Konvertierung in ein geeignetes Format für die Print- oder Webausgabe, sodass Sie die verschiedenen Formatversionen desselben Bildes nicht ständig im Auge behalten müssen.

  • Bilder in mehreren Sprachen: Sie können das gleiche Bild auch in mehreren Sprachversionen hochladen (z. B. Screenshots für lokalisierte Software). Paligo wählt automatisch die richtige Sprachversion aus, wenn Sie in verschiedenen Sprachen veröffentlichen. Weitere Informationen dazu finden Sie unter Bilder übersetzen.

Tipp

Wenn Sie viele Bildervarianten für Ausgaben in verschiedenen Sprachen hinzufügen müssen, siehe Batch-Import von Sprachvariantenbildern.

Sie können Bilder direkt aus dem Content Manager zur Bibliothek hinzufügen. Diese stehen dann zur Auswahl, wenn Sie eine Abbildung, ein Bild, ein Inline-Bild oder Side-By-Side-Bilder hinzufügen.

  1. Erweitern Sie den Bereich Medien im Content Manager.

  2. Wählen Sie das Drei-Punkte-Menü (...) für einen Ordner oder erstellen Sie einen neuen Ordner und wählen dessen Optionsmenü aus.

  3. Jetzt wählen Sie Bilder hochladen.

  4. Legen Sie fest, ob Paligo Ihre neuen Bilder nur mit Bildern im ausgewählten Ordner oder auch mit Bildern in untergeordneten Ordnern vergleichen soll.

    • Aktivieren Sie das Kästchen Vorhandene in allen Ordnern aktualisieren, damit Paligo sowohl den ausgewählten Ordner als auch dessen sämtliche Unterordnern berücksichtigt.

    • Deaktivieren Sie das Kästchen Vorhandene in allen Ordnern aktualisieren, um ausschließlich im Stamm des ausgewählten Ordners zu suchen.

    Upload images dialog. A callout box is positioned over the Update existing in any folder checkbox, which is at the bottom of the dialog.
  5. Ziehen Sie Ihre Bilddateien per Drag&Drop von Ihrem Computer in das Feld.

    Alternativ können Sie Dateien hinzufügen auswählen und zu den Dateien navigieren, die Sie hochladen möchten.

    Upload images dialog. It lists three new images that are going to be uploaded to Paligo.

    Wenn alle hinzugefügten Bilddateien neu sind, werden diese neuen Dateien mit einem grünen Symbol versehen, das anzeigt, dass das Bild als neue Datei in die Bibliothek aufgenommen wird.

    Anmerkung

    Wenn Sie Dateien mit Bindestrich und Sprachcode-Suffix hochladen, wie z. B. battery-fr.jpg, sucht Paligo nach Ausgangssprache-Versionen desselben Bildes. Bei Übereinstimmungen haben Sie die Möglichkeit, die Sprachvariante zu aktualisieren, z. B. Update (fr) für die französische Version. Weitere Informationen finden Sie unter Bilder übersetzen.

  6. Entscheiden Sie, ob schon vorhandene Dateien mit demselben Namen durch die neueren Dateien aktualisiert werden sollen.

    Upload images dialog. It lists two images that have filenames that match images already in the Paligo database. You can choose to update the existing images or add these new images in addition to the existing ones.

    Falls es in der Medienbibliothek Bilder mit gleichen Benennungen gibt, werden die neuen Bilder zusammen mit einem Kontrollkästchen Aktualisieren aufgelistet.

    • Aktivieren Sie jeweils das Kontrollkästchen Aktualisieren, um ein vorhandenes Bild durch das neuere Bild zu ersetzen.

    • Deaktivieren Sie das Kästchen Aktualisieren, um das neue Bild zusätzlich zum vorhandenen Bild hochzuladen.

      Also immer dann, wenn Sie mehrere Bilder mit demselben Namen haben. Sie können die Bilder im Content Manager umbenennen, um sie einfacher verwalten zu können.

    Tipp

    Möglicherweise können Sie Zeit sparen, indem Sie das Kästchen Alle vorhandenen aktualisieren auswählen, das automatisch alle Aktualisierungsfelder auf einmal auswählt.

  7. Aktivieren Sie das Kästchen Leerzeichen entfernen, wenn Sie möchten, dass Paligo automatisch unnötige Leerzeichen (leere Bereiche) an den Rändern Ihres Bildes entfernt. Dies gilt nur, wenn Ihr Bild KI ist. EPS oder PDF.

  8. Verwenden Sie das Feld Übergeordneten Ordner öffnen, um auszuwählen, ob der Ordner mit den Bildern nach dem Hochladen angezeigt werden soll.

  9. Wählen Sie Hochladen.

    Paligo lädt Ihre Bilddateien in die Medienbibliothek hoch. Sobald Sie eine der Bilddateien aktualisiert haben, werden die Topics, die diese Bilder verwenden, automatisch mit den neuen Bildern aktualisiert.

Bei der Bearbeitung eines Topics können Sie eine Abbildung, ein Bild, ein Inline-Bild oder Side-By-Side-Bilder hinzufügen. Dabei können Sie ein vorhandenes Bild aus der Bibliothek auswählen oder ein neues Bild hochladen und in die Bibliothek einfügen.

Anmerkung

Es ist auch möglich, ein Bild über den Dialog Bilddetails zu einem Topic hochzuladen. Bei diesem Ansatz erfolgt jedoch kein Abgleich der Dateinamen mit vorhandenen Bildern in der Bibliothek oder Sprachversionen.

So fügen Sie Bilder aus einem Topic zur Bibliothek hinzu:

  1. Wählen Sie ein Bild in einem Topic aus, um einen Durchsuchen-Dialog anzuzeigen.

    Media browser dialog. A callout arrow is pointing to the upload icon in the top-right.
  2. Wählen Sie Bilder hochladen. UploadIcon.png

    Upload images dialog. It has a box for dragging and dropping images files and an options section. The options section has a checkbox for opening the parent folder and another checkbox for removing whitespace on vector images. There are All files, Clear List, and Upload buttons at the bottom.
  3. Wählen Sie das blaue Menü oben im Dialogfeld aus, um auszuwählen, wo die Bilder hochgeladen werden sollen.

    Upload images dialog. The In Folder button is selected, revealing a popup that contains the media folder structure.

    Das blaue Menü zeigt eine hierarchische Ansicht der Ordner in Ihrer Medienbibliothek.

  4. Legen Sie fest, ob Paligo Ihre neuen Bilder nur mit Bildern im ausgewählten Ordner oder auch mit Bildern in untergeordneten Ordnern vergleichen soll.

    • Aktivieren Sie das Kästchen Vorhandene in allen Ordnern aktualisieren, damit Paligo sowohl den ausgewählten Ordner als auch dessen sämtliche Unterordner durchsucht.

    • Deaktivieren Sie das Kästchen Vorhandene in allen Ordnern aktualisieren, um ausschließlich im Stamm des ausgewählten Ordners zu suchen.

    Upload images dialog. A callout box is positioned over the Update existing in any folder checkbox, which is at the bottom of the dialog.
  5. Ziehen Sie Ihre Bilddateien per Drag&Drop von Ihrem Computer in das Feld.

    Alternativ können Sie Dateien hinzufügen auswählen.

    Upload images dialog. It lists three new images that are going to be uploaded to Paligo.

    Wenn alle hinzugefügten Bilddateien neu sind, werden diese neuen Dateien mit einem grünen Symbol versehen, das anzeigt, dass das Bild als neue Datei in die Bibliothek aufgenommen wird.

    Anmerkung

    Wenn Sie Dateien mit Bindestrich und Sprachcode-Suffix hochladen, wie z. B. battery-fr.jpg, sucht Paligo nach Quellsprachen-Versionen desselben Bildes. Findet es eine Übereinstimmung, können Sie die Sprachvariante jetzt anpassen, z. B. Aktualisieren (fr) für Französisch. Weitere Informationen finden Sie unter Bilder übersetzen.

  6. Entscheiden Sie, ob schon vorhandene Dateien mit demselben Namen durch die neueren Dateien aktualisiert werden sollen.

    Upload images dialog. It lists two images that have filenames that match images already in the Paligo database. You can choose to update the existing images or add these new images in addition to the existing ones.

    Falls es in der Medienbibliothek Bilder mit gleichen Benennungen gibt, werden die neuen Bilder zusammen mit einem Kontrollkästchen Aktualisieren aufgelistet.

    • Aktivieren Sie jeweils das Kontrollkästchen Aktualisieren, um ein vorhandenes Bild durch das neuere Bild zu ersetzen.

    • Deaktivieren Sie das Kästchen Aktualisieren, um das neue Bild zusätzlich zum vorhandenen Bild hochzuladen.

      Also immer dann, wenn Sie mehrere Bilder mit demselben Namen haben. Sie können die Bilder im Content Manager umbenennen, um sie einfacher verwalten zu können.

    Tipp

    Möglicherweise können Sie Zeit sparen, indem Sie das Kästchen Alle vorhandenen aktualisieren auswählen, das automatisch alle Aktualisierungsfelder auf einmal auswählt.

  7. Aktivieren Sie das Kästchen Leerzeichen entfernen, wenn Sie möchten, dass Paligo automatisch unnötige Leerzeichen (leere Bereiche) an den Rändern Ihres Bildes entfernt. Dies gilt nur, wenn Ihr Bild KI ist. EPS oder PDF.

  8. Verwenden Sie das Feld Übergeordneten Ordner öffnen, um auszuwählen, ob der Ordner mit den Bildern nach dem Hochladen angezeigt werden soll.

  9. Wählen Sie Hochladen.

    Paligo lädt Ihre Bilddateien in die Medienbibliothek hoch. Sobald Sie eine der Bilddateien aktualisiert haben, werden die Topics, die diese Bilder verwenden, automatisch mit den neuen Bildern aktualisiert.

Sie können Bilder von Paligo zur Verwendung an anderen Stellen herunterladen. Diese Funktion ist besonders nützlich, wenn die ursprüngliche Bilddatei, die Sie in Paligo hochgeladen haben, nicht mehr zugänglich ist. Nehmen wir zum Beispiel an, Sie laden einen Screenshot in Paligo hoch. Später stellen Sie fest, dass er sensible Informationen enthält, doch Sie haben die Originaldatei verloren. Anstatt einen komplett neuen Screenshot zu machen, können Sie das Bild aus Paligo herunterladen, die sensiblen Informationen verdecken und es dann erneut hochladen.

So laden Sie ein Bild von Paligo herunter:

  1. Bilddetails anzeigen

    Image file selected in the Media library. Its options menu is shown and the Edit image option is being selected.
  2. Wählen Sie im Dialogfeld Bilddetails den Link im Eintrag Dateiname.

    Image details dialog. There is a callout arrow pointing to the filename entry and a callout box around the hyperlink text in that entry.

    Der Browser zeigt das Bild in einer neuen Registerkarte in maximaler Größe an.

  3. Klicken Sie mit der rechten Maustaste auf das Bild und speichern Sie es mithilfe der Browserfunktionen auf Ihrem Computer. Die Speichermöglichkeiten für das Bild können je nach verwendetem Browser variieren. Hier zeigen wir die Optionen in Google Chrome.

    A close-up view of the Chrome browser options when you right-click on an image. The Save Image As option is selected.

Wenn Sie HTML-Inhalte in Paligo veröffentlichen, erhalten alle Bilder in der Ausgabe einen Dateinamen. Der Dateiname kann wie folgt aussehen:

  • Eine eindeutige ID, die auf der UUID des Bildes basiert. Dieser Dateiname bleibt bei jeder Veröffentlichung gleich und wird als „ständiger“ Dateiname bezeichnet.

  • Eine eindeutige ID, die von Paligo bei jeder Veröffentlichung automatisch generiert wird. Dieser Name ändert sich bei jeder Veröffentlichung.

In den meisten Fällen ist der „ständige“ Dateiname vorzuziehen, insbesondere wenn Sie GitHub oder Ähnliches zur Versionsverwaltung verwenden. Nehmen wir zum Beispiel an, Ihre Publikation umfasst 200 Topics, und jedes davon enthält Bilder. Sie veröffentlichen die Publikation mehrmals, ohne dabei den Inhalt zu ändern. Bei jeder neuen Veröffentlichung werden sich scheinbar alle 200 Topics samt Bildern geändert haben, da alle Bilder neue Dateinamen besitzen. Solche Aktualisierungen würden nicht passieren, wenn Sie „ständige“ Dateinamen verwendet hätten, was der richtige Weg ist.

Wenn Sie jedoch bewusst erreichen wollen, dass die Bilddateinamen bei jeder Veröffentlichung geändert werden, können Sie die „ständigen“ Dateinamen deaktivieren.

Zum Aktivieren oder Deaktivieren „ständiger“ Dateinamen verwenden Sie die Systemeinstellungen anzeigen.

Anmerkung

Der Grund, warum wir für Dateinamen IDs verwenden, liegt darin, dass die IDs eindeutig sind und für Übersetzungen, Importe, Exporte usw. unterstützt werden. Würden wir nur reguläre Textdateinamen verwenden, könnte es zu Problemen kommen, wenn z. B. Sonderzeichen von anderen Systemen nicht erkannt werden oder mehrere Dateien denselben Dateinamen tragen.

Wenn Sie HTML-Ausgaben veröffentlichen, können Sie Ihre Bilder gestalten, indem Sie z. B. einen Rahmen um alle Ihre Bilder legen.

Um Bilder in HTML zu gestalten, verwenden Sie CSS, um das Styling zu erstellen, laden Sie die CSS-Datei in Ihr HTML-Layout hoch und veröffentlichen Sie sie dann erneut.

Für das CSS benötigen Sie die Namen der Bildklassen. Es gibt Standard-Klassennamen, mit denen Sie alle Bilder auf einmal gestalten können, oder Sie können eigene benutzerdefinierte Klassennamen hinzufügen. Mit Ihren eigenen individuellen Klassennamen können Sie ein einzelnes Bild oder mehrere Bilder Ihrer Wahl gestalten.

Anmerkung

Es liegt außerhalb des Umfangs der Paligo-Dokumentation, alle Möglichkeiten für das Styling von Bildern mit CSS abzudecken. Es gibt viele Online-Ressourcen, um sich über die Gestaltung von Bildern mit CSS zu informieren, darunter w3schools.com.

Tipp

Informationen zum Hochladen einer erstellten CSS-Datei finden Sie unter Formatieren mit CSS.

Alle Bilder in Ihrem veröffentlichten HTML-Inhalt haben einen Klassennamen. Sie benötigen den Klassennamen, um die Bilder mit CSS zu gestalten.

Standardmäßig lauten die Klassennamen:

  • mediaobject für Blockbilder

  • inlinemediaobject für Inlinebilder.

Im veröffentlichten HTML ist das mediaobject der Klassenname für ein Container-<div>-Element, und das Bild befindet sich innerhalb des <div>.

HTML code showing <div class="mediaobject"> on the top line, <div class="material-placeholder"> on the middle line, and <img class="materialboxed" with some other image metadata on the third line. A callout arrow points to the first line and a blue highlight box is around the third line.

In ähnlicher Weise ist der Klassenname inlinemediaobject für ein span-Element, das das Inline-Bild enthält.

HTML code showing <span class="inlinemediaobject"> on the top line, and image metadata on the second line. A callout arrow points to the first line and a blue highlight box is around the second line.

Sie können einen CSS-Selektor verwenden, um das Bild innerhalb des mediaobject- und inlinemediaobject-„Containers“ zu gestalten. Um beispielsweise alle mediaobjects zu umranden, können Sie eine CSS-Datei mit folgendem Stil erstellen:

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

Sie würden dann diese CSS-Datei in Ihr CSS-Layout hochladen und mit diesem Layout veröffentlichen. Die Blockbilder in Ihrer veröffentlichten Ausgabe hätten dann eine blaue gestrichelte Linie als Rahmen.

An image with blue dashed border.

Wenn Sie die Gestaltung auf mediaobject oder inlinemediaobject anwenden, wird es auf alle Bilder angewendet, die diesen Klassennamen haben. Wenn also die Standardeinstellungen vorhanden sind und keines Ihrer Bilder einen benutzerdefinierten Klassennamen hat, wirkt sich die Gestaltung mediaobject auf alle Ihre Blockbilder und die Gestaltung inlinemediaobject auf alle Ihre Inline-Bilder aus.

Wenn Sie nur bestimmte Bilder gestalten möchten, können Sie diesen Bildern eigene Klassennamen geben. Dazu gibt es zwei Möglichkeiten: Sie können Benutzerdefinierte Klassennamen für Bilder – Rollenattribut oder 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, einem Bild einen Klassennamen zu geben, ist die Verwendung des Attributs role. Sie können es auf das mediaobject des Bildes setzen und dann seinen Wert als Klassennamen festlegen, den Sie verwenden möchten.

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

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

    Paligo editor. The mediaobject element is selected in the element structure menu. A drop down menu has many options, but a highlight box is around the go to element option.

    Anmerkung

    Verwenden Sie für Inline-Bilder stattdessen das Element inlinemediaobject.

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

    Element attributes section. There is a role attribute with the value diagram-large.
  4. Drücken Sie Speichern. Save icon.

  5. 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;
    }
  6. Speichern Sie Ihre CSS-Datei und laden Sie das benutzerdefinierte CSS hoch, siehe Hochladen benutzerdefinierter CSS.

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

Paligo veröffentlicht den Inhalt und die Ausgabe enthält Ihr CSS. Die Stile in Ihrem CSS haben Vorrang vor den anderen von Paligo bereitgestellten CSS, und der Stil wird auf Ihre Bilder angewendet.

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.