如何使用圖片集組件？

1、如何查看圖片集組件是否已經存在？

如果你的頁面上已經有這個組件了，就不需要再添加，直接根據需要進行相關操作就可以（具體操作見下文所述）；

如果你的頁面上需要這個組件，但是還沒有添加，就需要先添加這個組件了；怎麼判斷頁面上有沒有這個組件？單擊查看如何查看某一塊內容是使用什麼組件製作的？

2、如何添加圖片集組件？

在頁面上添加組件的方法都是一樣的，單擊查看如何添加組件？

添加的組件名稱為“圖片集”，如下圖1所示：

圖1:

3、如何設置圖片集組件？

3.1 進入組件的“設置”分兩種場景

1）此組件已經添加好的場景：進入所有這類組件設置項方法都是一樣的，可以參考這個攻略：如何進入組件的設置項？

2）新添加的組件的場景：在添加此組件時會彈出這個組件的的設置話框。

3.2在組件的設置中可以設置組件展示的內容

組件標題：若需要可以輸入組件標題，若不輸入，組件標題也不顯示，也不會佔位；

模式選擇：支持放大模式和鏈接模式，放大模式即單擊圖片可以放大，鏈接模式即單擊圖片可以跳轉到相應頁面，圖片鏈接可以單擊下面圖片左下角的編輯入口進行添加；

添加圖片：首次上傳此圖片，需要從本地上傳，之前上傳過此圖片，也可以單擊“從資料庫選擇”按鈕從資料選擇這個圖片；

圖2：

“更多”鏈接：如果需要顯示“更多”超鏈接（如下圖3），可以單擊下圖所示小鍊子按鈕，選擇要鏈接的頁面。單擊查看“更多”鏈接類型介紹；

圖3：

單擊圖片左下角的“編輯”（如下圖4），可以設置如下內容（如圖5）：

圖4：

圖片Alt屬性：即圖像無法顯示時的替代文本，對SEO有利；

圖片描述：即可以展示在圖片下方或在圖片上懸浮的文字可以統稱為圖片描述；

圖片鏈接：只有模式選擇為鏈接模式時，才有此選項，模式為放大模式時沒有此選項，單擊查看“更多”鏈接類型介紹；

圖5：

3.3在組件的設置中可以設置組件展示的風格

3.3.1 矩陣平鋪展示樣式

選擇矩陣平鋪展示樣式，為了展示正常且美觀，建議圖片尺寸相同，選擇矩陣平鋪展示樣式，支持設置以下內容：

選擇描述展示風格：如果在圖片描述那裡輸入了文字（如上圖5所示），支持選擇描述展示風格（如下圖6所示），描述顯示在圖片下方、固定懸浮在圖片底部、鼠標移上去懸浮在圖片底部、鼠標移到圖片上展示蒙層且蒙層上展示文字；

圖6：

圖片蒙層顏色設置：如果在圖片描述那裡輸入了文字（見圖5），支持設置蒙層顏色，如果圖片描述那裡沒有輸入文字，即使設置了蒙層顏色，也不顯示；

是否顯示蒙層按鈕：如果在圖片描述那裡輸入了文字（見圖5）並且設置的顯示蒙層按鈕，此按鈕才會顯示；如果圖片描述那裡沒有輸入文字，即使設置了顯示按鈕，也不會顯示；

如果設置顯示蒙層按鈕，支持設置按鈕文字以及以下樣式：按鈕位置（左對齊、居中、右對齊）、按鈕高度、文字大小、按鈕間距、初始樣式（背景顏色、文字顏色、邊框、圓角弧度）、鼠標懸浮樣式（背景顏色、文字顏色、邊框、圓角弧度）

圖7：

3.3.2 水平對齊展示樣式

選擇水平對齊展示樣式，對圖片的尺寸要求是高度一樣，寬度可以不一樣，選擇水平對齊展示樣式，支持設置以下內容（圖8）：

選擇描述展示風格：如果在圖片描述那裡輸入了文字（如上圖5所示），支持選擇描述展示風格（如下圖8所示），描述固定懸浮圖片底部、固定懸浮在圖片底部、鼠標移上去懸浮在圖片底部、鼠標移上去展示蒙層且蒙層上顯示描述。

圖片蒙層顏色設置：支持設置蒙層顏色，如果圖片描述那裡沒有輸入文字（見圖5），即使設置了蒙層顏色，也不顯示；

圖8：

3.3.3 縱向對齊展示樣式

選擇縱向對齊展示樣式，對圖片的尺寸要求是圖片寬度一樣，高度可以不一樣，選擇縱向對齊展示樣式，支持設置以下內容（圖9）：

選擇描述展示風格：如果在圖片描述那裡輸入了文字（如上圖5所示），支持選擇描述展示風格（如下圖9所示），支持描述展示在圖片下方、固定懸浮圖片底部、鼠標移上去懸浮圖片底部、鼠標移上去展示蒙層且蒙層上顯示描述。

圖片蒙層顏色設置：支持設置圖片蒙層顏色、如果圖片描述那裡沒有輸入文字（見圖5），即使設置了蒙層顏色，也不顯示；

圖9：

3.4在組件的設置中可以設置此組件的高級功能

圖片集組件支持圖片自適應不同終端設備，也支持自定義，支持自定義的設備有：PC寬屏、PAD橫屏、PAD豎屏、手機橫屏、手機豎屏終端一行展示的圖片數量；

圖片參數設置：支持設置圖片間距；

3.5設置好圖片集組件的內容、風格和高級功能後，單擊設置框右下方“保存”按鈕，以保存所設置的內容。

4、保存、預覽、發布

設置好以上內容以後要單擊頁面右上角的“保存”按鈕，目的是把此修改保存到網站後台；

然後可以單擊“預覽”按鈕查看不同終端下展示的效果，如果不合適可以到後台再做修改；

如果需要讓訪客也看到，請單擊頁面右上角的“發布”按鈕，發布之後稍等兩分鐘左右即可看網站前台展示效果。