Kết hợp CCK, Imagefield, ImageCache tạo Ảnh thu nhỏ ở bản cắt, ảnh lớn ở bản đầy đủ

Update 1: Bài này viết cho Drupal 5

Các module cần thiết: (xem ảnh 001)
1. CCK: Tất nhiên là kiểu nội dung của bạn cần một field để upload hình ảnh lên.
2. ImageField: Cung cấp field hình ảnh cho kiểu nội dung.
3. ImageCache: Hỗ trợ cho ImageField, tự động tạo ảnh thu nhỏ khi người dùng upload, ...
Cấu hình ImageCache
1. Vào trang cấu hình cho ImageCache: ?q=admin/settings/imagecache
2. Tạo một preset cho ImageCache (tương tự ảnh 002). Ở đây tôi đặt tên cho preset là `ic`, và thêm vào thao tác là resize với độ rộng = độ cao = 150px
3. Chúng ta vào folder root của bản cài đặt drupal, vào folder `files`, tạo folder con là `imagecache`, vào folder imagecache vừa tạo, tạo folder `ic` (Tương ứng với với tên của preset mà bạn đặt ở bước 2.2, ở bước trên tôi chọn `ic`)
Thiết lập kiểu nội dung: Ở đây chúng ta áp dụng chức năng này cho kiểu nội dung Article, các kiểu nội dung khác tương tự.
1. Theo mặc định, drupal tạo sẵn 2 kiểu nội dung là `page` và `Story`, chúng ta cần tạo thêm kiểu nội dung mới
  1. Vào trang ?q=admin/content/types
  2. Nhấp trái chuột vào tab Add Content Type.
  3. Trong biểu mẫu (form) tạo kiểu nội dung mới, chọn Name là `Article`, chọn Type là `article`, các phần còn lại thì tùy ý.
2. Tạo trường (field) hình ảnh cho kiểu nội dung Article
  1. Làm lại bước 3.1.1
  2. Nhấp trái chuột vào dòng có Name là `Article`
  3. Ở trang mới, nhấp trái chuột vào tab `Add field`,
  4. Ở Create new field, chọn Name là `image`, Chọn Fieldtype là Image -> Image
  5. Form mới hiện ra, cứ để các thiết lập mặc định (bạn muốn thay đổi cấu hình sao cũng được) rồi lưu cấu hình cho trường `image` lại.
3. Thiết lập cách trình bày hình ảnh
  1. Mở trang ?q=admin/content/types/article/display
  2. Ngang với dòng `image`, chọn Teaser là `ic`, chọn Full là `Default`

Bây giờ bạn thử tạo một trang nội dung `Article` xem sao (xem ảnh 003 và 004)?

:-)

Thế Hồng

Ảnh 001

Ảnh 002

Ảnh 003

Ảnh 004

Comments

Thu, 06/26/2008 - 16:50 — hack2learn

Lam sao minh de phan body

Bài viết rất hay. Tiện đây mình có 1 câu hỏi như sau:
Làm sao mình đưa 1 phần body (nội dung bài viết) nằm bên phải Image Attach vậy bạn?
Bạn có thể cho mình 1 số solutions không?Tks

Fri, 06/27/2008 - 20:43 — thehong

Bạn xem HTML source code

Bạn xem HTML source code để biết class của ảnh muốn trôi sang trái/phải, rồi viết một đoạn CSS tương tự như sau, giả sử class của ảnh của bạn là "your-img":

<style>
.your-img {
  float: left;
}
</style>

Thay left thành right nếu muốn ảnh trôi sang phải.

Thế Hồng

Tue, 07/29/2008 - 10:48 — Dzung Nova (not verified)

Với Drupal 6?

Đây là dành cho drupal 5. Vậy với Drupal 6 Thì phải làm thế nào? Xin bạn cho mình cái hướng dẫn

Mon, 08/04/2008 - 08:45 — thehong

Cái này là viết cho

Cái này là viết cho Drupal 5.

Post new comment

Your name:

E-mail:

The content of this field is kept private and will not be shown publicly.

Homepage:

Subject:

Comment: *

Web page addresses and e-mail addresses turn into links automatically.
Allowed HTML tags: <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <h3>
Lines and paragraphs break automatically.
Link to content with [[some text]], where "some text" is the title of existing content or the title of a new piece of content to create. You can also link text to a different title by using [[link to this title|show this text]]. Link to outside URLs with [[http://www.example.com|some text]], or even [[http://www.example.com]].
You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>. Beside the tag style "<foo>" it is also possible to use "[foo]". PHP source code can also be enclosed in <?php ... ?> or <% ... %>.

More information about formatting options

CAPTCHA

This question is used to make sure you are a human visitor and to prevent spam submissions.

What code is in the image?: *

Copy the characters (respecting upper/lower case) from the image.

User login

toila.net