Joomla — August 30, 2016 at 3:43 am

Cách tạo hiển thị hình ảnh trong joomla với Retina.js

by

Retina.js là một phần mềm hỗ trợ plugin cho web, việc tải kết hợp này sẽ giúp thuận tiện hơn trong việc điều khiển hình ảnh.Trong bài viết này, mình sẽ chia sẻ với các bạn cách dùng Retina.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 web http://retinajs.com rồi download plugin này về máy của mình.

Bước 2 : Đặt fle retina.js vào bên trong folder js 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 file retina.js này là okie.

Bước 3 : Mở file index.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ẻ <jdoc:include type=”head” />  như sau :

hinh-19

 

Và đây là đoạn code mà các bạn sẽ đặt vào :

<script src=”/<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/js/retina.js” type=”text/javascript”></script>

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ị.

<img src=”/path/to/myimage@2x.jpg” alt=”My Image” />

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é.
Chúc các bạn thành công !

Leave a Comment

Your email address will not be published. Required fields are marked *