AirtableAsset component examples

<AirtableAsset /> component meant to display assets from Airtable.
It mostly helps display responsive images that keep a proper aspect ratio.

Learn more about Airtable Attachment field.

Implementation has been kept simple on purpose, to avoid making it too complicated.

Eventually, it could become a standalone component with its own NPM repository.

Dealing with images is complicated. This helper is not meant to cover complex use-cases.

Using native size

This will display the image using it's native size without any kind of control regarding the width/height.


            {
              map(airtableProducts, (airtableProduct) => {
                const product: Product = airtableProduct.fields;
                const image: Asset = product.images?.[0];

                return (
                  <div key={image?.id}>
                    <AirtableAsset
                      id={product?.ref}
                      asset={image}
                    />
                  </div>
                );
              })
            }

            // Generated example
            <img
              id="vista-al-valle-zapote-honey"
              src="https://dl.airtable.com/OeNybctMTBKLPkbntK8p_jftonpzlxgakoxo9plfq.jpg"
              title="jftonpzlxgakoxo9plfq.jpg"
              alt="jftonpzlxgakoxo9plfq.jpg"
              class="asset-vista-al-valle-zapote-honey"
            />

Override width while keeping image ratio

This will automatically resize the image by applying a specific width but keep the same ratio (height will be auto)


            {
              map(airtableProducts, (airtableProduct) => {
                const product: Product = airtableProduct;
                const image: Asset = product.images?.[0];

                return (
                  <AirtableAsset
                    asset={image}
                    transformationsOverride={{
                      width: 100
                    }}
                  />
                );
              })
            }

            // Generated example
            <img
              id="asset-attlk6ONaDfaZbQTw"
              src="https://dl.airtable.com/OeNybctMTBKLPkbntK8p_jftonpzlxgakoxo9plfq.jpg"
              title="jftonpzlxgakoxo9plfq.jpg"
              alt="jftonpzlxgakoxo9plfq.jpg"
              class="asset-attlk6ONaDfaZbQTw"
              style="width: 100px;"
            />

Override height while keeping image ratio

This will automatically resize the image by applying a specific height but keep the same ratio (width will be auto)


            {
              map(airtableProducts, (airtableProduct) => {
                const product: Product = airtableProduct;
                const image: Asset = product.images?.[0];

                return (
                  <div key={image?.id}>
                    <AirtableAsset
                      asset={{
                        ...image,
                        ...image?.thumbnails?.large,
                      }}
                      transformationsOverride={{
                        height: 75
                      }}
                    />
                  </div>
                );
              })
            }

Using Airtable thumbnail (small)

This will display the image using Airtable's native small thumbnail.
Thumbnails are created with similar sizes whenever possible (as long as it doesn't change the asset's ratio).


            {
              map(airtableProducts, (airtableProduct) => {
                const product: Product = airtableProduct;
                const image: Asset = product.images?.[0];

                return (
                  <div key={image?.id}>
                    <AirtableAsset
                      asset={{
                        ...image,
                        ...image?.thumbnails?.small,
                      }}
                    />
                  </div>
                );
              })
            }

Using Airtable thumbnail (large)

This will display the image using Airtable's native large thumbnail.
Thumbnails are created with similar sizes whenever possible (as long as it doesn't change the asset's ratio).