Development
Github Examplescolormass.com

Integration

The colormass Exports feature can be used through a web component called cm-material-download. This enables you to directly use the download functionality without having to download or upload these assets that are defined in the previous page (Generating Exports ).

Steps

1. Add an Import in the site's header

In order to be able to use the exports component you need to add an import into the <header> HTML element, like so:

<head>
    ...
    <script type="module" src="https://material-download.colormass.com"></script>
    ...
</head>

This only needs to be done once.

2. Add a button

Now add a download button to your page. This must be an a tag. You can add arbitrary content, CSS classes and attributes to make this appear like any other button on your page. Your existing CSS rules will continue to apply. The href attribute can be either omitted or set to an arbitrary value.

<a class="you-can-add-your-own-classes-here">Download</a>

3. Wrap the link

Now wrap the a tag in a cm-material-download tag, providing the attributes described below. The link's href tag will be set automatically. If the required export cannot be found, the CSS class disabled will be set on the link.

<cm-material-download organization-id="1f6d7f93-4e0k-4400-b937-1ce73576f570" article-id="9999" type="pbr">
  <a class="you-can-add-your-own-classes-here">Download</a>
</cm-material-download>

You need to define the following attributes:

  • organization-id: This is a fixed UUID for your account (please ask your contact person if you are not sure).

  • article-id: This is the article ID string of the material. Since these are added on the platform manually, please ask the colormass staff if the corresponding range has the correct article IDs added before integrating them.

  • type: This is the type of the download. It has the following options: pbr, tile, thumbnail.

  • file-type: The desired file extension: jpg or tiff.

  • resolution (PBR) : low (72 DPI) or high (Original DPI)

  • resolution: The desired resolution, one of low (1000x1000px), medium (2000x2000px) or high (original size). Must be high unless the file type is jpg. Defaults to high.

  • dimensions: One of 7x7in, 9x9in, 16x16in, 10x10cm, 20x20cm, 30x30cm. Only provide if type is thumbnail. Defaults to 7x7in.

If you are not sure what these types above mean, please check the previous Generating Exports page.

Styling

This component doesn't add any styling rules. The wrapped a tag can be styled freely. In most cases, it should automatically pick up any existing styling rules on the page, so that no extra steps are necessary. If you do want to customize the appearance of the link, you can simply add CSS classes or inline styles. See the following example:

<cm-material-download organization-id="9999" article-id="9999" type="pbr">
    <a style="text-decoration: none; color: white; background: black; padding: 4px; cursor: pointer;">
        <i class="fancy-icon" />Styled Download Button
    </a>
</cm-material-download>

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="module" src="https://material-download.colormass.com"></script>
    <meta charset="UTF-8">
    <title>Material Download Example</title>
</head>
<body>
<ul>
  <li>
    <cm-material-download organization-id="1f0d7f93-4e0d-4400-b937-1ce75576f570" article-id="3106702" type="pbr" file-type="tiff" resolution="high">
      <a>Download PBR (TIFF)</a>
    </cm-material-download>
  </li>
  <li>
    <cm-material-download organization-id="1f0d7f93-4e0d-4400-b937-1ce75576f570" article-id="3106702" type="pbr" file-type="tiff" resolution="low">
      <a>Download PBR (JPG)</a>
    </cm-material-download>
  </li>
  <li>
    <cm-material-download organization-id="1f0d7f93-4e0d-4400-b937-1ce75576f570" article-id="3106702" type="tile" file-type="jpg" resolution="low">
      <a>Download Tile (JPG, low res)</a>
    </cm-material-download>
  </li>
  <li>
    <cm-material-download organization-id="1f0d7f93-4e0d-4400-b937-1ce75576f570" article-id="3106702" type="thumbnail" file-type="jpg" dimensions="7x7in">
      <a>Download Thumbnail (7 in x 7 in, JPG, high-res)</a>
    </cm-material-download>
  </li>
  <li>
    <cm-material-download organization-id="1f0d7f93-4e0d-4400-b937-1ce75576f570" article-id="3106702" type="thumbnail" file-type="jpg" dimensions="7x7in">
      <a>Download Thumbnail (7 in x 7 in, JPG, medium-res)</a>
    </cm-material-download>
  </li>
  <li>
    <cm-material-download organization-id="1f0d7f93-4e0d-4400-b937-1ce75576f570" article-id="3106702" type="thumbnail" file-type="jpg" dimensions="30x30cm">
      <a>Download Thumbnail (30 cm x 30 cm, JPG, low-res) - not available</a>
    </cm-material-download>
  </li>
</ul>
</body>
</html>

If it's needed you can also set the attributes programmatically like you would with any HTML attribute. Just as an example using in pure Javascript:

var exampleElements = document.querySelectorAll('cm-material-download');
exampleElements.forEach(function(item, i){
  item.setAttribute('article-id', '9999999');
});

The above example is just an example if you use frameworks or libraries this example would probably look different.

The HTML component lets you define any values, so you have to make sure that:

  • The output you are requesting is available on the colormass platform

  • The article ID is added to the material on the platform and uniquely identifies a material

For example, if you request the download of Article ID 9999 with the following attributes:

<cm-material-download organization-id="9999" article-id="9999" type="thumbnail" dimensions="9x9in">
    <a>Download Thumbnail (9" x 9")</a>
</cm-material-download>

The download will not start because it doesn't have a 9in x 9in output. The a tag will additionally have the CSS class disabled, which you can use to provide feedback to the user.

a.disabled {
  cursor: not-allowed;
}

As an alternative to the cm-material-download web component, you can also generate download links directly using the colormass GraphQL API.

PreviousGenerating ExportsNextAPI Access

Last updated