Cách tạo slide ảnh từ Enclosure Links images

Nếu blog của bạn sử dụng nhiều hình ảnh tham khảo, thì việc biên tập chúng và trình bày sao cho đẹp mắt là một vấn đề đáng quan tâm. Bài này mình sẽ giới thiệu một cách khá đặc biệt mà rất ít người biết đến đó là sử dụng ảnh đính kèm liên kết để tạo slide. Việc này sẽ tạo cho slide ảnh chạy cực kỳ nhanh bởi vì link ảnh nó lấy trực tiếp trên bài chứ không phải từ một nguồn ở bên ngoài

-Thích hợp cho các chủ đề về kiến trúc, nội thất, thiết kế, hay du lịch..
- Slide ảnh sử dụng plugin slick slider
-Hiệu ứng popup khi click vào ảnh sử dụng plugin fancybox

Các bạn có thể xem demo đơn giản ở đây: Demo slide

Demo một slide ảnh từ Enclosure Links images

Cách làm lần lượt theo 5 bước như sau

Bước 1: Thêm code xml vào vị trí muốn hiển thị

Các bạn có thể chèn code vào trong template của bạn cụ thể trong widget Blog, tìm thẻ <data:post.body/> thêm code ngay dưới nó. Hoặc cũng có thể chèn thủ công vào từng bài viết và vị trí cụ thể như mong muốn

<div class='slideNewsDetails'>
  <div class='slider-post clearfix'>
    <div class='slider-big'>
      <b:loop index='item' values='data:post.enclosures' var='enclosure'>
        <div class='item'>
          <a class='img' data-fancybox='gallery' expr:href='data:enclosure.url' expr:title='data:post.title + &quot; - Ảnh &quot; + data:item'>
            <img expr:data-src='data:enclosure.url' expr:src='resizeImage(data:enclosure.url, 749, &quot;16:9&quot;)' expr:title='data:post.title + &quot; - Ảnh &quot; + data:item'/>
          </a>
        </div>
      </b:loop>
    </div>
    <div class='slider-small'>
      <b:loop index='item' values='data:post.enclosures' var='enclosure'>
        <div class='item'>
          <img expr:data-src='data:enclosure.url' expr:src='resizeImage(data:enclosure.url, 142, &quot;16:9&quot;)' expr:title='data:post.title + &quot; - Ảnh &quot; + data:item'/>
        </div>
      </b:loop>
    </div>
  </div>
</div>

Trong đó 749 là chiều rộng của các ảnh slide lớn bên trên, bạn có thể thay bằng số khác cho phù hợp với chiều rộng main, tương tự 142 là chiểu rộng của các ảnh nhỏ bên dưới. Mình sử dụng hàm resizeImage để thiết lập tất cả cà các ảnh lơn và nhỏ đều có kích thước tương tự nhau.

Bước 2: Chèn link css trước thẻ đóng </head>

<b:if cond='data:view.isPost'>
<link href='https://vietblogdao.github.io/blog/themify-icons.css' rel='stylesheet'/>
<link href='https://vietblogdao.github.io/css/slick-slider.min.css' rel='stylesheet'/>
<link href='https://vietblogdao.github.io/css/fancybox.min.css' rel='stylesheet'/>
</b:if>

Nếu template của bạn sử dụng biểu tượng Font Awesome, bạn có thể xóa link link themify-icons.css đi và thay lại icon prev và next như sau:

<style>
.slick-next:before, .slick-prev:before {
    font-family: FontAwesome;
    font-size: 24px;
}
.slick-prev:before {
    content: "\f104";
}
.slick-next:before {
    content: "\f105";
}
</style>

Bước 3: Chèn script trước thẻ đóng </body>

<b:if cond='data:view.isPost'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://vietblogdao.github.io/js/fancybox.min.js'></script>
<script src="https://vietblogdao.github.io/js/slick-slider.min.js"></script>
<script>//<![CDATA[
$(document).ready(function() {
  if ($('.slider-post').length > 0) {
    slideNewsDetails();
  }
});
function slideNewsDetails() {
  $('.slideNewsDetails .slider-post .slider-big').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,
    fade: true,
    asNavFor: '.slideNewsDetails .slider-small',
    autoplay: true,
    autoplaySpeed: 4000
  });
  $('.slideNewsDetails .slider-post .slider-small').slick({
    slidesToShow: 5,
    slidesToScroll: 1,
    asNavFor: '.slideNewsDetails .slider-big',
    dots: false,
    centerMode: false,
    focusOnSelect: true,
    arrows: false,
    autoplay: true,
    autoplaySpeed: 4000,
    responsive: [{
        breakpoint: 1024,
        settings: {
          centerMode: false,
          slidesToShow: 7,
          slidesToScroll: 1,
        }
      },
      {
        breakpoint: 769,
        settings: {
          centerMode: false,
          slidesToShow: 7,
          slidesToScroll: 1
        }
      },
      {
        breakpoint: 575,
        settings: {
          centerMode: false,
          slidesToShow: 4,
          slidesToScroll: 1
        }
      }
    ]
  });
}
//]]></script>
</b:if>

Bước 4: Bật liên kết tiêu đề và liên kết đính kèm

Phần thiết lập trong template đã xong, giờ chuyển sang phần cài đặt kích hoạt liên kết đính kèm và thêm link ảnh. Các bạn truy cập Cài đặt > Khác > Bật liên kết tiêu đề và liên kết đính kèm > chọn Có > chọn Lưu cài đặt

Bước 5: Thêm liên kết đính kèm vào bài viết

Các bạn chọn lấy tối đa 5 ảnh phù hợp up lên sau đó lấy link ảnh chèn vào mục Liên kết cố định > Liên kết đính kèm, chèn lần lượt từng link ảnh một chọn thêm liên kết đính kèm khác để thêm link ảnh tiếp theo



Đến đây là các bạn gần như hoàn tất việc tạo cho mình một slide ảnh tuyệt đẹp rồi đó. Các bạn lưu lại rồi ra ngoài kiểm chứng thành quả mình vừa làm xong nhé.
Chúc các bạn làm thành công nhé

Tham khảo code từ: thietkeblogspot.com