Grav - Phương tiện
Các tệp phương tiện chứa các loại nội dung hiển thị khác nhau như hình ảnh, video và nhiều tệp khác. Grav tự động tìm và xử lý các tệp này để được sử dụng bởi bất kỳ trang nào. Bằng cách sử dụng chức năng có sẵn của trang, bạn có thể truy cập siêu dữ liệu và sửa đổi động phương tiện.
Smart-cachingđược Grav sử dụng để tạo phương tiện được tạo trong bộ nhớ cache khi cần thiết. Bằng cách này, tất cả có thể sử dụng phiên bản đã lưu trong bộ nhớ cache thay vì tạo phương tiện lặp đi lặp lại.
Tệp phương tiện được hỗ trợ
Sau đây là các loại tệp phương tiện được hỗ trợ bởi Grav:
Image - jpg, jpeg, png
Animated Image - gif
vectorized Image - svg
Video - mp4, mov, m4v, swf
Data/information - txt, doc, pdf, html, zip, gz
Chế độ hiển thị
Sau đây là một số loại chế độ hiển thị trong Grav:
Source - Nó là sự hiển thị trực quan của hình ảnh, video hoặc một tập tin.
text - Trình bày dạng văn bản của các tập tin media.
thumbnail - Hình ảnh thu nhỏ cho tệp phương tiện.
Định vị hình thu nhỏ
Bạn có thể xác định vị trí các hình thu nhỏ bằng ba vị trí -
In the same folder where your media files exists- [media-name]. [Media-extension] .thumb. [Thumb-extension]; ở đây, media-name và media-extension là tên và phần mở rộng của tệp phương tiện thực tế và phần mở rộng thumb là phần mở rộng được hỗ trợ bởi loại phương tiện hình ảnh.
User Folder − user / images / media / thumb- [media-extension] .png; ở đây, media-extension là phần mở rộng của tệp phương tiện thực tế.
System folder- system / images / media / thumb- [media-extension] .png; ở đây, media-extension là phần mở rộng của tệp phương tiện thực tế.
Hộp đèn và Liên kết
Grav cung cấp đầu ra của thẻ liên kết chứa một số phần tử để plugin hộp đèn có thể đọc. Nếu bạn muốn sử dụng thư viện hộp đèn không có trong các plugin của mình, thì bạn có thể sử dụng các thuộc tính sau để tạo plugin của riêng mình.
rel- Cho biết liên kết hộp đèn. Giá trị là hộp đèn.
href - Nó là một URL đến đối tượng media.
data-width - Đặt chiều rộng của hộp đèn do người dùng chọn.
data-height - Đặt chiều cao của hộp đèn do người dùng chọn.
data-srcset - Chuỗi srcset được sử dụng trong trường hợp phương tiện hình ảnh.
Hành động
Mẫu trình tạo trong Grav được sử dụng để xử lý phương tiện, để thực hiện nhiều hành động. Có một số loại hành động được hỗ trợ cho tất cả các phương tiện trong khi có một số loại chỉ khả dụng cho phương tiện cụ thể.
Chung
Có 6 loại hành động chung có sẵn cho các loại phương tiện. Mỗi hành động được giải thích bên dưới.
| Sr.No. | Mô tả hành động |
|---|---|
| 1 | url ()
url () trả lại raw url path với phương tiện truyền thông. |
| 2 | html ([title] [, alt] [, lớp]
Đầu ra sẽ có một Thẻ html hợp lệ cho phương tiện. |
| 3 | display(mode) Nó được sử dụng để chuyển đổi giữa các chế độ hiển thị khác nhau. Khi bạn chuyển sang chế độ hiển thị, tất cả các hành động sẽ được đặt lại. |
| 4 | liên kết ()
Các hành động được áp dụng trước liên kết sẽ áp dụng cho mục tiêu của liên kết. |
| 5 | hộp đèn ([chiều rộng, chiều cao])
Lightbox tương tự như hành động liên kết nhưng có một chút khác biệt là nó tạo liên kết với một số thuộc tính bổ sung. |
| 6 | Hình nhỏ
Chọn giữa trang và mặc định cho bất kỳ loại tệp phương tiện nào và việc này có thể được thực hiện theo cách thủ công. |
Hành động trên hình ảnh
Bảng sau liệt kê một số thao tác được áp dụng trên hình ảnh.
| Sr.No. | Mô tả hành động |
|---|---|
| 1 | thay đổi kích thước (chiều rộng, chiều cao, [nền])
Thay đổi chiều rộng và chiều cao của hình ảnh bằng cách thay đổi kích thước. |
| 2 | forceResize (chiều rộng, chiều cao)
Kéo dài hình ảnh theo yêu cầu không phù hợp với tỷ lệ gốc. |
| 3 | cropResize (chiều rộng, chiều cao)
Thay đổi kích thước hình ảnh thành kích thước nhỏ hơn hoặc lớn hơn theo chiều rộng và chiều cao của hình ảnh. |
| 4 | cắt (x, y, rộng, cao)
Cắt hình ảnh như được mô tả theo chiều rộng và chiều cao từ vị trí x và y. |
| 5 | cropZoom (chiều rộng, chiều cao)
Giúp phóng to và cắt hình ảnh theo yêu cầu. |
| 6 | chất lượng (giá trị)
Đặt giá trị cho chất lượng hình ảnh từ 0 đến 100. |
| 7 | phủ định ()
Màu sắc bị đảo ngược trong phủ định. |
| số 8 | độ sáng (giá trị)
Với một value của -255 đến +255, bộ lọc độ sáng được thêm vào hình ảnh. |
| 9 | độ tương phản (giá trị)
Giá trị từ -100 đến +100 được sử dụng để áp dụng bộ lọc tương phản cho hình ảnh. |
| 10 | thang độ xám ()
bộ lọc thang độ xám được sử dụng để xử lý hình ảnh. |
| 11 | dập nổi ()
Bộ lọc dập nổi cũng được sử dụng để xử lý hình ảnh. |
| 12 | mịn (giá trị)
Bộ lọc làm mịn được áp dụng cho ảnh bằng cách đặt giá trị từ -10 đến +10. |
| 13 | nhọn()
Bộ lọc làm sắc nét được thêm vào hình ảnh. |
| 14 | cạnh()
Bộ lọc tìm cạnh được thêm vào hình ảnh. |
| 15 | tô màu (đỏ, lục, lam)
Tô màu hình ảnh bằng cách điều chỉnh các màu đỏ, xanh lá cây và xanh lam. |
| 16 | nâu đỏ ()
Bộ lọc nâu đỏ được thêm vào để mang lại một cái nhìn cổ điển. |
Animation và Vectorizing hình ảnh và video
Các hành động hoạt hình và vector hóa được thực hiện trên hình ảnh và video. Sau đây là hành động diễn ra trên hình ảnh và video.
| Sr.No. | Mô tả hành động |
|---|---|
| 1 | thay đổi kích thước (chiều rộng, chiều cao)
Hành động thay đổi kích thước sẽ được đặt width, height, data-width và data-height thuộc tính. |
Kết hợp
Grav có chức năng thao tác hình ảnh giúp bạn dễ dàng làm việc với hình ảnh.
Đoạn mã trên sẽ tạo ra một đầu ra như hình dưới đây:
Hình ảnh đáp ứng
Bảng sau liệt kê một số loại hình ảnh đáp ứng.
| Sr.No. | Mô tả hành động |
|---|---|
| 1 | Màn hình mật độ cao hơn
Thêm hậu tố vào tên tệp và bạn có thể thêm hình ảnh có mật độ cao hơn vào trang. |
| 2 | Kích thước với các truy vấn phương tiện
Thêm hậu tố vào tên tệp và bạn có thể thêm hình ảnh có mật độ cao hơn vào trang. |
Metafiles
image1.jpg, archive.ziphoặc bất kỳ tham chiếu nào khác có khả năng đặt biến hoặc có thể bị ghi đè bởi một siêu tệp. Các tệp này sau đó có định dạng<filename>.meta.yaml. Ví dụ: nếu bạn có một hình ảnh làimage2.jpg, thì siêu tệp của bạn có thể được tạo dưới dạng image2.jpg.meta.yaml. Nội dung phải theo cú pháp yaml. Bạn có thể thêm bất kỳ tệp hoặc siêu dữ liệu nào bạn thích bằng phương pháp này.