Question

我想自动为我的所有图像添加height和width属性。可以通过this nice plugin完美地完成此操作，但是我的网站托管在不支持外部插件的GitHub Pages上。

问题：如何在不使用插件的情况下预填充图像的高度/宽度属性？

我为什么需要这个？

My site甚至在没有height和width的情况下也可以完美运行，但是我想指定它们，因为从SEO角度来看这很重要（您可以找到有关其重要性的一些详细信息{{3 }}）。

Answer 1

使用fastimage gem编写内部过滤器来执行此操作非常简单。您可以在项目的_plugins目录中定义过滤器（在Jekyll documentation中对此进行了概述）

作为一个非常粗糙的示例，您可以执行以下操作：

require 'fastimage'

module ImageSizeFilter
  def image_size(source, dimension)
    # Get the image dimensions, throw an error on failure
    # NOTE: You may want to sanitize the input string provided here
    # see: https://github.com/sdsykes/fastimage#security
    size = FastImage.size(source, raise_on_failure: true)

    # Return the requested dimension, or both dimensions if nothing was specified
    return size[0] if dimension == 'w'
    return size[1] if dimension == 'h'
    return size unless dimension

    # Fail if the requested dimension is invalid
    raise 'Invalid image size dimension requested: ' + dimension
  end
end

Liquid::Template.register_filter(ImageSizeFilter)

将这样使用：

<img src={{source}}
     width="{{source | image_size: 'w'}}"
     height="{{source | image_size: 'h'}}"/>

当然，这仍然不能直接在GitHub页面上使用，因为不支持自定义插件。通常，要使用自定义插件，一种解决方案是build the site locally and include it in the repository。

Answer 2

此问题似乎适用于markdown文件中的内容图像。这些图像默认未设置宽度或高度。

简短答案

您可以直接在markdown中用HTML设置宽度和高度，如下所示：

# Markdown title

paragraph

<img src="/path/to/image.jpg" width="400" height="300" />

详细答案

没有插件就无法以编程方式获取图像的宽度和高度，因此，当您使用（纯）降价时，您将获得没有width和height属性的图像。问题是为什么您要首先添加宽度和高度。设置宽度和高度可防止回流，但在加载时会留出较大的间隙孔。那真的更好吗？它当然看起来并不好。渐进式JPG可以很好地解决此问题，但是我不喜欢在其上设置宽度和高度，因为“无图像”看起来不错，而渐进式JPG也总是很不错。

您说出于SEO的原因想要它，但我想不到。

如果您的网站非常慢，您实际上希望在重排之前与图像下方的内容进行交互，那么合理的解决方案是使您的网站加载速度更快。

但是，如果您的用户连接速度非常慢，则可能需要手动将图像添加到HTML的标记中。有关代码示例，请参见简短答案。

Jekyll：不使用外部插件即可获取图像的宽度/高度

2 个答案: