如何使用

Question

我正在尝试编写一个脚本，自动将图像width和height添加到我的所有img。我已经看到了这个问题：

Automatically adding width and height attributes to <img> tags with a PHP function

但我正在使用jekyll。

我的第一个想法是在我的帖子目录上执行grep，并且每次出现img时，获取图像URI并计算其大小。这可能吗？

我还看一下fastImage，但它与Jekyll和本地文件（Here is a Jekyll filter）不兼容

你能否就如何做到这一点给我一些命中？

Answer 1

我编写了一个插件（jekyll-image-size），该插件基本上可以做到这一点，但是它可以作为模板中的标记。例如，您可以这样做：

{% imagesize /assets/steam-fish-1.jpeg:img %}

它会生成：

<a href="/assets/steam-fish-1.jpeg" width='300' height='150'>

（带有图像文件的实际宽度和高度）

它还支持视网膜图像缩放和IMG标签以外的许多其他输出格式：opengraph标签，css样式的props，html-props以及图像的原始宽度和高度。

Answer 2

我终于想出了一个解决方案，一个python脚本，就在这里（我还创建了一个github gist)。

以下是代码背后的主要思想：

迭代所有博文。
查找每篇文章中的所有img代码。
提取src属性的内容。
打开图像并提取其大小。
在img attribues width和height中写下图片尺寸。

代码：

#!/bin/python
from BeautifulSoup import BeautifulSoup
from os.path import basename, splitext
from PIL import Image
import glob

# Path where the posts are, in markdown format
path = "/ruta/ficheros/*.md"

# Iterate over all posts
for fname in glob.glob(path):
    # Open the post
    f = open(fname)
    # Create a BeautifulSoup object to parse the file
    soup = BeautifulSoup(f)
    f.close()
    # For each img tag:
    for img in soup.findAll('img'):
        if img != None:
            try:
                if img['src'].startswith("/assets") == True:
                    # Open the image
                    pil = Image.open("/ruta/carpeta/imagenes" + img['src'])
                    # Get its size
                    width, height = pil.size
                    # Modify img tag with image size
                    img['width'] = str(width) + "px"
                    img['height'] = str(height) + "px"
            except KeyError:
                pass
    # Save the updated post
    with open(fname, "wb") as file:
        file.write(str(soup))

如何使用

只需在您的计算机上创建脚本，然后将path变量更改为您帖子的位置。

希望它有所帮助，我也wrote a blog post about this issue

自动将宽度和高度属性添加到图像标记

2 个答案:

如何使用