signal-desktop/ts/components/conversation/ImageGrid.md

One image

const attachments = [
  {
    url: util.gifObjectUrl,
    contentType: 'image/gif',
    width: 320,
    height: 240,
  },
];

<div>
  <div>
    <ImageGrid attachments={attachments} i18n={util.i18n} />
  </div>
  <hr />
  <div>
    <ImageGrid
      withContentAbove
      withContentBelow
      attachments={attachments}
      i18n={util.i18n}
    />
  </div>
</div>;

One image, various aspect ratios

<div>
  <ImageGrid
    attachments={[
      {
        url: util.pngObjectUrl,
        contentType: 'image/png',
        width: 800,
        height: 1200,
      },
    ]}
    i18n={util.i18n}
  />
  <hr />
  <ImageGrid
    attachments={[
      {
        url: util.gifObjectUrl,
        contentType: 'image/png',
        width: 320,
        height: 240,
      },
    ]}
    i18n={util.i18n}
  />
  <hr />
  <ImageGrid
    attachments={[
      {
        url: util.landscapeObjectUrl,
        contentType: 'image/png',
        width: 4496,
        height: 3000,
      },
    ]}
    i18n={util.i18n}
  />
  <hr />
  <ImageGrid
    attachments={[
      {
        url: util.landscapeGreenObjectUrl,
        contentType: 'image/png',
        width: 1000,
        height: 50,
      },
    ]}
    i18n={util.i18n}
  />
  <hr />
  <ImageGrid
    attachments={[
      {
        url: util.landscapePurpleObjectUrl,
        contentType: 'image/png',
        width: 200,
        height: 50,
      },
    ]}
    i18n={util.i18n}
  />
  <hr />
  <ImageGrid
    attachments={[
      {
        url: util.portraitYellowObjectUrl,
        contentType: 'image/png',
        width: 20,
        height: 200,
      },
    ]}
    i18n={util.i18n}
  />
  <hr />
  <ImageGrid
    attachments={[
      {
        url: util.landscapeRedObjectUrl,
        contentType: 'image/png',
        width: 300,
        height: 1,
      },
    ]}
    i18n={util.i18n}
  />
  <hr />
  <ImageGrid
    attachments={[
      {
        url: util.portraitTealObjectUrl,
        contentType: 'image/png',
        width: 50,
        height: 1000,
      },
    ]}
    i18n={util.i18n}
  />
</div>

Two images

const attachments = [
  {
    url: util.pngObjectUrl,
    contentType: 'image/png',
    width: 320,
    height: 240,
  },
  {
    url: util.pngObjectUrl,
    contentType: 'image/png',
    width: 320,
    height: 240,
  },
];

<div>
  <div>
    <ImageGrid attachments={attachments} i18n={util.i18n} />
  </div>
  <hr />
  <div>
    <ImageGrid
      withContentAbove
      withContentBelow
      attachments={attachments}
      i18n={util.i18n}
    />
  </div>
</div>;

Three images

const attachments = [
  {
    url: util.pngObjectUrl,
    contentType: 'image/png',
    width: 320,
    height: 240,
  },
  {
    url: util.pngObjectUrl,
    contentType: 'image/png',
    width: 320,
    height: 240,
  },
  {
    url: util.pngObjectUrl,
    contentType: 'image/png',
    width: 320,
    height: 240,
  },
];

<div>
  <div>
    <ImageGrid attachments={attachments} i18n={util.i18n} />
  </div>
  <hr />
  <div>
    <ImageGrid
      withContentAbove
      withContentBelow
      attachments={attachments}
      i18n={util.i18n}
    />
  </div>
</div>;

Four images

const attachments = [
  {
    url: util.pngObjectUrl,
    contentType: 'image/png',
    width: 320,
    height: 240,
  },
  {
    url: util.pngObjectUrl,
    contentType: 'image/png',
    width: 320,
    height: 240,
  },
  {
    url: util.pngObjectUrl,
    contentType: 'image/png',
    width: 320,
    height: 240,
  },
  {
    url: util.pngObjectUrl,
    contentType: 'image/png',
    width: 320,
    height: 240,
  },
];

<div>
  <div>
    <ImageGrid attachments={attachments} i18n={util.i18n} />
  </div>
  <hr />
  <div>
    <ImageGrid
      withContentAbove
      withContentBelow
      attachments={attachments}
      i18n={util.i18n}
    />
  </div>
</div>;

Five images

const attachments = [
  {
    url: util.pngObjectUrl,
    contentType: 'image/png',
    width: 320,
    height: 240,
  },
  {
    url: util.pngObjectUrl,
    contentType: 'image/png',
    width: 320,
    height: 240,
  },
  {
    url: util.pngObjectUrl,
    contentType: 'image/png',
    width: 320,
    height: 240,
  },
  {
    url: util.pngObjectUrl,
    contentType: 'image/png',
    width: 320,
    height: 240,
  },
  {
    url: util.pngObjectUrl,
    contentType: 'image/png',
    width: 320,
    height: 240,
  },
];

<div>
  <div>
    <ImageGrid attachments={attachments} i18n={util.i18n} />
  </div>
  <hr />
  <div>
    <ImageGrid
      withContentAbove
      withContentBelow
      attachments={attachments}
      i18n={util.i18n}
    />
  </div>
</div>;

Six images

const attachments = [
  {
    url: util.pngObjectUrl,
    contentType: 'image/png',
    width: 320,
    height: 240,
  },
  {
    url: util.pngObjectUrl,
    contentType: 'image/png',
    width: 320,
    height: 240,
  },
  {
    url: util.pngObjectUrl,
    contentType: 'image/png',
    width: 320,
    height: 240,
  },
  {
    url: util.pngObjectUrl,
    contentType: 'image/png',
    width: 320,
    height: 240,
  },
  {
    url: util.pngObjectUrl,
    contentType: 'image/png',
    width: 320,
    height: 240,
  },
  {
    url: util.pngObjectUrl,
    contentType: 'image/png',
    width: 320,
    height: 240,
  },
];

<div>
  <div>
    <ImageGrid attachments={attachments} i18n={util.i18n} />
  </div>
  <hr />
  <div>
    <ImageGrid withContentAbove withContentBelow attachments={attachments} i18n={util.i18n} />
  </div>
</div>;

Mixing attachment types

const attachments = [
  {
    url: util.pngObjectUrl,
    contentType: 'image/png',
    width: 320,
    height: 240,
  },
  {
    contentType: 'text/plain',
  },
  {
    url: util.pngObjectUrl,
    contentType: 'image/png',
    width: 320,
    height: 240,
  },
];

<div>
  <div>
    <ImageGrid attachments={attachments} i18n={util.i18n} />
  </div>
  <hr />
  <div>
    <ImageGrid withContentAbove withContentBelow attachments={attachments} i18n={util.i18n} />
  </div>
</div>;

Sticker

const attachments = [
  {
    url: util.squareStickerObjectUrl,
    contentType: 'image/webp',
    width: 512,
    height: 512,
  },
];

<div>
  <div>
    <ImageGrid isSticker={true} stickerSize={128} attachments={attachments} i18n={util.i18n} />
  </div>
  <hr />
  <div>
    <ImageGrid isSticker={true} stickerSize={128} withContentAbove withContentBelow attachments={attachments} i18n={util.i18n} />
  </div>
</div>;