用Awesome Table的外掛Photo Gallery做出雲端相簿列表

Awesome Table提供一個Google Sheet的外掛程式「Photo Gallery」，可以讓我們指定某個雲端硬碟資料夾讓它自動抓取裡面的圖片檔案資料到Google Sheet，這樣的工具可以讓我們很快做出一個相簿列表功能呈現於網頁上。


首先，安裝這個外掛程式 ，並允許其執行權限:

然後，Google Sheet 的 [外掛程式] 就多出了 [Photo Gallery by Awesome Table] 功能，Photo Gallery的執行功能資訊呈現在右側，第一步就是要按下 [Use existing album] ，第一次會要求雲端相簿管理權限的允許。

在進行Photo Gallery的執行之前，請先確定把圖檔所在的雲端硬碟資料夾設定 [共用] 狀態是 [知道連結的的均可檢視]。因為這個資料夾下的檔案本來就是要公開在網站上讓人下載的，當然要先如此設定才能下載。

 
再回到Google Sheet，執行Photo Gallery指定 [Use existing album] 雲端硬碟資料夾。

就會看到在右側的Photo Gallery執行資訊呈現進行掃描作業，完成後就會看到已經將該資料夾所有圖檔資料都被擷取放在工作表了。

[2017.4.11修正] 完成掃描之後，其實有產生一個 Template工作表1，只是被隱藏起來了，所以要在左下方的 [所有工作表] 找到它並將其勾選成顯示狀態。(本來被我們誤會這裡有Bug)

 
日後，若此雲端硬碟資料夾裡面的檔案有所異動，就再開啟一次這個Google Sheet，執行重新整理⟲，就能再重新擷取資料夾所有圖檔資料。




在開始著手套用到Awesome Table之前，先記得將前述完成的Google Sheet設定與他人共用可以檢視(Share your Google Sheet):

有了這個Google Sheet，就可以再套用Awesome Table很快做出相簿列表功能。就在右側的Photo Gallery執行功能資訊的中間有個Open your: [Photo gallery] 按鈕， 按下之後就能回到Awesome Table編輯一個新的View。

這個View被命名為 "[Addon Photo gallery] photos of spreadsheet工作表1"，右上角標示了DATA SOURCE的確是剛剛那個Google Sheet檔案(資料來自工作表1之範圍A1:I)。

不過，我們查看這個View的ADVANCED PARAMETERS設定，其中的Template range是"Template工作表1!A1:E2"。但是剛剛的Google Sheet並沒有新增一個Template工作表1啊！這裡應該是Photo Gallery外掛程式的Bug，不可能沒有任何的 Template Sheet，這樣如何安排版面的呈現呢?

但是，真的找不到這方面的資訊，就算官網的文章Photo Gallery Toturial也沒有提到任何線索。但是，這個View確實是如同畫面所示可以正常呈現的，這部分暫時無法給大家一個正確的解釋。



搞定上述步驟，以前述完成的Google Sheet為後端資料來源所呈現的「雲端相簿列表」就完成了，然後就將Awesome Table平台提供的Embed碼複製起來，嵌入自己網頁的HTML即可呈現(如此範例呈現於jsfiddle、jsbin)。注意，若你只是先嵌入自己電腦上的HTML檔而直接以Chrome開啟，將會因為新版Chrome對於安全控制而阻擋其程式的正確執行，但若使用Firefox開啟自己電腦上的HTML檔則能看到正確執行。