一、什么是圖片集組件？

圖片集組件是一個展示多張圖片集合的模塊，支持單擊圖片放大和單擊圖片跳轉到相應頁面兩種模式。支持給每張圖片添加描述文字，描述文字可以固定在圖片下方、固定懸浮在圖片上、也可以鼠標移到圖片上懸浮顯示。支持矩陣平鋪展示、水平對齊展示、縱向對齊展示、懸浮滾動展示等多張展示風格。

二、如何使用圖片集組件？

1、如何查看圖片集組件是否已經(jīng)存在？
如果你的頁面上已經(jīng)有這個組件了，就不需要再添加，直接根據(jù)需要進行相關操作就可以（具體操作見下文所述）；
如果你的頁面上需要這個組件，但是還沒有添加，就需要先添加這個組件了；怎么判斷頁面上有沒有這個組件？單擊查看如何查看某一塊內(nèi)容是使用什么組件制作的？

2、如何添加圖片集組件？
在頁面上添加組件的方法都是一樣的，單擊查看如何添加組件？
添加的組件名稱為“圖片集”，如下圖1所示：
圖1:

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

3.1 進入組件的“設置”分兩種場景
1）此組件已經(jīng)添加好的場景：進入所有這類組件設置項方法都是一樣的，可以參考這個攻略：如何進入組件的設置項？
2）新添加的組件的場景：在添加此組件時會彈出這個組件的的設置話框。

3.2 在組件的設置中可以設置組件展示的內(nèi)容
組件標題：若需要可以輸入組件標題，若不輸入，組件標題也不顯示，也不會占位；
模式選擇：支持放大模式和鏈接模式，放大模式即單擊圖片可以放大，鏈接模式即單擊圖片可以跳轉到相應頁面，圖片鏈接可以單擊下面圖片左下角的編輯入口進行添加；
添加圖片：首次上傳此圖片，需要從本地上傳，之前上傳過此圖片，也可以單擊“從資料庫選擇”按鈕從資料選擇這個圖片；
圖2：

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

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

圖片Alt屬性：即圖像無法顯示時的替代文本，對SEO有利；
圖片描述：即可以展示在圖片下方或在圖片上懸浮的文字可以統(tǒng)稱為圖片描述；
圖片鏈接：只有模式選擇為鏈接模式時，才有此選項，模式為放大模式時沒有此選項，單擊查看“更多”鏈接類型介紹；
圖5：

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

3.3.1 矩陣平鋪展示樣式
選擇矩陣平鋪展示樣式，為了展示正常且美觀，建議圖片尺寸相同，選擇矩陣平鋪展示樣式，支持設置以下內(nèi)容：
選擇描述展示風格：如果在圖片描述那里輸入了文字（如上圖5所示），支持選擇描述展示風格（如下圖6所示），描述顯示在圖片下方、固定懸浮在圖片底部、鼠標移上去懸浮在圖片底部、鼠標移到圖片上展示蒙層且蒙層上展示文字；
圖6：

圖片蒙層顏色設置：如果在圖片描述那里輸入了文字（見圖5），支持設置蒙層顏色，如果圖片描述那里沒有輸入文字，即使設置了蒙層顏色，也不顯示；
是否顯示蒙層按鈕：如果在圖片描述那里輸入了文字（見圖5）并且設置的顯示蒙層按鈕，此按鈕才會顯示；如果圖片描述那里沒有輸入文字，即使設置了顯示按鈕，也不會顯示；
如果設置顯示蒙層按鈕，支持設置按鈕文字以及以下樣式：按鈕位置（左對齊、居中、右對齊）、按鈕高度、文字大小、按鈕間距、初始樣式（背景顏色、文字顏色、邊框、圓角弧度）、鼠標懸浮樣式（背景顏色、文字顏色、邊框、圓角弧度）
圖7：

3.3.2 水平對齊展示樣式
選擇水平對齊展示樣式，對圖片的尺寸要求是高度一樣，寬度可以不一樣，選擇水平對齊展示樣式，支持設置以下內(nèi)容（圖8）：
選擇描述展示風格：如果在圖片描述那里輸入了文字（如上圖5所示），支持選擇描述展示風格（如下圖8所示），描述固定懸浮圖片底部、固定懸浮在圖片底部、鼠標移上去懸浮在圖片底部、鼠標移上去展示蒙層且蒙層上顯示描述。
圖片蒙層顏色設置：支持設置蒙層顏色，如果圖片描述那里沒有輸入文字（見圖5），即使設置了蒙層顏色，也不顯示；
圖8：

3.3.3 縱向對齊展示樣式
選擇縱向對齊展示樣式，對圖片的尺寸要求是圖片寬度一樣，高度可以不一樣，選擇縱向對齊展示樣式，支持設置以下內(nèi)容（圖9）：
選擇描述展示風格：如果在圖片描述那里輸入了文字（如上圖5所示），支持選擇描述展示風格（如下圖9所示），支持描述展示在圖片下方、固定懸浮圖片底部、鼠標移上去懸浮圖片底部、鼠標移上去展示蒙層且蒙層上顯示描述。
圖片蒙層顏色設置：支持設置圖片蒙層顏色、如果圖片描述那里沒有輸入文字（見圖5），即使設置了蒙層顏色，也不顯示；
圖9：

3.4 在組件的設置中可以設置此組件的高級功能
圖片集組件支持圖片自適應不同終端設備，也支持自定義，支持自定義的設備有：PC寬屏、PAD橫屏、PAD豎屏、手機橫屏、手機豎屏終端一行展示的圖片數(shù)量；
圖片參數(shù)設置：支持設置圖片間距；

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

4、保存、預覽、發(fā)布
設置好以上內(nèi)容以后要單擊頁面右上角的“保存”按鈕，目的是把此修改保存到網(wǎng)站后臺；
然后可以單擊“預覽”按鈕查看不同終端下展示的效果，如果不合適可以到后臺再做修改；
如果需要讓訪客也看到，請單擊頁面右上角的“發(fā)布”按鈕，發(fā)布之后稍等兩分鐘左右即可看網(wǎng)站前臺展示效果。

根據(jù)需要還可以對這個組件做以下操作，具體請單擊以下鏈接了解。

5、單擊查看如何編輯組件的樣式？
組件的“編輯樣式”功能主要可以編輯此組件的以下內(nèi)容：組件背景、組件邊框、組件邊距、文字字號、顏色等，根據(jù)需求選擇使用；
組件的“編輯樣式”功能操作入口：所有組件的“編輯樣式”功能操作入口都是一樣的，具體操作方法請單擊查看如何編輯組件的樣式？

6、單擊查看如何應用組件？
通過組件的“應用組件”功能，可以將當前頁面的組件應用到其他頁面上，因為原理上它們是同一個組件，所以在任何被應用到的頁面上編輯/刪除組件時，被應用的頁面會一起變化，這個是“應用組件”和“復制組件”最本質的區(qū)別。此功能經(jīng)常用于面包屑導航、產(chǎn)品分類組件、文章分類組件等。被應用過去的組件會出現(xiàn)在頁面的最底端，可以用鼠標左鍵按住組件名稱拖動到需要的位置；
組件的“應用組件”功能操作入口：所有組件的“應用組件”功能操作入口都是一樣的，具體操作方法請單擊查看如何應用組件？

7、單擊查看如何刪除組件？
如果確定不需要這個組件了，可以通過“刪除組件”按鈕把此組件刪除掉，被刪除的組件會默認放到組件回收站中。
組件的“刪除組件”功能操作入口：所有組件的“刪除組件”功能操作入口都是一樣的，具體操作方法請單擊查看如何刪除組件？

8、單擊查看如何恢復組件？
如果需要恢復已經(jīng)刪除的組件，可以到組件回收站中，找到對應的組件，然后執(zhí)行【還原】操作，即可恢復此組件到原有的頁面上，通常會位于頁面的最底端。
恢復組件的操作入口：所有組件的恢復功能操作入口都是一樣的，具體請單擊查看如何恢復組件