W3.CSS Images
The w3-round class adds rounded corners to an image:
Example
Circled Image
The w3-circle class shapes an image to a circle:
Example
Bordered Image
The w3-border class adds borders around the image:
Example
Image as a Card
Wrap any of the w3-card-* classes around the element to display it as a card (add shadows):
Simon
Example
Image Text
Position the text in an image with the w3-display-classes:
Example
Responsive Images
An image can be set to automatically resize itself to fit the size of its container.
If you want the image to scale down if it has to, but never scale up to be larger than its original size, use the w3-image class.
Example
If you want the image to scale both up and down on responsiveness, set the CSS width property to 100%:
Example
If you want to restrict a responsive image to a maximum size, use the max-width property:
Example
Opacity
The w3-opacity classes make images transparent:
Set Image Class Names for Styling in CSS
If you publish HTML outputs, you may want to style your images, for example, you could add a border around all of your images. To style images in HTML, use CSS to create the styling, upload the CSS file to your HTML layout, and then republish.
For the CSS, you will need the image class names. There are default class names, which you can use to style all images at once, or you can add your own custom class names. With your own custom class names, you can style an individual image or multiple images of your choice.
Note
It is beyond the scope of the Paligo documentation to cover all of the possibilities for styling images with CSS. There are many online resources for learning about styling images with CSS, including www.w3schools.com.
Tip
To find out how to upload a CSS file that you have created, see Branding your HTML Outputs with CSS .
Default Class Names for Images in HTML
All images in your published HTML content have a class name. You will need the class name to style the images with CSS.
By default, the class names are:
In the published HTML, the mediaobject is the class name for a container element, and the image is inside the .
Similarly, the inlinemediaobject class name is for a span element that contains the inline image.
You can use a CSS selector to style the image inside the mediaobject and inlinemediaobject «containers». For example, to put a border around all mediaobjects, you could create a CSS file containing the following styling:
You would then upload that CSS file to your CSS layout and publish using that layout. The block images in your published output would then have a blue dashed line as a border.
If you apply styling to mediaobject or inlinemediaobject , it will apply to all images that have that class name. So if the default settings are in place and none of your images have a custom class name, styling mediaobject will affect all of your block images and styling inlinemediaobject will affect all of your inline images.
If you only want to style specific images, you can give those images their own class names. There are two ways to do this: you can Custom Class Names for Images — Role Attribute or Custom Class Names for Images — Taxonomy Tag .
Custom Class Names for Images — Role Attribute
To style an individual image or perhaps a selection of images, you need to give the image(s) a class name. The class name has to be different to the general mediaobject or inlinemediaobject that is assigned to all images by default. When the class name is in place, that class can be styled separately in your CSS.
One way to give an image a class name is to use the role attribute. You can set it on the image’s mediaobject element, and then set its value as the class name you want to use.
- 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 .
Note
If you have an inline image and add a role with the value diagram-small, it will appear in the HTML like this:
To style the image rather than the container
.mediaobject.diagram-large img
.inlinemediaobject.diagram-small img
Paligo publishes the content and the output includes your CSS. The styles in your CSS take precendence over the other CSS provided by Paligo, and the styling is applied to your images.