国外设计欣赏网站 - DOOOOR.com

 找回密码
 注册

QQ登录

只需一步,快速开始

扫一扫,微信登陆

搜索

[Drupal教程] 如何在Drupal 7中创建图片库[CTools & Views]

[复制链接]
发表于 3-25-2013 20:49 | 显示全部楼层 |阅读模式

此教程将教你如何在Drupal7中创建一个图片库。

- x: \' u" M4 d( U( K

这个不会创建一个世界上最耀眼或令人难忘的图片库,但是它能够运行。此教程是为初学者设计的所以他们在Drupal 7中创建图片库时需要理解一些关键的概念。

+ \5 d$ n; `4 j; h. y0 p$ ]/ d \! c8 x

如果你仍在用Drupal 6, 我们也有个教程(JD译站注:英文的).

1 f$ H( T* H' G; Q

1: 安装所需模块

! H9 t$ S+ U1 _& P9 q

你需要安装并启用以下模块:

0 X* ~" {+ R$ M5 P0 H

CTools: http://drupal.org/project/ctools
Views: http://drupal.org/project/views

6 Z& ` ]9 H# W2 H4 G

2: 创建一个内容类型

) \+ r( O4 V" e/ d8 O% I! E { r

首先, 我们将设置一个Photos(图片)内容类型.前往 Structure > Content types > Add content type 并为图片库创建新的内容类型。

% S0 ^+ B% O9 @2 o

3 x( A0 c& |; S) {, z% h

3: 添加一个图片字段
! N; W+ E% ]2 h& E! m

现在我们需要添加一个图片字段到我们新创建的内容类型,这样我们就可以上传图片了。前往 Manage Fields(管理字段) 并创建一个图片数据类型字段.


   4: 上传图片
0 P7 k8 W9 k o

这里有很多种方式通过上传图片来填充图片库。

5 i3 i6 t. i# W

你可以Add content > photos 并通过手动上传图片
你可以使用Devel模块来自动生成图片: http://drupal.org/project/devel.
你可以使用例如Feeds导入模块: http://drupal.org/project/feeds.

   5: 创建视图

2 ~2 b Y1 D4 U* e7 H" l

前往 Structure > Views > Add new view 并让我们设置视图:

; e$ O7 p9 f6 ?0 Q. v) D7 Q

给你的视图一个名称:Photo Gallery.
选择显示的内容类型为Photos.
选中创建一个页面.
选择“网格”格式显示并选择“字段”.
选择要在网格中显示的图片数量: 12 是本教程中使用的.
点击 Continue & edit.
向下滚动并预览你的图片库. 唯一缺少的?图片.

- Q) r- t# L* `; I. e; _" H0 t



   6: 改善视图

6 k2 d2 f: T7 S/ _* x4 A! `2 {

让我们为视图添加图片. 点击“字段”旁边的add(添加)。

5 n$ L% a, k' R2 |2 o


搜索并选择我们先前创建的图片字段.

点击两次 Apply (all displays) . 现在你可以在页面底部预览到图片库,唯一不那么正确的就是图片是不同尺寸的。

   7: 调整图片

3 O/ |, c3 x& R( [3 T

Drupal本身可以自动调整图片尺寸, 让我们看看如何做.

& o7 i' K5 W; T8 m. j P

前往 Configuration > Image styles > Add style.
输入一个新的调整选项名称.
点击Create new style(创建新的样式).

你可以看到图片调整的预览效果,当前无任何变化。

在页面底部,选择Scale and crop(缩放并裁剪)。
点击 Add.

选择图片的宽度和高度. 在此例中我们有4张图片横穿页面, 所以我们选择一个宽度来适应页面. 点击 Click Add effect 完成设置.

你现在可以看到调整图片的新预览。

现在让我们应用调整的图片

/ f3 ?! P8 p* P# ]1 c; W: q* q, u

前往 Structure > Views > Photo Gallery > edit.
点击图片字段旁的设置.你现在可以前往Image style(图片样式)并选择你之前创建的样式。
你也可以取消Create a label(创建一个标签)选项框,这样字段的名字将不会显示.
点击 Apply (all displays).

点击Save来完成你的视图,前往你的网站首页查看吧。瞧!你的Drupal 7 图片库完成了!

# A5 R& j, k) E0 P I

本文选择:http://www.cn4jd.com,谢谢!

6 P- O3 Z1 O2 i6 h

|2011-2026-版权声明|平台(网站)公约|手机版|手机版|DOOOOR 设计网 ( 吉ICP备2022003869号 )

GMT+8, 12-19-2025 19:03 , Processed in 0.344572 second(s), 23 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表