htmljekyll

Automatically add width and height attributes to image tag


I am trying to write a script that automatically add image width and height to all my img. I've already seen this question:

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

But I am using jekyll.

My first thought was execute grep on my posts directory and for each occurence of an img, get the image URI and compute its size. Is this possible?

I have also take a look to fastImage, but it does not work well with Jekyll and local files (Here is a Jekyll filter)

Could you give me some hits on how to accomplish this?


Solution

  • I finally came up with a solution, a python script, here it is (I've also created a github gist).

    Here is the main idea behind the code:

    The code:

    #!/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))
    

    How to use

    Just create the script in you machine and change path variable to point where your posts are.

    Hope it helps, I've also wrote a blog post about this issue