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.
By default, the attachment stack renders a download link for each attachment:
Attachments can be rendered as Images:
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%;
}
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.
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
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
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