Search code examples
rubycontinuous-integrationnokogirijekylljekyll-extensions

Ingore tag using html-proofer with jekyll


I have a site hosted with github pages built using Jekyll.

One of the plugins I have installed in html-proofer. This was working fine until I switched my images to use picturefill.

By using Picturefill, I am using the currently invalid <picture> tag. This causes html-proofer to fail when I deploy.

So my question - how can I tell html-proofer to ignore all <picture> tags?

My setup:

gemfile:

source 'https://rubygems.org'
gem 'github-pages'
gem 'html-proofer'

.travis.yml:

language: ruby
rvm:
- 2.1
script: script/cibuild

sudo: false

env:
  global:
  - NOKOGIRI_USE_SYSTEM_LIBRARIES=true # speeds up installation of html-proofer

script/cibuild:

set -e # halt script on error
bundle exec jekyll build
bundle exec htmlproof ./_site

UPDATE:

I've found that it's not actually the <picture> element that is causing the problem, but rather the <img> tag inside it. This is because the <img> does not have a src but rather a srcset:

<picture>
    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)">
    <source srcset="examples/images/large.jpg" media="(min-width: 800px)">
    <!--[if IE 9]></video><![endif]-->
    <img srcset="examples/images/medium.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
</picture>

Adding data-proofer-ignore to the img tag solves the problem, but I'd rather not have to do this on every instance.


Solution

  • I posted an issue on the html-proofer repo, where I was told that the srcset error is a bug.

    Unfortunately, the maintainer indicated that there is no way to ignore specific tags when running the plugin:

    See https://github.com/gjtorikian/html-proofer/issues/149