Cách thiết lập ảnh reponsive khi viết script lấy dữ liệu nguồn cấp

Hình ảnh reponsive là hình ảnh hiển thị tốt và tự động co giãn trên các thiết bị có độ phân giải màn hình khác nhau. Ngoài ra kích thước ảnh được đặt theo kích thước màn hình khi tải trang.

Các bạn xem ví dụ về ảnh

+ Không sử dụng srcset

+ Sử dụng srcset

Sự khác biệt dễ dàng nhận thấy giữa sử dụng và không sử dụng srcset chính là kích thước rộng và cao của ảnh, lấy ví dụ như ảnh trên có kích thước ảnh gốc cao 418px rộng 660px

+ Nếu không sử dụng srcset khi tải ở kích thước màn hình nào cũng phải tải kích thước ảnh gốc dẫn đến kích thước của trang nặng hơn và ảnh bắt buộc phải sử dụng css trong @media screen and (max-width: px)

+ Nếu sử dụng srcset: ảnh sẽ tự động căn chỉnh kích thước giảm dần đáp ứng cụ thể với kích thước màn hình do đó kích thước của trang sẽ nhẹ hơn do kích thước của ảnh giảm và không cần sử dụng đến @media screen and (max-width: px)

Cụ thể hơn khi sử dụng srcset bạn chỉ cần viết css đơn giản:

Copy

.post_thumb {

    width: 100%;

    height: auto;

}

.post_thumb img {

    width: 100%;

    height: 100%;

}

Trong Blogger khi thêm srcset cho ảnh trong XML của Chủ đề hiển thị ảnh ngoài trang index như sau:

Copy

<b:if cond='data:post.featuredImage'> // Thẻ điều kiện này chỉ áp dụng cho widget Blog1 version='2', nếu là widget version='1' thay bằng <b:if cond='data:post.firstImageUrl'>

<div class='post_thumb'>

  <a expr:href='data:post.url.canonical' expr:title='data:post.title'>

    <img expr:alt='data:post.title' expr:src='data:post.featuredImage' expr:srcset='sourceSet(data:post.featuredImage, [320,400,640,1600], &quot;16:9&quot;)' sizes='(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)'/>

  </a>

</div>

<b:else/> // Nếu bài viết không sử dụng ảnh, lấy ảnh khác thay thế

<div class='post_thumb'>

  <a expr:href='data:post.url.canonical' expr:title='data:post.title'>

    <img expr:alt='data:post.title' expr:srcset='sourceSet(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0or4Lg0RFsBYU41b0cy-GLbUjZYpdXY43WyctKgJnpf-ctmiUpfDB7YgTEKcJ0jvoZb5Ok26Zigr5wA5LRFYyul3vvM47jcwux5h0_xYS6dNInRxJYE27H7o28IlSexbIf6ohKq7BWvn9/s1600/safe_image.png&quot;, [320,400,640,1600], &quot;16:9&quot;)' sizes='(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0or4Lg0RFsBYU41b0cy-GLbUjZYpdXY43WyctKgJnpf-ctmiUpfDB7YgTEKcJ0jvoZb5Ok26Zigr5wA5LRFYyul3vvM47jcwux5h0_xYS6dNInRxJYE27H7o28IlSexbIf6ohKq7BWvn9/s320/safe_image.png'/>

  </a>

</div>

</b:if>

Áp dụng khi viết script lấy dữ liệu nguồn cấp dữ liệu hiển thị ảnh

Copy

<script>//<![CDATA[

function loadcontent(e) {

  if (e.feed.entry) {

    for (var t = 0; t < e.feed.entry.length; t++) {

      for (var a = 0; a < e.feed.entry[t].link.length; a++) {

        if ("alternate" == e.feed.entry[t].link[a].rel) {

          var s = e.feed.entry[t].link[a].href;

          break

        }

      }

      var d = e.feed.entry[t].title.$t;

      try {

        var w = e.feed.entry[t].media$thumbnail.url,

          w320 = w.replace("s72-c", "w320-h180-p-k-no-nu"),

          w400 = w.replace("s72-c", "w400-h225-p-k-no-nu"),

          w640 = w.replace("s72-c", "w640-h360-p-k-no-nu"),

          w1600 = w.replace("s72-c", "w1600-h900-p-k-no-nu"),

          i = w.replace("s72-c", "s1600");

      } catch (e) {

        i = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0or4Lg0RFsBYU41b0cy-GLbUjZYpdXY43WyctKgJnpf-ctmiUpfDB7YgTEKcJ0jvoZb5Ok26Zigr5wA5LRFYyul3vvM47jcwux5h0_xYS6dNInRxJYE27H7o28IlSexbIf6ohKq7BWvn9/s320/safe_image.png"

      }

      $('.blog-posts').append('<article class="post"><div class="post_thumb"><a href=' + s + ' title="' + d + '"><img alt="' + d + '" src=' + i + '  sizes="(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)" srcset="' + w320 + " 320w, " + w400 + " 400w, " + w640 + " 640w, " + w1600 + ' 1600w"/></a></div></article>')

    }

  }

}

//]]></script>

<script src='/feeds/posts/summary?alt=json-in-script&amp;max-results=150&amp;callback=loadcontent'></script>

Khi tải trang HTML của ảnh có dạng sau:

Copy

<div class="post_thumb">

  <a href="https://www.nhipsong24h.net/2018/05/chiem-nguong-ve-dep-cua-me-thien-nhien-tren-day-alps-hung-vy.html" title="Chiêm ngưỡng vẻ đẹp của mẹ thiên nhiên trên dãy Alps hùng vỹ">

    <img alt="Chiêm ngưỡng vẻ đẹp của mẹ thiên nhiên trên dãy Alps hùng vỹ" sizes="(min-width: 954px) 842px, (min-width: 801px) calc(100vw - 112px), calc(100vw - 64px)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnE9sQJaOlqMihnA2_IQC1WAxBkO1h4k4rV9Q8efcJzF6QmhmRZWy5Rme7sLi73YZDB1VwIoUoHx0by3RWmY0tY9MqeL8tYyRRGTV6SoUDq8aUPoTolKEnw577tm6hmd9j9g-DDTp4wL4/s1600/day-alps-3-min.jpg" srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnE9sQJaOlqMihnA2_IQC1WAxBkO1h4k4rV9Q8efcJzF6QmhmRZWy5Rme7sLi73YZDB1VwIoUoHx0by3RWmY0tY9MqeL8tYyRRGTV6SoUDq8aUPoTolKEnw577tm6hmd9j9g-DDTp4wL4/s1600/day-alps-3-min.jpg 320w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnE9sQJaOlqMihnA2_IQC1WAxBkO1h4k4rV9Q8efcJzF6QmhmRZWy5Rme7sLi73YZDB1VwIoUoHx0by3RWmY0tY9MqeL8tYyRRGTV6SoUDq8aUPoTolKEnw577tm6hmd9j9g-DDTp4wL4/s1600/day-alps-3-min.jpg 400w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnE9sQJaOlqMihnA2_IQC1WAxBkO1h4k4rV9Q8efcJzF6QmhmRZWy5Rme7sLi73YZDB1VwIoUoHx0by3RWmY0tY9MqeL8tYyRRGTV6SoUDq8aUPoTolKEnw577tm6hmd9j9g-DDTp4wL4/s1600/day-alps-3-min.jpg 640w, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnE9sQJaOlqMihnA2_IQC1WAxBkO1h4k4rV9Q8efcJzF6QmhmRZWy5Rme7sLi73YZDB1VwIoUoHx0by3RWmY0tY9MqeL8tYyRRGTV6SoUDq8aUPoTolKEnw577tm6hmd9j9g-DDTp4wL4/s1600/day-alps-3-min.jpg 1600w">

  </a>

</div>

Các bạn tham khảo từ khóa Responsive images hay Responsive Web Design Images trên mạng để tìm hiểu kỹ hơn nhé.

Nội dung chính