使用Drupal创建自定义图库 Drupal相册 Drupal图片库教程

本文翻译自O’Reilly出版的《Using Drupal》，该翻译纯属个人兴趣，仅可做学习使用。由于博主水平有限，翻译中出现的大量错误和不妥的地方，望有心人能给予批评指正，不甚感激。
& i  _0 G5 k+ I) z& }+ C. A0 m/ b) A
5 A4 u  s3 W! n( R----------------------------------------------------------------------------------

如果说图片胜过千言万语，那么对于一个站点来说，能够为管理好图片提供一个稳定强大的后台基础就显得尤为重要了。Drupal的灵活性允许用户使用多种方式来管理图片，方式的多样性从小小的个人相册到允许上百万的用户同时上传图片的粉丝网站。
本章将主要介绍以下模块：
7 ~0 ]( G% E' j7 `" s) jImageField (http://drupal.org/project/imagefield)
一个允许用户上传图片的CCK (Content Construction Kit) 变量
, k% D2 E- u# ?2 F8 I# EImageCache (http://drupal.org/project/imagecache)
& H% M/ N+ O. L0 p8 E5 X自动将图片转换成一个预先定义好的大小并将图片缓存起来方便日后调用
8 z. \" ^8 l8 C" H: yCustom Pagers (http://drupal.org/project/custom_pagers)
9 _* V, q& T+ M& v创建自定义的向前向后翻页控制块

罗宾逊的相册网站效果：


3 ?2 h. N4 N2 B+ o: j
/ `( F2 L+ [$ T( \
案例分析
% W% K% y7 S1 M# ^; |3 r
罗宾逊一家有很多的家庭成员，他们互相之间很难保持联系。家里面的人早就想让他们会做网站的儿子Fritz来建立一个网站，好让家庭成员都能在上面分享一些生活中的故事，还要能上传一些高分辨率的照片。在一个没有家庭作业也没有其他事情可忙的周末，Fritz决定开始用Drupal来构建这个家庭成员分享照片的网站。
" o3 n7 _' l( }3 R' |罗宾逊一家想要让家庭成员都能上传照片，当照片被上传以后应该能够自动调整到缩略图的大小，同时还能够以完整的分辨率来下载。他们还想把图片归类到不同的图片库并把各张照片加上标签说明。他们最终希望家庭成员还能够对照片加上评论。
: t! K$ w8 c! d8 O- a
$ U0 |. t' ^$ y/ T$ m6 r! ^! f  F实现过程
& D# A$ K& \/ C5 d
$ X$ u- \3 e  k- r0 b/ T你可能预想要用Drupal建一个图片库网站不会难，但实际做起来你就会发现，Drupal为我们提供很多方便的自定义选择的同时，也让我们的建站过程变得让人迷茫。好消息是使用Views和CCK模块搭配，我们能很快就建立起一个可以高度自定义话的图片库网站。
5 i( L% k$ ~' m% W) b) `
* u& e/ g) K3 ?4 K照片上传
9 z) @; A2 q; P$ E
图片处理从早期的Drupal开始，就是一个需要多个不同模块一起合作来完成的工作。Image模块(http://drupal.org/project/image)在Drupal 4.6和4.7的时候是我们处理图片的主要解决方案，但是随着CCK的引入和广泛使用，许多新的模块都随着这个新鲜的灵活性更强的系统的出现而诞生了。由于Drupal社区的整体发展趋势是围绕这个新的方式，我们也决定以CCK和Views搭配这种新的方式为基础来建站。

ImageField (http://drupal.org/project/imagefield)模块为我们提供了一个可重用的CCK上传变量，我们将会在接下来用它来上传我们的图片。
* J4 }& L! G3 M- y
缩略图生成
5 t4 i+ W0 c1 _2 M% J2 n" [
虽然名字上提到的只是图片缓存，但ImageCache模块(http://drupal.org/project/imagecache)实际为我们实现的比这要多得多。它通常与ImageField模块搭配使用，因为尽管ImageField是用来处理上传图片的，但它本身并未提供任何可以在上传的同时生成缩略图的功能。ImageCache不仅可以生成缩略图，还可以提供各种展示图片的方式，包括裁剪，旋转，锐化等等。
! K# ~& d" n( w9 f8 R
图片库
9 q! T: O/ m1 f# x6 O8 g0 d
. h: |% X* _0 m4 \: }$ S图片库里的图片展示可以使用包含多页的(Views模块)视图来实现。把ImageCache和ImageField整合在一起，我们就能做到ImageField提供图片上传，ImageCache再把图片处理成展示时候需要用到的格式。
6 V1 ]6 L: B: v5 N( M
% n9 G2 H7 A* p5 _. {

---

---------------------------------------------------------------------------------------------------------------------
1 C' S; ~- F. W$ j聚光灯ImageField在CCK强大的灵活性基础上，任何模块都可以提供一个可重用的变量来扩展Drupal的内容类型。像文字和数字这样的变量是CCK自带的，但你同样可以增加允许上传音频和视频文件的变量，或者网站超链接等等。这些各种各样的变量类型是做为不同的项目来分别开发的，你可以到Drupal.org上的CCK分类下找到他们。 ImageField模块，项目地址是http://drupal.org/project/imagefield, 是一个专门用来提供可重用的图片处理模块，就像下图所示。
% c; r9 O/ d" c" ?  E
  ?) Y/ y- i5 H你可以把ImageField设置成可以上传多张图片的，这样你就可以在一个节点上就上传多张图片。为了一些特殊的需求，你甚至可以在一个内容类型上定义多个图片上传变量，分别上传多张图片。
配置首先启用ImageField模块，之后再到内容类型的变量管理处就会发现有新的变量类型可选。像其它的CCK变量一样，图片变量也是通过Administer→Content management→Content types (admin/content/types)这样的流程来添加。具体配置图片变量的表格你可以在下面的图中看到。 这个表单的很多选项设置是和其他的CCK变量一样的，比如标签，输入方式，是否必须，以及有几个值等等。这些变量类型的设置和其他的CCK变量一样，这些我们在之前的章节中都已经学习过。下面列出了其他的一些选项，这些都是ImageField所独有的最大分辨率如果用户上传的图片过大，那么图片会自动按照最大分辨率的设置被缩放。最小分辨率如果用户上传的图片过小，ImageField会提示用户重新上传一个更大的。文件路径文件路径选项让用户可以把图片上传到特定的文件夹内，这个文件夹的选择可以通过Administer→Site Configuration→FileSystem (admin/site configuration/file-system)来设置。为了防止用户上传的图片总是直接被放到网站文件系统的根目录下，我们最好在这个选项上都设一个值。通常，我们会为每一种内容类型都单独地设置一个目录。如果你有两个内容类型，比如“Article” 和“Blog post,”你也许会分别为它们设置文件路径images/article 和  images/blog。 标题/缺省文字如果被启用了，那么标题和缺省文字就会在用户上传图片的时候做为选项提供。用户这时候输入的值就会下出现在示例所示的位置：<img src="/files/images/sample.png" alt="Alternate text displayed here"title="Title text displayed here" width="200" height="100" />缺省文字一般都不会被用户看到，但它却仍然很重要，因为像搜索引擎之类的软件是会读取到它们的。标题则会在用户把鼠标放到图片上的时候显示的小提示出现。 默认列表值应该怎样被处理？
如果使用“Generic file display”格式来展示图片，图片就会以列表的形式出现。如果列表选项你设置的是按默认，那么刚上传的图片就会被包括在列表选项里面，而这一设置如果不是你选择了“Generic file display”是不会有效的。
9 _$ X* J9 U1 q$ |) b. T' t如果列表值你选择的是“User configurable”（用户自行配置），用户会在上传图片的时候得到列出列表值的选项。默认的图片列表如下图所示：
- _; N9 {$ u( S0 N1 a+ g# _7 |
  [5 H% R* F. m0 L, w# `% D开始动手：上传照片开始之前，我们得先做一些准备工作：创建一个用于上传照片的表单以及一些我们会用来做照片库分类的术语表。照片内容类型我们需要做的第一件事就是新建一个照片用的专门的内容类型，我们称之为Photo.这个新的类型将允许用户通过ImageField模块上传高分辨率的照片。
具体步骤：1.       依次打开Administer→Site building→Modules (admin/build/modules)，启用以下模块。• CCK package— Content— FileField— ImageField• Core – optional package 2.打开Administer→Content management→Content types (admin/content/types)通过点击“Add content type”选项卡来增加一个新的内容类型. 按照下图所示配置创建一个叫做Photo的内容类型。

Field	Value
Identification	z4 h; Y3 i' H
Name	Photo
Type	photo
Description	A photo containing a Robinson family member or friend
Submission form settings	! `+ i- d6 L1 j" u- v
Title field label . x+ Q' w- d6 I. _* A) W	Title
Body field label	Caption + ]' r/ T1 d0 |& g/ u, R7 U " _* {$ G  ^0 n9 c3 X  k; p; s

! `, F5 ^' E5 L( p5 q% e+ H" ?3.Photo类型创建好之后，你会被送到内容类型列表页面。现在我们来增加一个图片变量。点击管理变量“managefields”来操作，如下图所示。
. B: j3 i+ X/ o# X2 B1 Q0 Q

Field	Value
Label	Photo
Field name	photo
Select a field type	Image
Select a widget type	Image ; C+ l$ R' N7 j9 N! Y# s ' v$ U5 E4 ~( ]

6 e$ |# R* Q9 S: j5 E  o4.建好新的变量以后，你会看到配置这个变量的详细表单。大部分的设置项都有说明，比如最大分辨率的设置为0的时候，代表不限制上传图片的分辨率大小。因为我们要建的图片库网站应该是可以上传高分辨率的照片的，我们在这里就不限制最大分辨率了。我们设置一下，将上传的图片都放到photos子文件夹里，这样便于管理。
2 g4 d3 c" A0 ]) P: H

Field	Value
Photo settings
Permitted upload file extensions 3 R" A$ q  `3 ^- z7 w8 x4 P	jpg jpeg png gif
Maximum resolution for images	0
Minimum resolution for images	0
Path settings: File path	photos
Global settings
Required 3 j- [( }7 p0 {	Checked
Number of values	1
Default list value	Listed
How should the list value be handled?	Enforce Default
Description field	Disabled . C+ Y7 n+ T" _4 W# E* r

5.在你提交配置表单之后，你将会回到Photo内容类型的变量列表页面，我们通过拖拽调整一下变量的顺序：
• Title• Photo• Caption• Menu settings
6.到这一步我们的新建内容类型就算告一段落了，但我们想要的是用户也可以上传照片，所以我们需要设置一下注册用户的权限。去到Administer→User management→Permissions (admin/user/permissions)设置权限。在新建完成之后，可以试一下新建Photo节点，一个普通用户应该能看到和一下类似的一个表单。


" H6 P( _' e7 ]8 a+ x% ?6 n
图片库
尽管实现了上传图片的功能是个很不错的开始，但Fritz也知道几乎每一个网络相册网站都应该有更多的功能，比如把图片归类到不同相册。在我们的图片库里，Fritz意识到所谓图片库其实就是一组相片被归类到同一个种类下。这一理念正好和Drupal的核心模块Taxonomy的理念不谋而合。我们可以通过预先定义一个相册专用的术语集来实现相册薄式的归类。另外，许多网络照片分享网站都有着让用户自由地为相片加一些文字标签，这一功能我们称之为“自由标签”。这样的分类方法同样被Drupal的核心模块Taxonomy所支持。 1.打开Administer→Content management→Taxonomy (admin/content/taxonomy).
: [$ Z2 z1 {% U9 N

设置项	值
Identification
Vocabulary name	Gallery
Content types
Photo	Checked
Settings
Required	Checked
Weight	−1

! ^/ g! ~- _1 O' [5 \- T# e! o+ d( J注意
相册薄术语表的权重值应该比自由标签术语的小，这样才能保证相册薄术语表排在自由标签的前面，这对我们之后自定义翻页功能时候是必要的。3.在回到术语表管理页面之后，像前面操作的那样点击“添加术语表”把自由标签的术语表也添加进去。如下表。

Setting	Value
Identification
Vocabulary name	Tags
Content types
Photo	Checked
Settings
Tags	Checked
Weight	0 6 N, d9 @# B3 q- w. S! u+ N ) \1 `3 S  R/ b3 X

4.自由标签的术语表词汇可以在创建节点的时候逐步加入，但我们的相册薄术语表只应该允许管理员来添加词汇。点击“添加词汇”链接来为你的网站添加一些基本的相册薄术语词汇。我们只需要填写词汇名称就可以了，你可以按照下表来添加（或者按你自己的想法）
. S1 Z0 I- o) g' ^, ^; u

Term

Sunnyvale

Barcelona

Boston

Charlie’s

7 X# O/ U, J9 O  U1 [- }' Q罗宾逊一家现在能够在上传照片的时候选择相册了，新建Photo节点的时候就会看到多了一个选择相册用到下拉列表以及输入自由标签的地方。如下图

0 y& Y. \* h& V- F: A7 f: K
---------------------------------------------------------------------------------------------------------------
! H$ M( W1 S3 ?7 Y5 K
聚光灯
+ O% }6 ~* E, d, x: w( b0 j2 q4 K$ hImageCache如果你按照前面所说的步骤去操作，并上传了一张很大的图片，很有可能你已经看到网站的布局被弄乱的糟糕情况了。为了防止这样的情况发生，你可能会想把图片缩小到适合的大小，并为了列表能列出来而创建缩略图。要实现这些，ImageCache就是你想要的模块，而且它能做的还不止这些。当我们提到文件处理的时候，在Drupal的世界里我们不得不提到ImageCache这个让人兴奋的模块。尽管名字上说的只是图片缓存，但ImageCache所做的绝不仅仅是这些。事实上它可以说是一个图片处理完整工具箱，很有可能在未来的Drupal版本中我们会看到ImageCache成为Drupal核心的一员。 ImageCache将所提供的图片处理功能如裁剪，缩放，压缩等整合在一起放在image preset里面。通过叠加这些图片处理的效果，我们就能创建出各种各样的图片变换方式。下图展示了几种图片变幻的效果。
/ T; q6 M" }! J5 z& M4 s
# A9 p& Y& b. t/ DImageCache的“缓存”部分体现在图片被处理之后。图片被用各种方式处理，然后保存到一个预设效果对应的文件夹下面。通过这样的方式，图片就只被处理了一次，然后就存到了磁盘上。下图展示了ImageCache的工作流程。
) q0 M/ n5 y. Z$ d8 v: q' x
- N0 d8 ]. `% c# r) Y2 t" ?5 J预设和处理步骤ImageCache 设置页面可以通过Administer→Site building→ImageCache(admin/build/imagecache)来找到，打开页面之后你会看到页面上列出了所有已经保存的图片预设。一个图片预设开始的时候仅有一个名字，用来显示这一个预设将要完成的图片处理动作。你可以随后添加、修改、删除这些预设，还可以刷新他们。 刷新功能让你可以清除之前的预设所保存的所有临时图片。因为这些图片还会自动生成，所以你完全可以把已经生成的缩略图都删除，只不过这样做的话下一次要用到这些图的时候，系统就需要一些时间来生成它们。你可以通过刷新缓存来更新已经过期的图片。
7 H8 Z! r+ V1 \' {  F
5 `3 b" G/ T( L+ d/ x真正有趣的是当你添加新的处理动作到图片预设时才能体会到的。你可以把很多的动作都添加到一个预设中去，它们会被从上到下的被执行。只要你修改了一个预设，那么它对应的缓存会被自动刷新一次，以此保证图片是按照最新的预设动作处理的结果。这使得我们很容易就能把网站的缩略图从100像素大小的变到120像素的（或者其它任何操作）。添加一个新的预设要填写的表单如下图所示。
! W& ~$ |# v; f
由于每一个动作除了权重值的设置以外，其它的设置都是截然不同的，我们在这里就分别把最基本的动作解说一下：裁剪，改变大小，缩放以及缩放和裁剪同时进行。
- p9 f/ R% G! ~% M3 Z' [9 c3 y& D裁剪裁剪是把图片不想要的部分裁掉，留下想要的。裁剪动作可以用像素值来设置，但通常我们用到的裁剪设置主要就是顶端，右边，底部，左边以及中间。裁剪的效果如下图所示。
9 R& U; J3 Y- |# U- ?' F; y( R2 T2 d
( b7 P& w; G  [3 L+ Z改变尺寸改变尺寸可以把图片强制地转换到一个特定的像素大小。你可以设置长宽像素，也可以设置缩放比例来设置缩放的效果。通常，你会更多选择按比例压缩的方式，因为这样才能保证图片的长宽比例，而不会让图片变得像是被挤压过一样。
: ]5 E& v. t) ]' ~* i2 ?
按比例缩放
顾名思义，按比例缩放就是把图片按照特定的比例放大货缩小。和改变大小不一样，你需要输入一个长或宽的值来设置缩放大小。没有设置值的就会按照保持比例的情况下应该有的值来设置。如果长和宽的值都设了，那么图片就会在保持比例的前提下自动适应到最小的长或宽下。
# L+ J7 m/ N! d0 ^
6 p( z( ^3 X( Y8 H$ J如果你的网站需要图片不小于某一个尺寸，那么你可以勾选自动放大图片以适应需要的尺寸选项。按比例缩放会始终保证图片的长宽比不变。最终效果如上图。 缩放和裁剪顾名思义，缩放和裁剪是两个动作的组合。这个动作的效果是，图片会首先缩放到适应某一个维度值，然后长出的部分就裁掉。这个动作在生成一些需要保证图片长宽比而给出的图片长宽比又不一样的缩略图时会很有用。这个动作的效果如下图。
6 I$ `0 ?  E# h
0 N8 R; k( F$ p% ]其实还有很多这里没有提到的图片预设动作，它们还会被不断更新。你可能会用到的一些动作包括：旋转，水印，边框，文本替换，亮度以及透明度。要想看到完整的动作列表，你可以到ImageCache的项目主页查看http://drupal.org/project/imagecache，要想可以扩展出更多的预设动作，你需要安装ImageCache Action模块，在这里可以找到：http://drupal.org/project/imagecache_actions.。 使用预设 在你设置好一些图片预设之后，你需要告诉Drupal这些预设应该被用在什么地方。ImageField 和 FileField可以把图片按照全像素来展示或者文件列表的方式展示。在我们设置好一些预设之后，更多的展示选项就会自动列出，供我们选用。 CCK格式典型的图片展示方式是由CCK格式来提供的，就如下面列出的那样，我们可以选择它们来展示图片，现在我们有了ImageCache,我们会拥有更多的选项。[preset name] image linked to node按照预设的大小来展示图片，图片链接到所在节点。[preset name] image linked to image按照预设的大小来展示图片，图片链接到图片的尺寸完整版。[preset name] file path显示图片存放的路径，一般用于调试。 [preset name] URL显示图片的外链地址，一般用于调试

手动查看预设的图片你可以通过输入对应的地址来查看图片被处理之后的样子，如下图：
; Z/ H, N6 s" p0 t+ w+ N0 f4 C; |
& h5 X& P  U  r7 V: o; R# H# xImageCache使用中可能遇到的问题ImageCache使用了多个高级的PHP和Apache特性，比如URL重写和GD图片库。因为它的软件要求很高，任何小的误用都会导致模块崩溃。一下列出了ImageCache使用过程中经常会遇到的一些问题。检查简洁地址（Clean URL）最经常遇到的问题就是简洁地址被禁用，一般是因为服务器不允许地址被改变。打开Administer→Site configuration→Clean URLs(admin/settings/clean-urls)，


如果你也收到同样的警告，要么放弃配置简洁地址，要么查看http://drupal.org/node/15365获得更多关于配置服务器的帮助。 检查GD库另一个经常遇到的问题就是服务器缺少GD图片库。当你手动地访问某个图片的预设图片却什么也看不到的时候，就是GD图片库在作怪了。GD是一个在PHP安装的时候就自动被安装的软件包，但有些时候如果你选择了自定义安装PHP，可能就会漏掉安装它。你可以打开以下地址查看GD是否被正常安装：Administer→Reports→Status report (admin/reports/status).你可能会看到和上图类似的警告。动手试一试：ImageCache在前面介绍到的模块帮助下，我们现在可以上传并分类照片了，但是把照片按照完整分辨率大小一个一个杂乱地显示在网站上，远不是罗宾逊一家想要的结果。我们需要生成缩放的图片来展示在页面上，同时保留完整大小的图片。首先我们会设置ImageCache为我们生成缩略图，然后利用这些缩略图来制作我们的页面。1.首先查看Clean URLs是否被禁用：Administer→Site configuration→CleanURLs (admin/settings/clean-urls).2．打开模块列表，启用以下模块：• ImageCache— ImageAPI— ImageAPI GD2— ImageCache— ImageCache UI 创建ImageCache预设让我们创建一些用于缩放图片的预设：第一个是把图片缩放到120像素宽的缩略图，第二个是把图片缩放到用于在相应节点页面显示的大小（为了保证网页布局不被撑破，宽度最好不要超过480像素）1.  打开ImageCache设置页面Administer→Site building→ImageCache(admin/build/imagecache)。点击添加预设。2.  在预设名称处输入“thumbnail”，然后点击创建新预设。之后你会进入预设的配置页面，如下图：

1 Y8 r4 w1 Z  j* [0 g3.  在配置页面上，选择Add Scale And Crop这个动作，将长和宽都设置为120像素，点击完成。
* |+ N4 f) P4 l. E# O; Z% j
* g* D9 q, O9 C* p- E
4.现在我们的缩略图预设就完成了，回到ImageCache管理页面Administer→Site building→ImageCache (admin/build/imagecache)，点击“添加新预设”再把“预览”(Preview)加入预设。5.  设置“预览”的最大宽度为480像素。具体设置如下表：

Setting	Value
Weight	0
Width	480
Height	Leave Blank
Allow Upscaling	Unchecked

2 F8 U1 j9 j0 w) j( Z这下子我们就把两个预设都搞定了，一个用来在列表中显示图片，一个用来在节点详细页面显示。 配置照片变量显示方式尽管我们已经设置好了两个图片预设，但是我们的照片仍然是以完整的分辨率在显示着。我们需要配置照片内容类型来使用我们新设定的预设：1.       打开照片内容类型的管理页面Administer→Contentmanagement→Content types (admin/content/types)，点击修改类型。进入修改界面以后，点击“Display fields”选项卡(admin/content/node-type/photo/display).2.  按照下表的参数设置图片变量。

Image	Setting
Label	<Hidden>
Teaser	thumbnail image linked to node
Full node	preview image linked to image

+ b/ t9 q' Z! S9 b  {9 H现在我们已经设置好Photo内容类型并且把它和ImageCache的预设绑定起来了，是时候休息一下，试着上传一些图片吧。上传了几张图片之后，你的主页应该会变成下面那样了。
" Z# H9 Y9 X' K: D1 S1 g, P
& d$ E) L% }% H! Q0 G' r$ F改善图片质量如果你仔细看一下刚才我们生成的预览图，你会发现其实这些图实在不怎么清晰，有点过度压缩了。ImageCache使用ImageAPI模块来处理JPEG图片，它的默认压缩比率是75%。增加这个比率能够为我们产生质量高出许多的图片，具体步骤如下：1.       打开ImageAPI的设置页面Administer→Site configuration→ImageAPI (admin/settings/imageapi)，点击“设置”选项卡。2.       把JPEG的质量设为90%或者更高，然后保存设置。3.       要看到效果，先去到ImageCache的管理页面。4.       把每一个预设的缓存都清除一遍，这时新的缩略图就会被生成了。

---------------------------------------------------------------------------------------------------------------------------
5 F) C' u% S/ w" w动手试一试：Gallery View我们现在已经把上传图片的基本流程走完了，上传后的图片显示的也那么难看了。我们的网站现在的缺陷就是那些缩略图在同一个页面显示的时候排版很不好看。如果我们能让这些缩略图像网格图一样的显示，让许多的图片集中显示在一个不大的区域，那真是太棒了。为了做到这一点，我们可以用Views模块新建一个视图。当我们完成设置的时候，网站应该会变成下面这个样子：
* K% ~2 |7 B6 q
' W0 @. q9 _- M4 J9 P- G$ E% }
1.  打开模块页面，启用以下模块： • Other— Advanced Help• Views— Views— Views UI 2.  打开Views模块管理页面，添加新视图。

Field	Value
View name	gallery
View description	A gallery display of images
View type	Node

6 V7 P2 w3 [. \; d' H+ \3.  按照下面给出的参数，配置新的视图。

Defaults: Basic settings	Value
Title	Galleries
Style	Style: GridNumber of columns: 4Alignment: Vertical
Use pager	Full pager
Items per page	20
More link	Create more link: Checked
Empty Text	No photos yet!

& u- F) y- y- f6 m1 D4.  找到视图设置里的变量设置，点击+ (加号)图标，选中“Content:Image: Image (field_photo)”然后点击添加。按照下表来设置变量。

Defaults: Fields	Values
Content: Image: Image (field_photo)	Format: thumbnail image linked to nodeLabel: None

  5.  因为我们只想让已发布的照片显示在列表上，我们需要加一些过滤条件。点击过滤条件区域的+加号，选中以下过滤器，然后点击添加：• Node: Published• Node: Type• Taxonomy: Vocabulary 6.  用下表列出的参数来配置变量，然后点击更新。

Defaults: Filters	Field Value
Node:	Published Check “Published”
Node:	Type Is one of “Photo”
Taxonomy:	Vocabulary Is one of “Gallery”

  7.       为了让照片以适当的方式排序，我们这里选择把最新的图片排在前面。在排序方式区域，点击+（加号），然后添加“Node: Post date.”做为排序条件。8.  当这些都设置完以后，你的视图设置页面就应该变成下图这样了，这时候把视图保存好吧
) {4 v) M7 `# I' P2 w2 ~) [3 ]

; S1 M6 @" k* x1 C, I* t3 ?

图库视图这时候就完全配置好了，你可以点击预览先查看那一下效果，你的预览图应该是这样的：

但是别高兴的太早，这个视图现在还不会在网站上的任何地方出现，而且所有的照片都还未被归类到对应的相册。为了解决这个问题，我们要添加一个新的视图页面：1.  如果这时你的页面已经没有停留在视图页面了，你可以打开Administer→Site building→Views (admin/build/views)，然后点击gallery视图重新打开我们刚才编辑的视图页面。2.  在左边的显示方式下拉列表上，选择Page(页面)，然后点击“Add display”（“添加显示方式”）按钮。3.  为我们的页面赋一个URL地址和一个菜单项，找到页面设置区域，按下表的参数设置

Page: Page settings	Values
Path	gallery
Menu Type:	Normal menu entry
Title:	Galleries

4.为了选择性地展示某一个相册内的照片，我们的页面视图将会使用一个参数。点击参数区域的+（加号）按钮，选中术语ID，然后保存。按下表的参数配置参数设置，然后点击更新。

Page: Arguments	Values
Taxonomy: Term ID	Title: %1Action to take if argument is not present: Summary, sorted ascendingValidator: Taxonomy termVocabularies: GallerySet the breadcrumb for the term parents: Checked

5.你现在会看到许多需要设置的选项，点击update来选择默认设置。6.完成之后，视图配置页面会像下图那样。你会发现从默认设置继承而来的参数都用灰色斜体来表示，而重写过的参数则不是斜体的。7.点击视图配置页面的保存按钮来让之前的设置都生效。

% r4 A2 V. c4 r  M! T" v2 a
这是我们图库的总览版，这是当我们直接访问gallery这一地址的时候看到的，在地址里没有包含更多参数。随便点击一个相册，页面地址就会变成gallery/(term id)，这里的(term id)是相册薄术语项所对应的ID。一旦选择了某一个相册之后，你会看到与之前类似的一个效果，主要不同之处是浏览器的页面标题被替换成了相册薄名称。 动手试一试：最新照片区块尽管我们的照片视图已经比较漂亮了，但我们的主页比起需求来说还少了些东西。让我们再添加一个可以实时显示最新上传的图片的区块，让我们的首页变得更受欢迎。为了加快进程，我们只需要复制刚才配置的图库视图，在它的基础上做一些微调。完成之后，首页会变成下面这样。
  O1 E5 Q* i( I7 t6 M7 q
1.  打开视图管理页面Administer→Site building→Views (admin/build/views)。2.       在gallery视图对应的行上，找到“克隆”链接，复制出一个我们将用于修改的视图。3.       用下表参数配置新的视图。
) h5 @: j6 v- }+ `+ n

Field	Value	$ z- p2 O) M+ N; e# ?* E! _
View name	latest_photos		0 X* ?, \. M  [* k9 y0 e# G2 H
View description	A list of the latest photos on the site

6 d* U& p3 ~2 q! C  B: D: f4.点击下一步来开始编辑我们克隆的视图。我们不再需要页面视图，所以我们点击左边的页面视图选项卡，点击“删除显示方式”的按钮，然后保存以使设置生效。5.       我们也不再需要术语表的过滤条件，在过滤条件区域，删除之。6.       把视图名称改为“最新照片”。7.       为视图添加一个区块。8.       在区块的设置区域，把区块名称改为“最新照片”，这可以方便我们在区块列表里快速找到这个区块。9.       保存视图，使其生效。 这个新的视图给我们提供了一个可重用的区块，我们会把这个区块设置成只在首页上显示。1.打开站点信息页面：Administer→Site configuration→Siteinformation (admin/settings/site-information)。2.把默认首页地址“Default front page”设置从node 改为node/1，保存之后我们的首页将被设为节点1的页面。3. 打开区块管理页面：Administer→Site building→Blocks (admin/build/block)。4.把“最新照片”区块拖到“Content bottom”区域下，保存。5.现在你会发现每一个页面的底部都会出现最新照片区块，我们再设置一下“最新照片”区块，将其限定为只在<front>（首页）上显示。 罗宾逊一家的照片分享网站现在已经看起来很不错了。我们把照片缩放到两种不同的尺寸，以一种好看的图库形式给用户展示出来，如果需要，我们还决定一些照片区块何时放到网站的何种位置。动手试一试：自定义翻页 如果说网站做到这里还有什么地方是缺乏为用户考虑的话，那问题一定是出在照片查看页。要想看完一个列表里的图片，用户需要点击某一张照片，然后点击返回，再点击下一张……如果我们在照片查看页加上向前翻页和向后翻页的按钮，这个流程是可以被大大简化的。自定义分页模块(打开http://drupal.org/project/custom_pagers)可以为任何的视图（比如我们的图库视图）的节点页面创建简单的翻页功能，可以向前或向后翻看视图内的节点。下图就是我们完成设置以后的样子：
- x# C, a" d5 {( t9 M0 X+ o: h
% H$ k+ j5 Y# x) f5 o. W0 G3 l
+ S8 X4 \; t/ A2 s% O$ b
6 V& [% A9 @6 g3 C8 k$ m1.打开Administer→Site building→Modules (admin/build/modules)，启用以下模块：• Other package— Custom Pagers— Token
& C2 M; d  A$ a# J2.打开自定义分页的管理页面：Administer→Site building→Custom pagers (admin/build/custom_pagers)。
8 _7 {4 |. D6 i3.在管理页面的底部点击“添加新的页面分页”链接。
4 h" D0 A; P3 {: y0 D4.按照下表的参数设置页面分页。

Custom Pager Setting		Value
Title		Other photos in [term]
Pager position		In a sidebar block
Pager visibility	! V% w; @" \9 }$ g
By node type		Photo
Pager node list		- U7 y- g& h9 _) _
Use a view		gallery
View arguments		[term-id]

2 ~4 `2 u( v3 E% x* q% a' R5.现在我们已经设置好了一个页面分页，它将以一个专门的区块的形式出现，你可以在区块管理页面分配区块显示的位置。
6.找到“Other photos in [term]”区块，把它分配到“左边栏“区域。7.点击保存以使配置生效。 锦上添花如果你已经跟随我们走到这一步了，那么你已经成功地创建了一个基于Drupal的图片库网站了！但我们没有必要就此罢手，用Drupal来建站的一大魅力就是你可以不断地用新的点子来改善网站。接下来这一部分主要介绍了图片分享网站都会有的一些额外功能。社区标签看起来很像自由标签，只不过它允许所有有足够权限的用户来把标签贴到内容上，本来这些都是只有管理员才能干的事。在你安装好社区标签（Community Tags）模块之后，启用并开始生效是很简单的工作。 社区标签和标签云是结合起来很酷的功能。使用Tagadelic 来创建标签云非常简单，Tagadelic提供了一个能够展示当前最流行的术语词汇的区块。许多的最受欢迎的术语会在标签云里面以较大的字体显示出来，就像下图一样。
8 }. W9 e1 D) B- P; V9 M
. T( f4 ^- r! I6 a9 e1 y
( m6 I3 X4 n) f2 W8 p6 S/ w1 d. R
在罗宾逊一家的照片分享网站上，图库页面已经可以很漂亮的用缩略图来显示照片了，但是当用户点击了某一个术语表词汇的时候，他会被定位到一个仍然只是简单地依次把图片显示出来的页面，这意味这我们所做的努力并没有在这里生效。最好的解决办法就是使用Taxonomy Redirect模块去到地址为gallery的页面而不是taxonoomy/term页面。这样一来，所有，我们的词汇所指向的页面也会以缩略图的方式来显示了。 下面列出了我们在这一章中用到所有模块：• Community Tags module: http://drupal.org/project/community_tags• Content Construction Kit (CCK) module: http://drupal.org/project/cck• Custom Pagers module: http://drupal.org/project/custom_pagers• ImageCache module: http://drupal.org/project/imagecache• ImageCache Actions module: http://drupal.org/project/imagecache_actions• ImageField module: http://drupal.org/project/imagefield• Tagadelic module: http://drupal.org/project/tagadelic• Taxonomy Redirect module: http://drupal.org/project/taxonomy_redirect• Token module: http://drupal.org/project/token• Views module: http://drupal.org/project/views
$ {4 H8 b9 _' c( j

" _: _4 {+ K" Y6 A( o4 @; X



本文由国外设计论坛www.guowaisheji.com进行合并整理，原出自来来克克博文http://blog.sina.com.cn/s/blog_6dd99e6f0100n9r0.html 感谢原作者！！！


& t3 e/ D2 F9 U1 j2 L7 i; s
6 O( [" O$ \) p% A
4 s/ u# |2 r# i6 e  W( m! d