| trình bày lại hugo gallery p2

Created: , Modified:

OK, mọi chuyện đã đâu vào đấy. Anh chỉ ghi lại kết quả. Quá trình làm ra được cái kết quả ý thì thôi tốt nhất là quên đi vậy. Đéo nhớ đã mò mẫm sục sạo ở những chỗ nào nữa. Kể cả có nhớ được, thì thứ tự xem hay làm như nào cũng anh cũng quên cmn rồi.

Code chưa hoàn hảo, nhưng cũng là gợi ý để nâng cấp các bước tiếp theo.

Đây là cái gallery hoàn chỉnh (thực ra là 2 cái, mỗi cái một row)

có những hạn chế gì?

  • luôn fải để ý kích thước hình ảnh mỗi khi cho vào gallery
  • fải nhập kích thước hình ảnh thủ công
  • không tự động sắp xếp tối ưu tuỳ theo số lượng hình ảnh 1

script 2

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<script>
    var images = document.querySelectorAll('.kg-gallery-image img');
    images.forEach(function (image) {
        var container = image.closest('.kg-gallery-image');
        var width = image.attributes.width.value;
        var height = image.attributes.height.value;
        var ratio = width / height;
        container.style.flex = ratio + ' 1 0%';
    })
</script>

style 3

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

.kg-gallery {
    display: flex;
    flex-flow: wrap;
    margin-bottom: 0.5em;
    width: 100%;
}

.kg-gallery-image img {
    width: 100%;
    height: 100%;
}

.kg-gallery-image:not(:first-of-type) {
    margin: 0 0 0 0.5em;
}

shortcode (kg.html) 4

1
2
3
4
5

<div class="kg-gallery-image">
    <a href="{{ .Get 0 }}">
        <img src="{{ .Get 0 }}" width="{{ .Get 1 }}" height="{{ .Get 2 }}"/>
    </a>
</div>

Lưu ý khi zùng fải có đủ 3 trường dữ liệu: link to image, width, height.

use

1
2
3
4
5
6

<div class="kg-gallery">
    <!-- width, height nhập kích thước hình ảnh -->
    {{< kg "link/to/image1" width height >}}
    {{< kg "link/to/image2" width height >}}
    {{< kg "link/to/image3" width height >}}
</div>

Chỉ nên để đối đa 3 hình, cần thêm thì tạo div kg-gallery khác

  1. kể ra cũng không tệ lắm, vì có thể chủ động điều chỉnh vị trí, số lượng hiển thị… ➽
  2. Nhặt từ casper theme, cho nó vào cuối site-tail.html. Cái này cothe cải tiến hơn? tự đọc kích thước hình ảnh từ url rồi append vào image attribute chả hạn? Đỡ fải nhập thủ công. Tham khảo ở đây hoặc đây ➽
  3. lược bớt, chỉ để lại vừa đủ ➽
  4. nên tham khảo hugo docs để biên lại shortcode cho đầy đủ hơn. ➽

PREV:

NEXT: