TimThumb là script PHP đơn giản, linh hoạt cho phép bạn thay đổi kích thước file ảnh. Bạn chỉ cần gọi file TimThumb.php và sử dụng các tham số đi kèm để tạo ra nhiều kích thước từ ảnh gốc mà bạn muốn hiển thị trên website.
TimThumb được được wordpress sử dụng phổ biến trong khi upload ảnh, có hỗ trợ nhiều kích thước chính là thư viện này.
Cơ bản về TimThumb
Bài viết này chúng ta sẽ thảo luận cách dùng cơ bản về script này – một vài tham số hay dùng.
Trước tiên bạn cần file PHP , bạn có thể tải TimThumb từ google code và đặt nó vào folder trên website.
Giả sử bạn đặt file timthumb.php cùng folders chứa ảnh sử dụng cho website.
Cách dùng: Thư viện TimThumb là một file PHP duy nhất, sử dụng bởi các tham số truyền vào URL để xuất ảnh. TimThumb có thể sử dụng ở mọi website có tích hợp tính năng resize ảnh.
Cài đặt
Yêu cầu: TimThumb làm việc trên web server hỗ trợ ngôn ngữ server PHP và có cài đặt GD image. Bạn có thể tạo một thư mục để lưu các ảnh tạo ra bởi TimThumb. Thư mục này để cùng với file script TimThumb và nên đổi tên thành ‘cache’. Để ghi các file ảnh vào ‘cache’ bạn cần thiết lập cdmod 775.
Tham số đầu vào bắt buộc “src” xác định ảnh gốc, các tham số khác là tùy chọn. Nếu bạn chỉ sử dụng tham số này ảnh sẽ được cropped/resize đến kích thước mặc định 100×100
Các tham số hay dùng khác:
- w & h: chỉ định chiều rộng và cao của ảnh, chỉ định mọi kích thước dựa vào đó TimThumb có thể phóng to hoặc thu nhỏ theo yêu cầu.
- q: viết tắt bởi ‘quality’ chất lượng ảnh. Điền một con số thể hiển chất lượng điểm ảnh, giá trị tham số này càng cao thì phân giải ảnh càng nét.
Một số ví dụ mẫu:
– Sử dụng các tham số mặc định.
timthumb.php?src=castle1.jpg
Ảnh sinh ra với kích thước đầu tiên 100×100
– Điều chỉnh chất tượng ảnh tới 100
timthumb.php?src=castle1.jpg&q=100
KQ:
– Ngược lại, độ phân giải kém hơn, nếu khai báo q có giá trị thấp.
timthumb.php?src=castle1.jpg&q=10
-Thay đổi kích thước ảnh:
timthumb.php?src=castle1.jpg&w=200
– Crop/resize với kích thước height.
timthumb.php?src=castle1.jpg&h=150
– Crop đồng thời width+height
timthumb.php?src=castle1.jpg&h=180&w=120
Ví dụ khác, crop với mọi kích thước, ảnh vẫn dữ được tự nhiên.
timthumb.php?src=castle1.jpg&h=80&w=210
Resize/Crop với URL Image
Bạn không chỉ crop những ảnh lưu ở trong thư mục website, mà có thể tạo ảnh từ một ảnh lấy trên internet cung cấp bởi URL.
Thư viện crop ảnh TimThumb được sử dụng rất phổ biến điển hình dịch vụ flickr.com, picasa.com, blogger.com, wordpress.com và cả mg.youtube.com cũng đang cài script TimThumb này. Vì flickr là dịch vụ lưu trữ ảnh nên khá phổ biến.
Bạn có thể liệt kê các domain cho phép lấy ảnh thông qua TimThumb, bằng cách mở file timthumb.php với mọi trình sửa văn bản bạn đang dùng và sửa lại biến mảng $allowedSites.
Lỗi thường gặp phải:
- Folder Permission: Truy cập từ địa chỉ ảnh ngoài, sẽ lâu hơn timthumb sẽ download ảnh về và sau đó crop cuối cùng lưu vào thư mục ‘cache’ trên website. Để có thể ghi file , folder ‘cache’ và file timthumb nằm cùng vị trí tức chứa trog cùng 1 thư mục và thiết lập quyền ghi cdmod cho ‘cache’ là 775.
- Giới hạn nguồn ảnh từ Site/Domain: Vấn đề thứ hai cũng nên để ý, hãy đảm bảo ảnh bạn đang lấy được phép truy cập, xem danh sách các domain cho phép hoạt động bởi biến
$alllowedSites
Ví dụ:
timthumb.php?src=http://farm3.static.flickr.com/2340/2089504883_863fb11b0a_z.jpg
Chỉ thay giá trị tham số src bằng URL ảnh, sử dụng tương tự với các tham số khác.
timthumb.php?src=http://farm3.static.flickr.com/2340/2089504883_863fb11b0a_z.jpg&h=200&w=120
Chi tiết đầy đủ tham số xem bảng dưới
.
| stands for | values | What it does | |
|---|---|---|---|
| src | source | url to image | Tells TimThumb which image to resize › TimThumb basic properties tutorial |
| w | width | the width to resize to | Remove the width to scale proportionally (will then need the height) › TimThumb width tutorial |
| h | height | the height to resize to | Remove the height to scale proportionally (will then need the width) › TimThumb height tutorial |
| q | quality | 0 – 100 | Compression quality. The higher the number the nicer the image will look. I wouldn’t recommend going any higher than about 95 else the image will get too large › TimThumb image quality tutorial |
| a | alignment | c, t, l, r, b, tl, tr, bl, br | Crop alignment. c = center, t = top, b = bottom, r = right, l = left. The positions can be joined to create diagonal positions › TimThumb crop position tutorial |
| zc | zoom / crop | 0, 1, 2, 3 | Change the cropping and scaling settings › TimThumb crop scaling tutorial |
| f | filters | too many to mention | Let’s you apply image filters to change the resized picture. For instance you can change brightness/ contrast or even blur the image › TimThumb image filter tutorial |
| s | sharpen | Apply a sharpen filter to the image, makes scaled down images look a little crisper › tutorial | |
| cc | canvas colour | hexadecimal colour value (#ffffff) | Change background colour. Most used when changing the zoom and crop settings, which in turn can add borders to the image. |
| ct | canvas transparency | true (1) | Use transparency and ignore background colour |
Trong bài tiếp theo, mình sẽ chỉ cho các bạn nhiều hơn về những tính năng của TimThumb mang lại, như sử lý filter thay đổi mầu sắc của ảnh..hoặc xem thêm tại: http://www.binarymoon.co.uk/projects/timthumb/
HOÀNG WEB | THIẾT KẾ WEBSITE 