Images

In Paligo, open the topic that contains the image you want to style once it is published.

Select the image and then, in the Element Structure Menu, select the mediaobject element. From the menu, select Go to element.

In the Element attributes section, use the Add attribute field to add a role attribute. For the role attribute's value, enter the name you want to use as the class name. Use lower case.

Select Save.

Use a code/text editor to create a custom CSS stylesheet file (or edit an existing CSS file that you use for Paligo).

When Paligo publishes your content, the role is added to the "container" mediaobject <div> or <span> inlinemediaobject for the image. For example, if you have a block image and add a role with the value diagram-large, this will appear like this in the HTML:

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

If you have an inline image and add a role with the value diagram-small, it will appear in the HTML like this:

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

To style the image rather than the container <div> or <span>, use a CSS selector to target the image inside the container, for example:

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

or for an inline image:

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

Save your CSS file and Upload Customized CSS.

Publish your content using the HTML layout that contains the CSS file with the image styling.

Select Layout and then edit the HTML5 layout you are going to use for publishing. Alternatively, you can create a new HTML5 layout and edit that.

In the Classes and Attributes settings, set Output taxonomies as class names to Enable.

Select Save.

Select the Taxonomy Manager in the Content Manager to open the structure.

Either:

Tip

It can be easier to use the floating content panel when dragging taxonomy tags on to images. To display the floating content panel, select the options menu ( ... ) for the taxonomies tag and then select Floating content panel.

Publish your content using the HTML layout you edited in step 2.

View the published output in a browser. Use the browser's inspection tool to find the image in the HTML. You should see that it has a class name that matches the taxonomy tag.

Use a code/text editor to create a custom CSS stylesheet file (or edit an existing CSS file that you use for Paligo).

In the CSS, style the class that has been added for the image. For example, if you added a taxonomy tag called "battery", the image in your HTML output would have these elements:

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

So you could style the image by using a CSS selector to select the image inside the class .taxonomy-product-battery. For example, to give the image a blue dashed border, you could use:

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

Save your CSS file and Upload Customized CSS.

Publish your content using the HTML layout that contains your custom CSS.

In the HTML output, the image should now be using the custom styling you defined in your CSS.