diff --git a/Gemfile b/Gemfile index 52e78e8ce8..e460b0e880 100644 --- a/Gemfile +++ b/Gemfile @@ -23,6 +23,8 @@ end gem "nokogiri" gem "open-uri" +gem "fastimage" + # Maybe in the future # https://rubygems.org/gems/jekyll-scholar # https://rubygems.org/gems/jekyll-assets diff --git a/_plugins/lazyloading.rb b/_plugins/lazyloading.rb new file mode 100644 index 0000000000..bb413bc1fe --- /dev/null +++ b/_plugins/lazyloading.rb @@ -0,0 +1,32 @@ +# _plugins/image_aspect_ratio_hook.rb +require 'nokogiri' +require 'fastimage' + +Jekyll::Hooks.register :pages, :post_render do |doc| + # Process only HTML output from markdown + next unless doc.output_ext == ".html" + + # Parse the document's HTML output using Nokogiri + doc_html = Nokogiri::HTML(doc.output) + + # Find all tags in the HTML + doc_html.css('img').each do |img| + # Get the image's src attribute + img_src = img['src'] + + # Check if the image exists and can be processed + if File.exist?(img_src) + # Get the image dimensions using FastImage + width, height = FastImage.size(img_src) + next unless width && height + + gcd = width.gcd(height) + # Add a style attribute to the img tag with the aspect ratio + img['style'] = "#{img['style']} aspect-ratio: #{width / gcd} / #{height / gcd};" + img['loading'] = "lazy" + end + end + + # Save the modified HTML back to the document + doc.output = doc_html.to_html +end