图片样式（Image Style）在Drupal 6版本的时候，叫做Image Cache，进入Drupal 7内核以后，改了名字。这个模块是用来做什么的？简单一点说就是用来自动裁切图的，它能够把一个原始的图片，按照预先设置的规则，自动裁切成对应的大小。我们去当当网站看一下，一本图书的封面图片，它在图书的详细页面和列表页面中对应的大小是不一样的，如果为列表页面、详细页面分别上传对应的图片，理论上也是可以的，但是工作量会非常大，也不现实。详细页面的图片如图3-23所示。
列表页面的图片如图3-24所示。
边栏中的图片如图3-25所示。
Drupal核心自带的图片样式模块允许我们为图片定义不同的样式，当显示图片时，只要选择不同的样式，就会显示不同的大小，这样我们就可以只上传一张图片，同时在图书的详细页面、列表页面、边栏列表中使用了。
现在导航到图片样式的管理界面，“首页 ? 管理 ? 配置 ? 媒体 ? 图片样式”路径为admin/config/media/image-styles，如图3-26所示。我们会看到Drupal核心定义的样式：thumbnail、medium、large，还有第三方模块Ubercart定义的样式：uc_cart、uc_product、uc_product_full、uc_product_list、uc_thumbnail。
这里的样式名称都是包含相应的语义的，但是在实际的项目中，我更喜欢如200_200、100_100、50_50 这样的命名。当然也可以使用系统自带的样式。
现在让我们添加一个新的样式50_50。单击列表上面的“添加样式”链接，进入对应的表单页面，如图3-27所示。
在这里输入50_50（注意，也可以输入数字，这里的中文翻译不是很确切）。然后单击“创建新样式”按钮，进入图片样式的配置页面，在这里我们可以为这个样式添加多个效果，如图3-28所示。
Drupal核心自带的图片效果（操作）有：裁切、去色、改变尺寸、旋转、缩放、比例缩放并裁切。
“裁切”的效果（设置：100×100，从中心裁切）如图3-29所示。
“去色”的效果如图3-30所示。
“改变尺寸”的效果（设置100×100）如图3-31所示。
顺时针“旋转”90度的效果如图3-32所示。
“缩放”的效果（设置100×100）如图3-33所示。
“缩放并裁切”的效果（设置：100×100）如图3-34所示。
Drupal核心里面，我最喜欢用的图片效果就是“缩放并裁切”，很实用。在这里，对于样式50_50，我们为其添加“缩放并裁切”效果，具体配置如图3-35所示。
在配置表单中，将其配置为50×50。
以实例中的图片为例，首先进行缩放，从800×600缩小到66.67×50，接着它会把66.67的宽度从两边裁切成50，最后便得到了50×50的图片。
我们采用同样的方式，依次添加图片样式100_100、200_200，同样采用“缩放并裁切”的方式，分别配置为100×100、200×200。
我们这里的配置可以在多个地方用到，例如在图片字段的管理显示中，以及在Views中，当然也可以通过代码来调用自定义的样式。我们来看一下字段的管理显示里面的配置。导航到图书内容类型的管理显示页面，“首页 ? 管理 ? 结构 ? 内容类型 ? 图书 ? 管理显示”，如图3-36所示。
此时显示的是原始图片，我们可以单击最右边的配置按钮，这样就会显示出对应的配置表单，如图3-37所示。
在“图像样式”里面选择我们刚才定义的100_100，然后单击“更新”，最后单击“保存”。这个时候，如果我们再次访问“平凡的世界”会发现，封面图片明显变小了，如图3-38所示。
如果用鼠标右击检查图片的属性，会发现图片大小为100×100，如图3-39所示。
通过图片的地址我们会发现，其实系统为我们自动创建了一个新的图片，这个新的图片的地址为sites/default/files/styles/100_100/public/pingfandeshijie.jpg。
对于每一个我们定义的样式，系统都会为其在sites/default/files/styles下面创建一个子目录，这里就是100_100；public表示这是一个公共文件，而不是私有文件；再往后面就是原始文件在sites/default/files下面的路径。这个新的图片只会创建一次，下次用到时，系统会检查这个图片是否存在，如果存在就直接调用，如果不存在，系统会按照图片的样式规则生成这样的一个图片。
我们把详细页面的图片样式改为200_200，这是实际当中我们要使用的。
至此，已经圆满实现了想要的功能。不过美中不足的是，裁切会把图片的一部分裁切掉，有时候这并不是我们想要的效果，或者说有时候，客户想保留图片的全部信息，这个时候我们可以采用缩放。比如配置仍然为50_50或100_100。但是我们在前面的示例中也看到了，缩放到100_100，实际并不能得到一个100×100大小的图片，一个800×600的图片，最终缩放得到的是100×75大小的图片。
对比当当网站上的图片会发现，我们想要的操作应该是这样的：首先，把图片缩放到100_100，其次，添加一个100×100的白色背景图片。这样最终得到了一个100×100大小的图片，而且也保留了图片的所有信息。
但是Drupal核心并没有提供添加背景图片的效果，这不要紧，有第3方模块可以实现这样的功能。这就是imagecache_actions模块，它提供更丰富的图片效果，比如水印、背景、圆角、高亮、覆盖层等。
我们下载最新的稳定版本7.x-1.0，安装并启用Imagecache Actions、Imagecache Canvas Actions。
现在让我们编辑图片样式50_50，此时会看到，Imagecache Actions模块为我们新增了多个图片效果，里面就包含我们将要用到的背景效果，如图3-40所示。
1）删除原来的效果“比例缩放并裁切 50×50”。2）添加效果“缩放 50×50（不允许放大）”，如图3-41所示。
3）添加效果Underlay (background)，配置如图3-42所示。
我们对图片样式100_100、200_200进行同样的操作，将图片效果从“缩放并裁切”改为“缩放、加白色背景”。
以100_100为例，最后的效果对比如图3-43所示。
我们保留了图片的全部信息，并且图片大小完全符合预期。Imagecache Actions模块所包含的其他图片效果在这里就不逐一讲解了。只要我们不断实践，就能够逐渐找到更好的解决办法。
相关资源：七夕情人节表白HTML源码(两款)