如何在 Jekyll Liquid 语法的 for 循环中获取图像的宽度和高度并将其转换为 js $ 变量？

Question

有没有办法定义（分配或捕获）一个变量，我可以在其中获得图像的 width 和 height 使用 Liquid 逻辑？我希望稍后将这些值传递给 js $variable。

以下是我的网站在我希望使用图像尺寸值之前所采取的步骤...例如：

在每个 .markdown 文档的前端定义中，我有一个关联数组列表，如下所示：

single_module:
  - url: 'anchor-480x480.jpg'
    width: "480"
    height: "480"
    alt: 'An image's alt text'
  - url: 'kart2.jpg'
    width: "1300"
    height: "1300"
    alt: 'An image's alt text'

...

在页面的 html 布局上，我有一个 for loop，它从文档的前言中获取我需要的所有值。在这一点上，我正在将 front-matter 中定义的每个图像的 width 和 height 值转换为 url: 键html.

中的 data-attribute

{% assign modules = page.single_module %}
{% for module in modules %}
<div class="module default-module" data-bgimage="{{ site.baseurl | prepend: site.project_upload_path }}{{module.url}}" data-width="{{module.width}}" data-height="{{module.height}}">
</div>

上面的结果会是这样的：

<div data-bgimage="/uploads/projects/anchor-480x480.jpg" data-width="480" data-height="480">
</div>

...

从这里开始，我希望在以下 js 函数中使用 data-width 和 data-height 值：

下面的javascript函数考虑了图像宽度和高度通过$img变量。这不是完整的函数，它只是使用 $img 变量的部分，请看下面：

$(document).ready(function(){ 

var moduleImage = $(".module");
// Create the $img variable
var $img = moduleImage.data("bgimage");

...

ui : {
resizeElement : function($img, h){

// This function resizes a given element over a certain height. It also centers the element...

var maxHeight = h,
maxWidth = $(window).width(),
oldHeight = $img.height(),
oldWidth = $img.width(),
ratio = Math.max(oldWidth / oldHeight, oldHeight / oldWidth),
newHeight = 0,
newWidth = 0;

// Complex calculations to get the perfect size

if(oldWidth > oldHeight){

if ( maxHeight * ratio < maxWidth ) {
newWidth = maxWidth;
newHeight = maxWidth / ratio;
} else {
newHeight = maxHeight;
newWidth = maxHeight * ratio;
}

} else {

if ( maxHeight / ratio < maxWidth ) {
newWidth = maxWidth;
newHeight = maxWidth * ratio;
} else {
newHeight = maxHeight;
newWidth = maxHeight / ratio;
}

}

// Apply the correct size and reposition

$img.css({
'width': Math.ceil(newWidth),
'height': Math.ceil(newHeight),
'top': Math.round((h-newHeight)/2),
'left': Math.round(($(window).width()-newWidth)/2)
});

},

});//end document.ready

这似乎超出了我的编程技能，因为我不是开发人员，而是喜欢编写代码的设计师。无论如何，我怎么能将存储在 data-width 和 data-height 属性中的 jekyll for 循环语法的值传递给 js $img 变量。

从上面的函数中提取出来，我尝试了以下方法： ...

var moduleImage = $(".module");
// Create new offscreen image to test
var $img = moduleImage.data("bgimage");

oldHeight = $img.height(),
oldWidth = $img.width(),

Answer 1

由于您已经使用 Liquid 将数据导入 HTML，现在（如果我理解正确的话）您只需将数据从 HTML DOM 导入你的脚本。您可以像获取 bgimage.

一样获取它

这是您要找的吗？

oldHeight = moduleImage.data('height'),
oldWidth = moduleImage.data('width'),

Answer 2

我假设您想要全屏背景图像。如果您可以不支持 IE8，则可以使用 CSS 命令 background: url('yourimage') 和 background-size: cover。这似乎是您问题的最简单解决方案。少（代码）多...

Answer 3

您可以使用这个 jekyll 插件 jekyll-image-size。它允许您在模板中的任何位置添加液体标签，以从本地资产中提取宽度和高度信息，并以多种不同的格式输出。例如：

<script>
let {width, height} = {{ imagesize /assets/image.png:json }};
</script>

如何在 Jekyll Liquid 语法的 for 循环中获取图像的宽度和高度并将其转换为 js $ 变量？

How to get an image's width and height within a for loop in Jekyll Liquid syntax and translate it to a js $variable?

html

javascript

jquery

liquid

jekyll