• Accueil
  • Exemples
    Native features
    SSR (getServerSideProps)SSGSSG using fallbackSSG using revalidateCatch-all routes
    Built-in features
    HostingStages & secretsCI/CDStatic i18nMonitoringAPI (Airtable)CSS-in-JSCookies consentAnalyticsIconsCSS AnimationsUI components libraryDocs siteMarkdown as JSX
    Built-in utilities
    I18nLink componentAirtableAsset componentHooksHOCsAPIErrors handlingBundle analysisSVG to ReactSecurity auditTracking useless re-renders
  • Documentation
  • Code source
  • Aller au CMS

Built-in utilities

  • I18nLink component
  • AirtableAsset component
  • Hooks
  • HOCs
  • API
  • Errors handling
  • Bundle analysis
  • SVG to React
  • Security audit
  • Tracking useless re-renders

Previous section - Accueil

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.
TE_Connectivity_-_YouTube


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)
TE_Connectivity_-_YouTube


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)
TE_Connectivity_-_YouTube


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 small thumbnail.
Thumbnails are created with similar sizes whenever possible (as long as it doesn't change the asset's ratio).
TE_Connectivity_-_YouTube


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 large thumbnail.
Thumbnails are created with similar sizes whenever possible (as long as it doesn't change the asset's ratio).
TE_Connectivity_-_YouTube


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, }} /> ); }) }

Utilisateur 1 - 2023
Tous droits réservés

Conditions générales d'utilisation
Politique de confidentialité
/static/images/LOGO_Powered_by_UNLY_BLACK_BLUE.svg