Hướng dẫn Hỗ trợ hiển thị hình ảnh Retina trong Joomla với Retina.js
Bạn nên xem qua
Nếu các bạn đã từng dùng iPad 3 sẽ thực sự cảm nhận rõ hình ảnh rõ nét mà thiết bị này mang lại chung cư xuân mai tower IWIN 280 HD. Là một người thiết kế web, ắt hẳn là các bạn cũng sẽ muốn trang web hay blog của mình có thể hiển thị tốt trên nhiều thiết bị. Có rất nhiều cách để các bạn có thể hiển thị những hình ảnh chất lượng cao trên các thiết bị tương ứng. Nhưng cách thông dụng và phổ biển nhất hiện nay là dùng 2 hình ảnh có cùng nội dung, nhưng độ phân giải và kích thước hoàn toàn khác nhau :
-myimage.jpg – Sử dụng cho những màn hình thông dụng
-myimage@2x.jpg – Sử dụng cho những thiết bị có độ phân giải cao, những hình này thường có kích thước lớp gấp đôi so với hình thường.
Trong bài viết này, mình sẽ chia sẻ với các bạn cách dùngRetina.js để có thể điều khiển hình ảnh cho từng thiết bị. Các bạn cũng có thể dùng cách này cho các CMS khác nhau WordPress hay Drupal chẳng hạn.
Bước 1 : Các bạn vào trang webhttp://retinajs.comrồi download plugin này về máy của mình.
Bước 2 :Đặt fleretina.js vào bên trong folderjs trong folder Joomla Template mà các bạn đang dùng. Nếu theme mà các bạn không có folder này thì có thể đặt nó ở bất kì chỗ nào trong theme, miễn là các bạn nhớ đường dẫn đến fileretina.js này là okie.
Bước 3 : Mở fileindex.php trong folder template mà bạn đang dùng. Thông thường đường dẫn sẽ là templates/ten-template-dang-dung/index.php.
Bước 4 : Đặt đoạn code sau đây bên dưới thẻ
Và đây là đoạn code mà các bạn sẽ đặt vào :
Và bây giờ mỗi khi gặp những thiết bị sử dụng độ phân giải cao như iPad 3 thì hình ảnh có độ phân giải cao sẽ được hiển thị.
Có một điều các bạn nên lưu ý và hết sức cẩn thận là nhớ thêm nhãn@2x cho những hình ảnh độ phân giải cao nhé IWIN 280 HD.
Chúc các bạn thành công !
Top
Comments[ 0 ]