# Customer and partner logos

> A logo strip that updates when a brand changes its identity.

Source: https://new.wasmenia.com/en/developers/use-cases/partners

A «Trusted by» or «Our partners» strip built from brand slugs, not saved files. When a brand adopts a new identity and it is published in the archive, its logo changes on your site without you touching anything.

- `GET https://new.wasmenia.com/api/v1/brands`
- `GET https://new.wasmenia.com/api/v1/brands/{slug}`

- **Products**: Lists, logos
- **Pulls**: None with a public collection
- **Images**: Thumbnails, not counted

## The problem, and the fix

A strip of saved logo files goes stale: a brand changes its identity, and its old logo stays on your site for years.

Store each brand’s slug (`slug`), not its logo file, and read the logo when you build the page. If the brands are in a public collection in the archive, the list with `collection` gives you the whole strip in one request that isn’t counted as a pull, with `thumbnailUrl` for each.

## Who it’s for

### Company websites

«Our clients» and «Our partners» on the home page.

### Events

Sponsors and participating organisations on the event page.

### Agencies

The brands you have worked with in your portfolio.

## Build it

### Get a key

Open a developer account in the console and make a key. The free plan is enough to start, and the key stays on your server in an environment variable.

### Collect the slugs

Search for each brand and store its `slug`, or make a public collection in the archive with the brands in it.

### Read the logos

The list with `collection` gives `thumbnailUrl` for each brand. Or read each record if you need a file for dark.

### Cache the page

For a day, say. Logos don’t change by the hour.

### Show them as they are

With no change to shape or colours. Grey until hovered is a display choice, not a change.

## Picking the file for a background

`logo-for.js`

```javascript
/**
 * The file to show on a light or dark ground: one made for that ground if the
 * brand has it, else its primary logo, with whether that needs a tile behind it.
 */
export function logoFor(brand, ground /* 'light' | 'dark' */) {
  const version = brand.currentVersion;
  if (!version) return null;

  const files = version.variants.filter((v) => v.asset?.url);
  const forGround = files.find((v) => v.colorMode === ground);
  const primary = files.find((v) => v.role === 'primary');
  const asset = (forGround ?? primary)?.asset ?? version.logo;
  if (!asset) return null;

  return {
    src: asset.url,                 // the original, usually SVG
    small: asset.thumbnailUrl,      // WebP, 256 on its longer side
    width: asset.width,             // null for a vector without a size
    height: asset.height,
    // A primary drawn for dark grounds, shown on a light page, needs a dark tile.
    tile: !forGround && primary?.colorMode === 'dark' ? 'dark' : null,
  };
}
```

## When there is no logo

```javascript
function brandMark(brand, ground) {
  const logo = logoFor(brand, ground);
  if (logo) {
    const img = document.createElement('img');
    img.src = logo.small ?? logo.src;
    img.alt = brand.name.ar;
    img.loading = 'lazy';
    return img;
  }
  // No logo yet: the name, never a made-up mark.
  const name = document.createElement('span');
  name.textContent = brand.name.ar;
  return name;
}
```

## How many pulls it costs

With the list and a public collection: none. With each brand’s record: one pull per brand each time you build the page, so a 12-brand strip built once a day is 12 pulls a day, about 360 a month.

> **Before you publish**
>
> A brand’s logo on your page can read as a partnership. Show the logos of those you really work with, and read [Use and rights](https://new.wasmenia.com/developers/docs/concepts/usage.md) (Arabic).

**The right file for the background**

Picking the file by background, and the name instead of the logo when there is none.