《Drupal实战》——3.2 设置图片样式

简介: 本节书摘来自华章计算机《Drupal实战》一书中的第3章,第3.2节,作者 葛红儒,更多章节内容可以访问云栖社区“华章计算机”公众号查看。

3.2 设置图片样式

图片样式(Image Style)在Drupal 6版本的时候,叫做Image Cache,进入Drupal 7内核以后,改了名字。这个模块是用来做什么的?简单一点说就是用来自动裁切图的,它能够把一个原始的图片,按照预先设置的规则,自动裁切成对应的大小。我们去当当网站看一下,一本图书的封面图片,它在图书的详细页面和列表页面中对应的大小是不一样的,如果为列表页面、详细页面分别上传对应的图片,理论上也是可以的,但是工作量会非常大,也不现实。详细页面的图片如图3-23所示。

image

列表页面的图片如图3-24所示。

边栏中的图片如图3-25所示。

image

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。

image

这里的样式名称都是包含相应的语义的,但是在实际的项目中,我更喜欢如200_200、100_100、50_50 这样的命名。当然也可以使用系统自带的样式。

3.2.1 添加样式50_50

现在让我们添加一个新的样式50_50。单击列表上面的“添加样式”链接,进入对应的表单页面,如图3-27所示。

image

在这里输入50_50(注意,也可以输入数字,这里的中文翻译不是很确切)。然后单击“创建新样式”按钮,进入图片样式的配置页面,在这里我们可以为这个样式添加多个效果,如图3-28所示。

image

3.2.2 图片效果

Drupal核心自带的图片效果(操作)有:裁切、去色、改变尺寸、旋转、缩放、比例缩放并裁切。

“裁切”的效果(设置:100×100,从中心裁切)如图3-29所示。

image

“去色”的效果如图3-30所示。

“改变尺寸”的效果(设置100×100)如图3-31所示。

顺时针“旋转”90度的效果如图3-32所示。

image

image

“缩放”的效果(设置100×100)如图3-33所示。

image

“缩放并裁切”的效果(设置:100×100)如图3-34所示。

Drupal核心里面,我最喜欢用的图片效果就是“缩放并裁切”,很实用。在这里,对于样式50_50,我们为其添加“缩放并裁切”效果,具体配置如图3-35所示。

image

在配置表单中,将其配置为50×50。

以实例中的图片为例,首先进行缩放,从800×600缩小到66.67×50,接着它会把66.67的宽度从两边裁切成50,最后便得到了50×50的图片。

我们采用同样的方式,依次添加图片样式100_100、200_200,同样采用“缩放并裁切”的方式,分别配置为100×100、200×200。

3.2.3 图片样式的用途

我们这里的配置可以在多个地方用到,例如在图片字段的管理显示中,以及在Views中,当然也可以通过代码来调用自定义的样式。我们来看一下字段的管理显示里面的配置。导航到图书内容类型的管理显示页面,“首页 ? 管理 ? 结构 ? 内容类型 ? 图书 ? 管理显示”,如图3-36所示。

image

此时显示的是原始图片,我们可以单击最右边的配置按钮,这样就会显示出对应的配置表单,如图3-37所示。

在“图像样式”里面选择我们刚才定义的100_100,然后单击“更新”,最后单击“保存”。这个时候,如果我们再次访问“平凡的世界”会发现,封面图片明显变小了,如图3-38所示。
     
image

如果用鼠标右击检查图片的属性,会发现图片大小为100×100,如图3-39所示。

image

通过图片的地址我们会发现,其实系统为我们自动创建了一个新的图片,这个新的图片的地址为sites/default/files/styles/100_100/public/pingfandeshijie.jpg。

对于每一个我们定义的样式,系统都会为其在sites/default/files/styles下面创建一个子目录,这里就是100_100;public表示这是一个公共文件,而不是私有文件;再往后面就是原始文件在sites/default/files下面的路径。这个新的图片只会创建一次,下次用到时,系统会检查这个图片是否存在,如果存在就直接调用,如果不存在,系统会按照图片的样式规则生成这样的一个图片。

我们把详细页面的图片样式改为200_200,这是实际当中我们要使用的。

3.2.4 Imagecache Actions模块

至此,已经圆满实现了想要的功能。不过美中不足的是,裁切会把图片的一部分裁切掉,有时候这并不是我们想要的效果,或者说有时候,客户想保留图片的全部信息,这个时候我们可以采用缩放。比如配置仍然为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所示。
    
image

3)添加效果Underlay (background),配置如图3-42所示。

image

image

我们对图片样式100_100、200_200进行同样的操作,将图片效果从“缩放并裁切”改为“缩放、加白色背景”。

以100_100为例,最后的效果对比如图3-43所示。

image

我们保留了图片的全部信息,并且图片大小完全符合预期。Imagecache Actions模块所包含的其他图片效果在这里就不逐一讲解了。只要我们不断实践,就能够逐渐找到更好的解决办法。

相关文章
|
5月前
百度ueditor修改默认字体和大小
百度ueditor修改默认字体和大小
|
6月前
|
缓存 Java Maven
为网站设置欢迎页面和自定义网站的图标教程~
为网站设置欢迎页面和自定义网站的图标教程~
uniapp设置背景图效果demo(整理)
uniapp设置背景图效果demo(整理)
|
7月前
|
JavaScript
文字、图片左右无缝滚动效果--支持拖拽js效果demo效果示例(整理)
文字、图片左右无缝滚动效果--支持拖拽js效果demo效果示例(整理)
|
前端开发
前端搭建博客记录-设置背景图片全屏
前端搭建博客记录-设置背景图片全屏
65 0
ckeditor 3.6.2版本,设置图片上传后自适应宽高。
ckeditor 3.6.2版本,设置图片上传后自适应宽高。
156 0
zotero翻译、界面、笔记字体大小设置
zotero翻译、界面、笔记字体大小设置
zotero翻译、界面、笔记字体大小设置
|
JavaScript
FlexPaper控件实现文档的上传和预览
FlexPaper控件实现文档的上传和预览
66 0
FlexPaper控件实现文档的上传和预览
在不同的页面上显示不同的Joomla模板样式
模板样式是Joomla中非常强大的功能。它们允许您将同一模板的不同版本分配给特定页面。 在本教程中,我将向您展示如何分配两种模板样式。我们将为主页分配一种样式,为站点的其余部分分配另一种样式。 第1步.复制模板样式安装模板时,默认情况下会生成单个模板样式。
|
移动开发 程序员
好程序员教程之配置H5的滚动条样式示例代码
好程序员教程之配置H5的滚动条样式示例代码
1101 0