Chuck Grimmett

Archives

Month: September 2016

  • Category Filtering with Isotope in Jekyll

    This is the most recent addition to my Jekyll Tools repository on GitHub. Isotope is a popular jQuery filtering and sorting plugin. I combined it with Liquid to generate category filtering in Jekyll.

    You can see it in action at http://cagrimmett.com/category-isotope/.

    You can find the code for this in my Jekyll Tools repo on GitHub.

    This works by using YAML front matter to set categories and then outputting those categories as buttons and class names to work with the Isotope plugin.

    Generate the buttons from categories:

     class="button-group filter-button-group"> 	{% for category in site.categories %} 		 class="button" data-filter=".{{ category | first }}">{{ category | first }} 	{% endfor %} 		 class="button active" data-filter="*">All

    Generate your posts:

      class="grid"> 	{% for post in site.posts %}       class="element-item {{ post.category }}">          class="post-meta">{{ post.date | date: "%b %-d, %Y" }}          
                class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}         
              
               {{ post.excerpt }}
    {% endfor %}

“All” is selected by default. The other buttons come from the category you specify at the top of a post in your YAML front matter.

Include the jQuery and Isotope libraries, then set up the functions to trigger the filtering and setting an “active” class on your buttons so you can highlight the active one:

  
// init Isotope var $grid = $('.grid').isotope({   // options }); // filter items on button click $('.filter-button-group').on( 'click', 'a', function() {   var filterValue = $(this).attr('data-filter');   $grid.isotope({ filter: filterValue }); }); $('.button-group a.button').on('click', function(){ 	$('.button-group a.button').removeClass('active'); 	$(this).addClass('active'); });

  • Point Reyes National Seashore

    Amanda and I spent a few days in California wine country at the end of March before we drove over to Yosemite. We were kind of disappointed in wine country because we expected to learn a lot more than any of the tour guides seemed to be interested in teaching us, so we took one of the days and drove over to the Point Reyes National Seashore.

    That was a much better choice than visiting more wineries. The weather was wonderful and the scenery was incredible. We spend the morning horseback riding through parts of Point Reyes with the Five Brooks Ranch, then hopped in the car and drove out to the lighthouse point.

    Point Reyes Lighthouse

    Cliffs at Point Reyes

    Cliffs at Point Reyes

    Waves at Point Reyes

    Amanda in the Wind at Point Reyes

    Waves at Point Reyes

    Point Reyes Lighthouse

    Waves at Point Reyes

    Point Reyes Sand Dunes

    Point Reyes Pier

    Point Reyes golden hour

    Point Reyes golden hour

    Fishing boat, Point Reyes

    We got to see elephant seals for the first time, which was pretty awesome. They were so much louder than I was expecting. We could hear them from 1/4 mile away. It was windy and the temperature was dropping around golden hour, but we didn’t care. We stood and watched the seals for at least 30 minutes.

    Point Reyes golden hour

    Point Reyes has a number of leased ranches and pastures inside its borders. What a great place to be a cow!

    Cows grazing inside Point Reyes during the sunset

    Cows grazing inside Point Reyes during the sunset

  • Jekyll 3.2 Undefined Method Downcase Error

    I upgraded to Jekyll 3.2.1 recently and got a strange error message when I ran jekyll build:

    jekyll 3.2.1 | Error:  undefined method 'downcase' for #

    After some searching, I came across an open issue related to this on Github.

    The issue seems to be caused by a change in 3.2 that now reserves the config key theme to specify a gem-based theme for Jekyll. This means that you can’t use the key theme in your config.yml file to specify config settings for your jekyll theme. This was a standard practice for a lot of older Jekyll themes, so I expect this to be a somewhat common problem.

    For example, in my config.yml file, I had the following:

    # THEME-SPECIFIC CONFIGURATION theme:   # Meta   title: Chuck Grimmett   avatar: avatar.png   gravatar: # Email MD5 hash   description: "Chuck Grimmett's blog" # used by search engines

    The fix is to change the theme key to something else. I chose template. You not only have to change this in your config.yml file, but you also have to change anywhere that accesses it in your template files. The string you are looking for here is site.theme.* and is usually in your includes and layout files (look for folders called _includes and _layouts).

    I changed that section of my config.yml to this:

    # THEME-SPECIFIC CONFIGURATION template:   # Meta   title: Chuck Grimmett   avatar: avatar.png   gravatar: # Email MD5 hash   description: "Chuck Grimmett's blog" # used by search engines

    Then I did a global search for site.theme. and replaced it with site.template.