Skip to content
Astro Image Processor

<GlobalStyles />

Places the common CSS used by the standard components of this integration with the <style> attribute specifying is:global.

Normally, it is placed in a common layout and applied to the whole site as follows.

src/layout/Layout.astro
---
import GlobalStyles from 'astro-image-processor/components/GlobalStyles.astro';
---


<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Astro Image Processor</title>
  </head>
  <body>
    <h1>Astro Image Processor</h1>
    <slot />
  </body>
</html>


<GlobalStyles />

Includes the following:

  • Placeholder animation for the <Picture> component
    • JavaScript for initialization
    • If JavaScript is disabled, the animation is skipped, and the placeholder falls back to the background-image or background-color of the <img> element
  • Common classes for elements generated by standard components
  • Classes corresponding to the layout property of standard components

The class names used can be changed in globalClassNames in the integration settings.

If you change them, you need to create and place your own global CSS that uses the changed class names, etc.