Verified Commit d1c26f14 authored by Sheogorath's avatar Sheogorath 🛫

WIP: Add size indicators to all images

This experiment is trying to provide size indicators to the images in
order to prevent reflowing of the page on lazy-loading the image.

Currently when scrolling down on a page, reloading it and scrolling up,
the page starts to jump around when the images are loaded. This attempt
tries to fix this. And while working, it produces other problems like
height irritations of the images.
parent 77ee35cd
Pipeline #2265 passed with stages
in 9 minutes and 49 seconds
......@@ -6,3 +6,4 @@ gem 'github-pages'
gem 'nokogiri'
gem 'html-proofer'
gem 'octopress-minify-html'
gem 'image_size', '~> 2.0', '>= 2.0.2'
......@@ -98,6 +98,7 @@ GEM
htmlentities (4.3.4)
i18n (0.9.1)
concurrent-ruby (~> 1.0)
image_size (2.0.2)
jekyll (3.6.2)
addressable (~> 2.4)
colorator (~> 1.0)
......@@ -271,6 +272,7 @@ PLATFORMS
DEPENDENCIES
github-pages
html-proofer
image_size (~> 2.0, >= 2.0.2)
jekyll
jekyll-paginate-v2 (~> 3.0.0)
nokogiri
......
require 'nokogiri'
require 'image_size'
Jekyll::Hooks.register([:pages, :posts], :post_render) do |post|
rendered_doc = Nokogiri::HTML.parse(post.output)
......@@ -6,6 +7,10 @@ Jekyll::Hooks.register([:pages, :posts], :post_render) do |post|
if images.length > 0
images.each do |img|
img['loading'] = "lazy"
path = img['src'].gsub(Regexp.new(Regexp.escape(post.site.config['url'])), '')
img_file = ImageSize.path(File.join(".", path))
img['width'] = img_file.width
img['height'] = img_file.height
end
post.output = rendered_doc.to_html
end
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment