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

Submitted by thehong on Mon, 07/30/2007 - 23:27

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

  1. 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, ...
  2. 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`)
  3. 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

Lam sao minh de phan body

Submitted by hack2learn on Thu, 06/26/2008 - 16:50.

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

Bạn xem HTML source code

Submitted by thehong on Fri, 06/27/2008 - 20:43.

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":

  1. <style>
  2. .your-img {
  3.   float: left;
  4. }
  5. </style>

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

Thế Hồng

Với Drupal 6?

Submitted by Dzung Nova (not verified) on Tue, 07/29/2008 - 10:48.

Đâ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

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

Submitted by thehong on Mon, 08/04/2008 - 08:45.

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

Anh cố gắng bớt chút thời

Submitted by colen on Fri, 09/12/2008 - 19:51.

Anh cố gắng bớt chút thời gian cho em. Em có đọc bài hướng dẫn của Anh về sử dụng modules CCK. Em đã tạo một content type article .Gồm các trường Tiêu đề, images, body, nguồn. Khí em tạo một bài với content này thì bức ảnh nằm dưới tiêu đề rồi đến body. Vấn đề của em là cho bức ảnh nằm bên trái sau đó phần body nó nằm bên phải bức ảnh khi mình đưa thông tin lên. Với hướng dẫn sử dụng trên anh Có nói sửa đoạn code trong html( Diều này thì áp dụng mình chèn trực tiếp bức ảnh vào phần body) nhưng giờ bức ảnh của em được upload thì mình phải chỉnh ở đâu em đã chỉnh(thử sai ) nhiều lần bằng cách display field nhưng vẫn không được mong Anh giúp đỡ. Em cũng có xây dựng một website bằng drupal + Ubercart. http://vnstore.us/

Bạn xem kỹ trang này nhé:

Submitted by thehong on Sat, 09/13/2008 - 08:37.

Bạn xem kỹ trang này nhé: http://toila.net/files/code/css/float.html.

Hỏi về CKK

Submitted by levu901 on Thu, 10/23/2008 - 12:49.

Cho mình hỏi, tại sao mình download module CKK về rồi,giải nén cho vào thư mục module.Thế nhưng khi kiểm tra module thì các nó bị disable và hộp check vẫn mờ.Có phải module bị lỗi ko?Nhưng mình down nhiều lần và thử nhiều lần nhưng vẫn ko được.Về phiên bản thì mình dùng Drupal 6.4 và down module CKK 6.x beta.Có ai biết chỉ giùm mình với!

Bac TH oi!Chi gium em voi!

Submitted by levu901 on Thu, 10/23/2008 - 16:55.

Sao mình down module về giải nén ra nhưng ko có cái nào enable được hết!Giúp em với!

cho Drupal 5

Submitted by thehong on Sat, 10/25/2008 - 06:15.

Mấy cái list ở trên là của Drupal 5.

Thế Hồng

Great work, keep it up. I

Submitted by Zoran (not verified) on Wed, 03/04/2009 - 10:31.

Great work, keep it up. I love returning back to this site and reading the quality content you always have on offer.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <sup> <br> <p> <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>. The supported tag styles are: <foo>, [foo]. PHP source code can also be enclosed in <?php ... ?> or <% ... %>.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.