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.
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
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
Thumbnails are created with similar sizes whenever possible (as long as it doesn't change the asset's ratio).
small thumbnail.Thumbnails are created with similar sizes whenever possible (as long as it doesn't change the asset's ratio).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
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
Thumbnails are created with similar sizes whenever possible (as long as it doesn't change the asset's ratio).
large thumbnail.Thumbnails are created with similar sizes whenever possible (as long as it doesn't change the asset's ratio).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
map(airtableProducts, (airtableProduct) => {
const product: Product = airtableProduct;
const image: Asset = product.images?.[0];
return (
<AirtableAsset
asset={{
...image,
...image?.thumbnails?.large,
}}
/>
);
})
}