Jekyll using data-src for images

Question

Using Jekyll I'm trying to use data-src instead of src for all my images.

What's the best way to go for it? Create my own plugin? I don't think using an include is a great option...

Right now I'm adding the images like this:

![my alt text]({{"http://example.com/myImage.gif"}})

I've seen related issues but the answers always recommend to use external libraries. Isn't there any more straight forward way to go for it?

score 2 · Answer 1 · answered Nov 23 '17 at 19:38

As suggested by @JoostS you can create a plugin, more specifically a custom liquid tag.

For example using:

<p>{% render_img http://example.com/myImage.gif "my alt text" %}</p>

You can have the render_img plugin in _plugins/images.rb:

module Jekyll
  class RenderImgTag < Liquid::Tag

    def initialize(tag_name, variables, tokens)
      super
      @variables = variables.split(" ", 2)
      @url = @variables[0]
      @alt = @variables[1]
    end

    def render(context)
      "<img data-src='#{@url}' alt='#{@alt}' />"
    end
  end
end

Liquid::Template.register_tag('render_img', Jekyll::RenderImgTag)

Thank you. Work it. – Fatih Hayrioğlu Mar 21 '18 at 12:44 — Fatih Hayrioğlu, Mar 21 '18 at 12:44

score 0 · Answer 2 · answered Nov 23 '17 at 18:21

0

Yes, I think that that creating your own plugins is the (only) right solution here. Includes cause polluted content and javascript is not really an option here.

answered Nov 23 '17 at 18:21

Mr. Hugo

11,887
3
42
60

Regarding the creation of plugins.. i don't really find very clear or straight forward docs. I'm having issues creating a ` – Alvaro Nov 23 '17 at 18:49

Jekyll using data-src for images

2 Answers2