Skip to main content

I want to be able to show off the photos of my records. There’s too many interface elements. I just want to browse through the photos and click on a record to view the image nice and large.

Prototype

Design suggestions:

  • gallery should not have any labels, just the first attachment
  • should be simple to arrow left/right between records
  • record information should be hidden away (maybe behind some click that shows more info)

Nice to have:

  • a slider near search to control the number of columns (and thus the gallery image size)
  • masonry layout
  • dark theme

Current design notes:

Things are too cluttered & distracting due to lots of labels and lines. Also what’s up the claustrophobic inset style? Make the scroll area full width to let the images be the show.


I don’t really care about the record information at this point. I want to preview my image fullscreen!


Finally at the image! Nice. How do I get to the next one? Click out of two modals, click another image from the gallery, click the record’s attachment… so many clicks when I just want to press the right arrow key to go to the next record’s attachment.

The way you preview images on this site is better than on Airtable…


This code is very dated (as in created when the script block was in beta), but it might help you find a pathway. I thought there was an extension for this, but I cannot find it.



/*



Airdrop - Gallery Viewer

Copyright (c) 2020 by Global Technologies Corporation

ALL RIGHTS RESERVED



*/


// display the title

output.markdown(“# Gallery Viewer”);


// get the table name

let sourceTable = await input.tableAsync(“Pick the table:”);

let sourceTableName = sourceTable.name;


// get the field name

let sourceField = await input.fieldAsync(“Pick the attachment field to be displayed:”, sourceTable.id);

let sourceFieldName = sourceField.name;


// identify the fields to be exported

let aFieldList = FsourceFieldName];


// get the source data

// let sourceTable = base.getTable(sourceTableName);


// get the data set for this gallery

let result = await sourceTable.selectRecordsAsync();

let sourceRecords = result.records;


// get the record count

let recordCount = sourceRecords.length;


// iterate across all the records

for (var r = 0; r < sourceRecords.length; r++)

{


// get the name of this image collection record

var thisName = sourceRecordsor].getCellValue("Name");



// get the array of images in this record

let theseImages = sourceRecordsor].getCellValue("Images");

let imageCount  = theseImages.length;



// iterate across the image collection for this record

for (var i = 0; i < theseImages.length; i++)

{



    // clear the frame

    output.clear();

    

    // display the table

    output.markdown("# " + sourceTableName + ": " + thisName);

    // output.markdown("r = " + r.toString() + " :: i = " + i.toString() + " of " + imageCount.toString());



    // get the image formatted in markdown style

    var thisImage = "h!s" + theseImages i].id + "](" + theseImages i].thumbnails.large.url + ")](" + theseImages i].url + ")";

    output.markdown(thisImage);



    // prompt for action

    let action = await input.buttonsAsync('', n'<- Prev', 'Next ->']);



    // test to see which way we're going

    if (action == 'Next ->')

    {

        // do nothing - skip forward

    } else {

        // decrement the image array pointer

        if (i == 0) {

            if (r == 0) {

                r = -1;

                break;

            } else {

                r -= 2;

                break;

            }

        } else {

            i -= 2;  

         }

    }



}



// if at eof, start at the first record in the gallery

if (r == (recordCount - 1))

  r = -1;

}


Reply


Terms & Conditions