此教程将教你如何在Drupal7中创建一个图片库。
& |4 v4 P& J, w* i' Y4 j* a. E这个不会创建一个世界上最耀眼或令人难忘的图片库,但是它能够运行。此教程是为初学者设计的所以他们在Drupal 7中创建图片库时需要理解一些关键的概念。
: s8 i9 |3 }9 T如果你仍在用Drupal 6, 我们也有个教程(JD译站注:英文的). ) ~$ ?( v/ X7 X5 h, I/ H" g
1: 安装所需模块 4 V* U6 i3 h& r& G
你需要安装并启用以下模块:
+ K( T0 A0 B! C- O: Y0 ?" f& ^CTools: http://drupal.org/project/ctools Views: http://drupal.org/project/views
; _; h! i6 i* [$ z2: 创建一个内容类型
/ p* R k) e$ {: F0 t* s首先, 我们将设置一个Photos(图片)内容类型.前往 Structure > Content types > Add content type 并为图片库创建新的内容类型。
7 D# B- P2 I( }+ Z7 G6 ]![](http://www.cn4jd.com/sites/default/files/get_image/tutuploadsmedia_1331060256061.png)
# @$ c& a, Y: l3 q2 W
3: 添加一个图片字段 4 F8 h3 _: d- _
现在我们需要添加一个图片字段到我们新创建的内容类型,这样我们就可以上传图片了。前往 Manage Fields(管理字段) 并创建一个图片数据类型字段.
![](http://www.cn4jd.com/sites/default/files/get_image/tutuploadsmedia_1331060521185.png) 4: 上传图片
, W+ j p7 G1 ?2 K, n这里有很多种方式通过上传图片来填充图片库。 4 p9 }9 j& S+ n) F
你可以Add content > photos 并通过手动上传图片 你可以使用Devel模块来自动生成图片: http://drupal.org/project/devel. 你可以使用例如Feeds导入模块: http://drupal.org/project/feeds.
![](http://www.cn4jd.com/sites/default/files/get_image/tutuploadsmedia_1331060694984.png) 5: 创建视图 & v0 U8 ~9 t9 h! M5 r* |
前往 Structure > Views > Add new view 并让我们设置视图: ( e- N& A; L) g& N% J; G- l
给你的视图一个名称:Photo Gallery. 选择显示的内容类型为Photos. 选中创建一个页面. 选择“网格”格式显示并选择“字段”. 选择要在网格中显示的图片数量: 12 是本教程中使用的.
点击 Continue & edit. 向下滚动并预览你的图片库. 唯一缺少的?图片.
Q; v2 @% G( m% k9 W9 q- F![](http://www.cn4jd.com/sites/default/files/get_image/tutuploadsmedia_1331060942549.png)
6: 改善视图
/ q8 c' ?" J: P7 C- I; L让我们为视图添加图片. 点击“字段”旁边的add(添加)。
/ c2 I l. e" V7 T![](http://www.cn4jd.com/sites/default/files/get_image/tutuploadsmedia_1331060960346.png) 搜索并选择我们先前创建的图片字段.
![](http://www.cn4jd.com/sites/default/files/get_image/tutuploadsmedia_1331062354345.png) 点击两次 Apply (all displays) . 现在你可以在页面底部预览到图片库,唯一不那么正确的就是图片是不同尺寸的。
![](http://www.cn4jd.com/sites/default/files/get_image/tutuploadsmedia_1331061075586.png) 7: 调整图片 ' v k; B9 A% i" a
Drupal本身可以自动调整图片尺寸, 让我们看看如何做.
8 N. i! i, i+ S9 o5 k5 g前往 Configuration > Image styles > Add style. 输入一个新的调整选项名称. 点击Create new style(创建新的样式).
![](http://www.cn4jd.com/sites/default/files/get_image/tutuploadsmedia_1331061159450.png) 你可以看到图片调整的预览效果,当前无任何变化。
![](http://www.cn4jd.com/sites/default/files/get_image/tutuploadsmedia_1331061180084.png) 在页面底部,选择Scale and crop(缩放并裁剪)。 点击 Add.
![](http://www.cn4jd.com/sites/default/files/get_image/tutuploadsmedia_1331062529803.png) 选择图片的宽度和高度. 在此例中我们有4张图片横穿页面, 所以我们选择一个宽度来适应页面. 点击 Click Add effect 完成设置.
![](http://www.cn4jd.com/sites/default/files/get_image/tutuploadsmedia_1331061232609.png) 你现在可以看到调整图片的新预览。
![](http://www.cn4jd.com/sites/default/files/get_image/tutuploadsmedia_1331061251914.png) 现在让我们应用调整的图片
; s' o" d& |5 {! h6 X' J- K' Q Z+ A前往 Structure > Views > Photo Gallery > edit. 点击图片字段旁的设置.你现在可以前往Image style(图片样式)并选择你之前创建的样式。 你也可以取消Create a label(创建一个标签)选项框,这样字段的名字将不会显示. 点击 Apply (all displays).
![](http://www.cn4jd.com/sites/default/files/get_image/tutuploadsmedia_1331061400126.png) 点击Save来完成你的视图,前往你的网站首页查看吧。瞧!你的Drupal 7 图片库完成了!
![](http://www.cn4jd.com/sites/default/files/get_image/tutuploadsmedia_1331061620284.png)
9 X) ?- A# a7 e8 L本文选择:http://www.cn4jd.com,谢谢! 0 ^6 x, k3 ~' @9 C$ Z3 {0 |1 E8 E
|