JavaScript SDK
Content Publisher introduced specific CSS classes that allow website developers to implement specific styles based on the document style attributes.
Images are rendered as
<span></img></span>
The pantheon-img-container-* classes lets developer target specific img elements.
Content Publisher provides a default implementation of these classes in the JS starter kits. Drupal, WordPress or other consumers of Content Publisher content can utilize these classes in a similar way.
The pantheon-img-container class lets you target the span containing the img element.
Initial implementation in Content Publisher starter (subject to change):
.pantheon-img-container img {
margin: 0;
}
Applied to image containers where the image is positioned as “break left” (the image is on the left, and content on the right).
Initial implementation in Content Publisher starter (subject to change):
.pantheon-img-container-breakleft {
padding-right: 2em;
}
Applied to image containers where the image is positioned as “break right” (the image is on the right, and content on the left).
Initial implementation in Content Publisher starter (subject to change):
.pantheon-img-container-breakleft {
padding-right: 2em;
}
Applied to image containers where the image is positioned as “break both” (the image should be horizontally centered).
Applied to image containers where the image is using the default (inline) position.
Applied to image containers where the image has no image siblings.
This class can be used to, for example, horizontally center images if they have no image siblings.
Initial implementation in Content Publisher starter (subject to change):
.pantheon-img-container-inline {
max-width: 100% !important;
display: flex;
justify-content: center;
}