I've been working on my portfolio site using jekyll, and everything seems to work just great locally. So, the next step for me was to push it up to github inside a gh-pages branch, and when I do that, I receive an email with the error below.
The tag responsive_image on line 20 in _layouts/post.html is not a recognized Liquid tag.
The gem that I'm trying to use is Jekyll Responsive Images.
Like I said before, when I run jekyll serve, I get no errors and I can run my jekyll site just fine locally, but for some reason this error is keeping my site from working with github. My post.html file looks like this.
---
layout: default
---
<article class="article--container">
<header class="heading--articles">
<h1 class="page-title">{{ page.title }}</h1>
<p class="post-date">
posted on {{ page.date | date: "%b %-d, %Y"}}
</p>
{% if page.featured_image %}
<div class="post-image">
<img src="{{ page.featured_image }}" alt="{{ page.title }} featured image">
</div>
{% endif %}
</header>
<div class="post--body">
{{ content }}
</div>
{% if page.post_images %}
<section class="post--images">
<a href="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_landscape.png" class="box let-there-be-light">
<span class="msg">Let there be light</span>
{% responsive_image path: img/image.png alt: "Project Images" title: "Project Images"%}
</a>
</section>
{% endif %}
</article>
In my _includes folder, I had to make a include for the responsive_images gem and it looks like this
{% capture srcset %}
{% for i in resized %}
/{{ i.path }} {{ i.width }}w,
{% endfor %}
{% endcapture %}
<img src="/{{ path }}" srcset="{{ srcset | strip_newlines }} /{{ original.path }} {{ original.width }}w">
And here's my config.yml file for anyone wondering
# Welcome to Jekyll!
#
# This config file is meant for settings that affect your whole blog, values
# which you are expected to set up once and rarely need to edit after that.
# For technical reasons, this file is *NOT* reloaded automatically when you use
# 'jekyll serve'. If you change this file, please restart the server process.
# Site settings
title: Portfolio
email: [email protected]
description: > # this means to ignore newlines until "baseurl:"
baseurl: "" # the subpath of your site, e.g. /blog
url: "http://example.com" # the base hostname & protocol for your site
twitter_username: test
github_username: test
permalink: /:categories/:title
links:
- title: about
url: /about
- title: projects
url: /projects
- title: articles
url: /articles
# Build settings
markdown: kramdown
gems:
- octopress-autoprefixer
gems: [jekyll/responsive_image]
responsive_image:
# [Required]
# Path to the image template.
template: _includes/responsive-image.html
# [Optional, Default: 85]
# Quality to use when resizing images.
default_quality: 90
# [Optional, Default: []]
# An array of resize configuration objects. Each object must contain at least
# a `width` value.
sizes:
- width: 350
quality: 80
- width: 480 # [Required] How wide the resized image will be.
quality: 80 # [Optional] Overrides default_quality for this size.
- width: 800
quality: 90
- width: 1400
quality: 90
# [Optional, Default: assets/resized/%{filename}-%{width}x%{height}.%{extension}]
# The template used when generating filenames for resized images. Must be a
# relative path.
#
# Parameters available are:
# %{basename} Basename of the file (assets/some-file.jpg => some-file.jpg)
# %{filename} Basename without the extension (assets/some-file.jpg => some-file)
# %{extension} Extension of the file (assets/some-file.jpg => jpg)
# %{width} Width of the resized image
# %{height} Height of the resized image
#
output_path_format: img/resized/%{width}/%{filename}-%{width}x%{height}.%{extension}
Has anyone had this problem with the responsive images gem? I can't seem to google an answer to this. Any help would be greatly appreciated.
