CODEWITHSUNDEEP
htmljekyll
Alejandro Alcalde
Alejandro Alcalde

Reputation: 6220

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?

Upvotes: 5

Views: 2380

Answers (4)

Peter Kankowski
Peter Kankowski

Reputation: 176

Shameless plug: I wrote a search-and-replace tool that can add width and height attributes automatically. You need to use a built-in function that is similar to PHP's getimagesize and returns the correct width="..." height="..." string.

Upvotes: 0

JF.DEL NERO
JF.DEL NERO

Reputation: 31

I wrote this C tool for my own needs :

https://github.com/jfdelnero/TrucsEnVrac/tree/master/Tools/patch_html

This tool checks / fixes / add any missing/bad img "width" and "height" attributes. It also add any missing "alt" img attribute.

Run on Linux and need the "convert" tool.

Upvotes: 1

Shane Brinkman-Davis
Shane Brinkman-Davis

Reputation: 699

I wrote a plugin (jekyll-image-size) that does basically this, but it does it as a tag in your templates. For example, you can do this:

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

And it generates:

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

(with the actual width and height of the image file)

It also supports retina-image-scaling and many alternate output-formats beyond just IMG tags: opengraph tags, css-style props, html-props, and the raw width and height of the image.

Upvotes: 3

Alejandro Alcalde
Alejandro Alcalde

Reputation: 6220

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:

  • Iterate over all blog posts.
  • Find all img tags in each post.
  • Extract the content of the src attribute.
  • Open the image and extract its size.
  • Write image size in the img attribues width and height.

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

Upvotes: 4

Related Questions