Modify img tag in post's markdown using Jekyll Hooks

Question

I have a Jekyll blog with 1,000s of posts. Now I'm planning to use Cloudflare Image Resizing to optimize the website. To make it happen I need to modify the image tag rendered from the markdown files.

In markdown file:

![Apple](images/apple.jpg)

Rendered image tag:

<img src="images/apple.jpg" alt="Apple">

How I want it to be:

<img src="/cdn-cgi/image/width=80,quality=75/images/apple.jpg" alt="Apple" >

Thanks in advance

Answer 1

The very last hook that gets called before writing posts to disk is :posts, :post_render. We can modify output at this hook to make edits to rendered posts and draft posts, regardless of whether they were originally written in Markdown or HTML:

module JekyllPluginHooks
  Jekyll::Hooks.register(:posts, :post_render) do |post|
    post.output.gsub!('<img src="images/', '<img src="/cdn-cgi/image/width=80,quality=75/images/')
  end
end

Terminology

• A Jekyll post includes drafts and blog posts.
• A Jekyll document includes web pages in all collections, including drafts and blog posts.
• A Jekyll page is a web page that does not belong to a collection, such as posts or drafts.

For Completeness

To modify all web pages in every collection, not just drafts and posts, use the :documents hook instead of the :posts hook in the above code example:

module JekyllPluginHooks
  Jekyll::Hooks.register(:documents, :post_render) do |document|
    document.output.gsub!('<img src="images/', '<img src="/cdn-cgi/image/width=80,quality=75/images/')
  end
end

To also modify web pages that are not in a collection (for example, /index.html) also write:

module JekyllPluginHooks
  Jekyll::Hooks.register(:pages, :post_render) do |page|
    page.output.gsub!('<img src="images/', '<img src="/cdn-cgi/image/width=80,quality=75/images/')
  end
end

If we want all web pages to be modified, we can rewrite the above and extract the common code to a new method called modify_output:

module JekyllPluginHooks
  def modify_output
    Proc.new do |webpage| 
      webpage.output.gsub! \
        '<img src="images/', \
        '<img src="/cdn-cgi/image/width=80,quality=75/images/'
    end
  end

  module_function :modify_output

  Jekyll::Hooks.register(:documents, :post_render, &modify_output)
  Jekyll::Hooks.register(:pages, :post_render, &modify_output)
end

References

• https://jekyllrb.com/docs/plugins/hooks/
• https://www.mslinn.com/blog/2022/03/28/jekyll-plugin-template-collection.html