Collage Component

General Information

  • Collage figures are generated through a svelte CollageFigure component, which can be imported by including the following line in the file's script tag:
    import CollageFigure from '$lib/components/CollageFigure.svelte';
  • The collage figure is used on several pages, and as such, it is beneficial to create a component to ensure consistency and improve code quality. Internally, the configuration of the figure is defined through nested objects that specify every detail of the element.
  • Two presets have been made for the component, each of them named after the page they are used on, namely home and over-ons. Alternatively, a custom configuration can be passed on to the component. The meaning of each property contained in these objects will be dicussed in a separate section.
  • The CollageFigure component has a single parameter through which the figure can be configured.
    1. config: The configuration of the figure, which is either an object specifying the figure's specifics or a string containing the name of one of the presets listed above.
  • The CollageFigure component has a width of 8 full-width columns. However, the component itself doesn't use subgrid, and as such, no strict requirements are set on the number of columns provided to the figure. Furthermore, the figure has a default scale transform of 0.9.

Examples

The two presets for a collage figure are shown below.

Home Collage

<div class="figure-wrapper">
  <CollageFigure />
</div>

Over-ons Collage

<div class="figure-wrapper">
  <CollageFigure config={"over-ons"} />
</div>

Custom Configuration

The collage figure can be configured at a high level of detail. The default values within the configuration correspond to those used by the home preset. The options are as follows:

  • The overarching configuration of the figure can be specified using the following interface. As such, this should be the top-level object that is passed on to the component in the config parameter. interface CollageFigureConfiguration {
      image1?: ImageConfiguration;
      image2?: ImageConfiguration;
      image3?: ImageConfiguration;
      image4?: ImageConfiguration;
      decalColor?: DecalConfiguration;
      darkmodeDecalColor?: DecalConfiguration;
    }

    The options are defined as follows:

    1. image1: An optional configuration for the leftmost image.
    2. image2: An optional configuration for the bottom-left image.
    3. image3: An optional configuration for the top-right image.
    4. image4: An optional configuration for the rightmost image.
    5. decalColor: An optional configuration for the colors of the background decals.
    6. darkmodeDecalColor: An optional configuration for the colors of the background decals to be used when darkmode is active in the browser.

  • The figure's images can be configured through the following interface.

    interface ImageConfiguration {
      path?: string;
      size?: string;
      position?: string;
      background?: string;
      darkmodeBackground?: string;
    }

    The options are defined as follows:

    1. path: An optional path to the image to be used in the figure.
    2. size: An optional css-value defining the background-size of the image.
    3. position: An optional css-value defining the background-position of the image.
    4. background: An optional css-value defining the background-color of the image.
    5. darkmodeBackground: An optional css-value defining the background-color of the image to be used when darkmode is active in the browser.

  • The colors of the figure's decals can be configured through the following interface.

    interface DecalConfiguration {
      image3?: string;
      image4?: string;
      smallCircle?: string;
      mediumCircle?: string;
      largeCircle?: string;
      halfMoon?: string;
    }

    The options are defined as follows:

    1. image3: An optional css-value defining the color of the half circle below image 3.
    2. image4: An optional css-value defining the color of the half circle below image 4.
    3. smallCircle: An optional css-value defining the color of the small circle above image 1.
    4. mediumCircle: An optional css-value defining the color of the circle above image 4.
    5. largeCircle: An optional css-value defining the color of the circle above image 3.
    6. halfMoon: An optional css-value defining the color of the half moon decal.

Example

An example of a custom configuration displaying all of the available properties is given below.

<CollageFigure
  config={{
    image1: {
      path: 'url("/images/global/Dax.png"')',
      background: 'var(--lightblue)'
      size: '130%',
      position: '50% 5%',
    },
    image2: {
      path: 'url("/images/global/Peter.png"')',
      background: 'var(--pastelyellow)'
      position: '50% 0%',
      size: '100%'
    },
    image3: {
      path: 'url("/images/global/Nick.png"')',
      background: 'var(--lightblue)',
      position: '50% 100%',
      size: '130%'
    },
    image4: {
      path: 'url("/images/global/Andy.png"')',
      background: transparent,
      position: '50% 0%',
      size: '130%'
    },
    decalColor: {
      image3: 'transparent',
      image4: 'transparent',
      largeCircle: 'var(--pastelyellow)',
      smallCircle: 'var(--yellow)',
      mediumCircle: 'var(--yellow)',
      halfMoon: 'var(--darkblue)'
    }
  }}
/>