Drupal 8 教學 - 用Views grid display製作圖片展示頁面

0.圖片展示範例

第四張貓貓
oreo & coco

舔舔舔,我舔舔舔舔舔。

加入購物車
第三張貓貓
oreo

慵懶的癱在地上起不來,就是一隻肥美的貓。

加入購物車
第二張貓貓
oreo

張著大大的眼睛看著前方,彷彿不理解你們這些人類在忙甚麼。

加入購物車
第一張貓貓
oreo

茫然地看著遠方,不知道在想著甚麼的貓貓。

加入購物車
Submitted by admin on Thu, 12/26/2019 - 09:11

 

這個範例會帶著大家設定view中的grid display。

Grid在英文中是格子的意思,顧名思義,就是把內容以方格的形式一筆筆呈現出來。

這在一般的注重圖片展示的網站中是很常用的顯示形式,例如購物網站、旅遊網站、作品集等等,都是透過圖片加上內文顯示構成一個方格元素,再把一個個方格展示出來。

 

這篇頁面的最上方放置了一個block,這個block的內容就是Drupal的views grid display,可以讓我們先睹為快。

但再繼續下去前要先提到一點,上面的展示區塊是有另外再透過CSS渲染過的結果,在預設主題底下,我們做出來的結果應該會像下面的圖片一樣。

drupal views grid preview

雖然陽春了點,但沒關係。做出上面圖片的骨幹框架之後,可以參考(TODO)這篇文章裡面的CSS渲染教學來把外觀變成自己喜歡的樣子。

 

好了,讓我們開始吧。

要讓Drupal輸出上面範例中的grid display的骨幹內容,需要進行下列步驟:

1. 定義一個商品類別的新content type並上傳測試圖片等內容

2. 在views裡面設定一個grid display block物件,並輸出指定的field。

第二步裡面會根據我們的field物件或是連結或是文字而有一點小細節需要注意,下面會一併說明。

 

1. 定義一個商品類別的新content type並上傳測試圖片等內容

我們在Drupal 8 教學 - 新增第一篇文章中簡單的介紹了何謂Content type,當時僅有簡單的比較預設的article與page兩種類容類別之間的差異而已,現在,我們要到/admin/structure/types頁面中,實際按下「+add content type」的按鈕來新增一個全新的內容類別。

按下按鈕後Drupal會詢問這個新增的內容類別的稱呼,這個稱呼只有管理員會看到,在這篇文章中我們以『商品類別』來稱呼這個新增的Content type。

在Label欄位輸入『商品類別』之後(覺得漢語音譯不行的話可以考慮變更一下Machine name),其他的欄位按照預設的設定不用改動,按下「Save and manage fields」即可。

系統接著會把我們導引到『商品類別』的manage field欄位,裡面預設已經幫我們設定一個名為Body的field了,在這邊我們要按下左上角的「+add field」來新增其他的field。

上面『商品類別』的範例中所包含的元素及形別設定如下:

drupal content type definition

Body內容是灰色文字部分的區塊。

goods_button是按鈕文字,範例中全部填入了「加入購物車」。

goods_image是方框上半部的圖片照。

goods_poster_name是金色斜體文字,範例中填入了貓的名稱。

URL name是網址別名,點擊圖片後可以從瀏覽器上面的網址列看到,請參考Drupal pathauto 模組介紹進行設定。

定義了『商品類別』的內容格式並上傳測試資料後,就可以開始進行下一步了,如果還不確定如何新增一個field,請參考Drupal 8 教學 - 新增Field與Views filter的內容。

 

2. 在views裡面設定一個grid display block物件,並輸出指定的field。

這邊的可設定項目比較細節一點,我們分幾個步驟講解。

我們已經在Drupal 8 教學 - 如何增加側邊欄裡面新增過一次Views page了,現在我們要使用差不多的流程建立一個Views Block。

我們來到/admin/structure/views/add頁面,在View Name填入一個自己喜歡的名子之後,選擇『商品類別』作為顯示的對象,像是下圖。

drupal add views display of content type

接著點下Create a block的勾勾,選擇Grid作為顯示格式,並顯示其中的Field。

add view block display setting

 

2.1設定每個Field的顯示細節

完成上一步按下「Save and edit」按鈕後,我們應該會進入新創建的Views Block Display管理頁面,請按照我們在Drupal 8 教學 - 如何增加側邊欄一文的最末尾提過的操作,按下下圖FIELD字樣旁邊的「Add」按鈕,將所要顯示的field欄位修改成跟下圖一樣。

點下Grid旁邊的Setting,裡面可以設置方格的顯示行數,在範例中共有四筆『商品類別』的內容,顯示上就會變成兩行兩列的四宮格。

點下Field裡面任一元素,在下圖中是以Content: Title作為例子,可以看到彈出式視窗裡面有個STYLE SETTING,裡面有個Customize field HTML可以勾選。勾選後可以選擇這個元素要被什麼樣的HTML tag所包裹。再進一步勾選Create CSS class的話,可以為這個HTML標籤加上自定義的class name。

按照圖片中的設定,Title欄位最後輸出的HTML會長這樣。當然我們要另外自己定義goods-title的CSS文件與內容。

<h5 class="field-content goods-title">第四張貓貓</h5>

最後,我們要把Content: goods_button設置成一個超連結,作為「加入購物車」的按鈕使用。點開之後再REWRITE RESULTS欄位底下勾選Output this field as a custom link,並填入超連結所指向的網址。

加入購物車的功能可以透過Rules模組或是自己定義一個Controller達成,在我們實際講解這一塊之前,可以先填入「/」把使用者導引到根目錄。

drupal grid display views setting

順帶一提,點擊圖片的field欄位,也就是上圖中Content: goods_image的地方,有一個Link Image to的下拉式選單可以選擇。選擇Content的話可以讓使用者透過點選圖片的方式進到該『商品類別』的頁面。

點下儲存後,再依照Drupal 8 教學 - 如何增加側邊欄所提過的,放置views block display物件的方式,把這個Display我們所希望的區域中。

如此一來我們應該就可以看到這篇文章一開始所提及的,沒有被CSS渲染過的顯示結果了。