Attachment Stack

Renders either a single link to a an specific record attachment or a list of attachments in the given field.

⚠️ Airtable allows multiple entries within a attachment field. Attachments can be anything from documents to images. Each wrapping div contains the record number as a ID and a data-url attribute for further referencing.

Multiple Output Configurations

By default, the attachment stack renders a download link for each attachment:

Image

Attachments can be rendered as Images:

Image

In this example, the attachments don't create links and a simple JavaScript displays the images on click in the product image container:

$(".attachment-item").click(function(){
  $('.product-image').children('img').attr("src",$(this).data('url'));
});	

CSS for the example:

.product-image img {
  min-width: 100%;
  max-height: 400px;
  object-fit: cover;
}

.attachment-group::after {
  content: "";
  clear: both;
  display: table;
}

.attachment-item {
  float: left;
  width: 25%;
  padding: 5px;
  cursor: pointer;
}

.attachment-item img {
  objectfit: cover;
  width: 100%;
}

Configuration

Field Name: the Airtable field containing the attachments

Display as Image: Check if you want to render the attachments as images. Otherweise a list of download links is generated. If checked and "Create Attachment Link" is disabled, the image is linked to the full size version of the Image.

Display Single Attachment: If the attechment field contains more than one file, you can pick which file you want to display

File Number: if "Display Single Attachment" is selected, enter the number of the file you want to display.

Image

Link Configuration

Create Attachment Link: Check if you want to create a download link for the attachment(s).

Link Text: The text displayed for each attachment. You can use {{Field Tokens}} as-well.

Link Title: Alternate text for the download link. Some browser and frameworks display the link title as a tooltip

Image

CSS for Attachment

Each attachment is wrapped by a single div. Enter one (or more) class name(s) for this div here. The div also contains the record number as the ID and a data-url attribute for further referencing. See JavaScript Example further up.

Attachment: CSS classes to add, use spaces for multiple classes

Image

Airtable Publisher Stack Suite

ATP Base UPDATED
ATP Result Set UPDATED
ATP Record
ATP Record Link
ATP Image
ATP Attachment
ATP Condition
ATP Split
ATP Pagination
ATP Search Form NEW

Download 1.1 beta and demo file

The updated demo version includes the new search feature and uses the Airtable "Product" base to showcase data handling and some of the included stacks.
You need the free Bootstrap theme by Theme Flood