Images & Icons

The apps/[app]/assets.js includes all images. Wingsuit will compile these files to [dist]/assets/images.

Embedding images in Drupal Twig

You can use the ws-assets stream wrapper to get a path to the asset folder. Ensure you have the wingsuit_companion module enabled.

<img src="{{ file_create_url('ws-assets://images/dummy.png') }}"/>

or use the image component

{% include "@atoms/image/image.wig" with {path: "images/dummy.png" }

Image in CSS

To use images inside your CSS file, use the relative path to the image. Webpack will replace it with the correct output path.

Placeholder images

Wingsuit supports image styles and responsive image styles for placeholder images in storybook.

You can configure your image styles in your placeholder.wingsuit.yml

Sample placeholder.wingsuit.yml

imageConfig:
  styles:
    1x1_xxs:
      label: Small 1x1
      width: 80
      height: 80
    ......
  stylesResponsive:
    card-hero:
      style: 16x9_xs_sc
      breakpoints:
        xxs: 8x7_xxs_sc
        xs: 8x7_xs_sc
    ......
  breakpoints:
   xxs:
     mediaQuery: '(min-width: 0px) and (max-width: 459px)'
   xs:
     mediaQuery: '(min-width: 460px) and (max-width: 639px)'

Basic image styles

Here you can define your basic image dimensions. If you define both width and height the image will be cropped. If you define only width the height will be resized to maintain the aspect ratio of the image, and vice versa.

Breakpoints

Under breakpoints you can define media queries which are used by responsive image styles.

Responsive image styles

If you use a responsive image the placeholder component will generate a picture tag with a source for each breakpoint. This is done by a twig macro. You can find everything inside the placeholder component.

Referencing a placeholder inside wingsuit.yml.

You can use your placeholder by referencing the placeholder image in your wingsuit.yml

image:
  label: Image
  type: pattern
  preview:
    id: placeholder
    variant: image
    settings:
      style: card

Example from @molecules/card.

Using inside a presenter template.

To render an image style in a presenter template. Image style works for simple image styles and responsive image styles.