| sample gallery

Created: , Modified:

Đặt tạm cái photo gallery vào đây để trình bày lại

Script (enabled)

 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>

Shortcode: kg.html

1
2
3
4
5
6
7

<!-- image -->
<div class="kg-gallery-image">
    <a href="{{ .Get "src" }}">
        <img src="{{ .Get "src" }}" width="{{.Get "w"}}" height="{{.Get "h"}}"/>
    </a>
</div>
<!-- image -->

update nhanh cái còn về măm

Thử lần 1 thất bại, mọi thứ jống với cấu trúc ở ghost theme nhưng hiển thị vẫn không đúng. Nguyên nhân có thể do script không đọc được "width" & "height" trong image attribute. Lấy link online mà bắt fải tự động đọc các thông số đó thì nan jải quá nhỉ. Có cách nào khác không?

Thấy có link này có vẻ có liên quan: https://kodify.net/hugo/functions/imageconfig-function/

update nhanh fát nữa

Sau khi add các thông số width & height, gallery đã hiển thị đúng 😄. Vấn đề jờ là fải tìm cách nào tự động đọc được các thông số đó khi chèn vào bài bằng shortcode. Nan jải fết.

PREV:

NEXT: