If an image is wider than the main content column—as often occurs on smaller screens—DevSite automatically constrains it to the width of the column. However, if the image has both width and height attributes set, only the width is resized, causing the image to distort. Consequently, do not set the image's height. This means the page may redraw if the image is slow to load (causing a jump), but that's better than an image that doesn't fit on the screen.
You can apply class="screenshot" to an image to give it a border that offsets it from nearby text. This is typically used for screenshots that have white backgrounds and otherwise get lost on the page. Don't use it for images that don't need it.
Floating next to text
The image at right also has class="attempt-right", which floats the image right on larger screens, but forces the image into vertical layout on smaller screens, tablets and smaller, where floating right would cause problems. Also available is class="attempt-left". To use attempt-left and attempt-right together, make sure the attempt-left element comes first.
When the images are floating, they cannot exceed 50% of the column width. If they would, they are rescaled.
<img src="/path/to/image.png" alt="Alert dialog"
class="screenshot attempt-right">
You can use the same classes to float other elements, such as a <figure> containing both an image and caption:
<figure class="attempt-right">
<img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
<figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>
Clearing floated text
To prevent text from wrapping around a floated element and display at its native width, you can add a clear class to affected elements that follow the floated element.
<p class="clear">Hello world.</p>
Example with the clear class
In this example, the second paragraph includes a clear class.
This paragraph wraps around the floated image . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This paragraph has a clear class and does not wrap around the floated image. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Example without the clear class
In this example, both paragraphs wrap around the floated image.
This paragraph wraps around the floated image. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This paragraph wraps around the floated image. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Dark theme images
DevSite provides a small set of classnames that can be applied to images to modify their appearance when dark theme is enabled.
Image darkening
By default, all images except SVG files are slightly darkened in dark theme.
To remove the default darkening from an image when dark theme is enabled, add a no-filter class to the image:
<img src="/path/to/image.jpg" class="no-filter" alt="">
Inverting an image
For images with a black or dark monochrome color palette, add an invert class to the image to make it display white/light in dark theme:
<img src="/site-assets/logo-github.png" class="invert" alt="">
For an _index.yaml page, add invert to the classname field for a row item:
- items:
- classname: invert
icon:
path: /site-assets/logo-github.png
Separate dark theme variant image
If you would like to provide a separate image that only displays when dark theme is enabled, wrap the existing <img> element in a <picture> element and add a <source> element for the dark theme variant.
In the example below, there are two SVG files for the Google wordmark within a <picture> element. When dark theme is disabled, the image file within the <img> element is displayed, showing the wordmark with the four Google brand colors. When dark theme is enabled, the image file within the <source> element is displayed, where the wordmark is entirely white and has no brand colors.
Example
Code
<picture>
<source
srcset="/devsite/images/google-dark-theme.svg"
media="(prefers-color-scheme: dark)"
class="devsite-dark-theme"
alt="">
<img src="/devsite/images/google.svg" alt="">
</picture>
Notes
Because dark theme is enabled behind a feature flag, please note the following about the <source> element's attributes:
The <source> element must include a devsite-dark-theme class, which provides a hook for DevSite's frontend to update the media attribute and its value depending on the user-selected dark theme option: light, dark, or device.
The media attribute must include a (prefers-color-scheme: dark) media query in its value.
If you already have <source> elements with media queries in the media attribute, either append the existing media queries with and (prefers-color-scheme: dark) or add a new <source> element whose media attribute value is (prefers-color-scheme: dark). The media query and its value will be removed or replaced depending on the user-selected dark theme option.
While the file name of the dark theme variant image in the srcset attribute can technically be anything, appending -dark-theme to the existing image's file name is recommended.