Drupal 相簿安裝 教學-一般相簿

在安裝前請先下載相關模組
views 把相簿的資料撈出來
https://drupal.org/project/views
css injector 更改css
https://drupal.org/project/css_injector

一、相簿的建置

1.建立一個圖庫的內容類型

(1)架構>內容類型>新增內容類型  依序填好「名稱」、「描述」等資訊，首頁推薦、回覆等資訊視自己需求選擇，全部填好後按「儲存及新增欄位」

(2)設定欄位，留下「標題」把沒用「body」刪除，增加一個image的欄位後按儲存，如下圖：

(3)進入圖片的設定，裡頭可視需求自己設定，最重要的地方把圖片的上傳設定設為多值(無限制)，這樣才能上傳很多張的圖片，完成後按儲存。如下圖：

(4)管理顯示，讓顯示的圖片小一點，如下圖：

(5)利用新增內容，傳一些圖上去，先做幾個相簿。

2.利用views把資料撈出來

(1)架構>內容類型>新增views 進行要撈出資料的設定，於顯示dispaly裡選擇「node」 然後於類型中，選出你剛於第一個步驟製作的「內容類型名稱」。其它的設定可以視情況自己更改。如下圖：

(2)點選「繼續及編輯」後進入更細步的設定。我希望相簿封面，有標題和圖片，欄位裡已有「標題」，所以新增圖片的欄位。作法如下圖：

(2)-1 按新增

(2)-2透過剛才新增的欄位名稱( galleryimage)搜尋，找到後勾選後，按套用

(2)-3 選取連結圖片至內容(node)，這樣點選圖片才能到你圖庫的內容頁面。另外，於multiple filed settings裡，選dispaly 1 value(s)，讓圖片只出現1張，其餘視個人需求設定，如下圖：

(3)完成後按套用，於views設定畫面，按儲存，打入網址，會看到大致如下的畫面，基本上這樣相簿就大致完成了，點選相簿的封面圖片會進入你的相簿中：

3.透過css injector，更改相簿相片排列的方式

做好了相簿，點進去會發現照片是垂直排列，與一般橫向排列的相簿不同，因此要透過更改css作設定。你可以直接改theme裡的css檔，在這裡我採用，css injector這個模組更改。

(1)下載css injector，並安裝。

https://drupal.org/project/css_injector

(2)「設定」的「開發」中，會多出一個css injector，點選，入後再點選「Create a new rule.」

(2)設定一個css規則，如下圖：

上面圖的選項說明：

標題:自取

css code:
我用的原始的bartik模版，而它設定圖片格式的css在.field-type-image img, .user-picture img
所以我在裡面加入了，如下css的code:

.field-type-image img,
.user-picture img {
border: 2px dashed #003366;
margin: 20px;
float: left;
}

上面css的說明：
border 邊框厚度為2px，點狀，顏色為 #003366
marging 與其它圖片的外距為20px
float指靠左浮動排列。

themes to show on:你用的模版，選bartik

add the css on specific pages:在哪些頁面採用這個css
1的選項是所有
2的選項你可以在頁面中設定。blog/* 表示連結為http://你的網址/blog/ 下的所有網頁。

媒體：採用的瀏覽器。如ie6 chrome等等的。

輸入完後儲存，再回去相簿中，重新整理，發現相簿中相片的圖片排列變為橫式的。如下圖：

至此應該就做好了有封面和內頁的drupal相簿了。把views的連結加入「選單」中就可以使用了。

如果想讓相簿變得更方便美觀，可以點選下列連結觀看其它教學。

點此進入燈箱教學

點此進入「大量上傳圖片」教學