Example of minimal-mistakes + jekyll-picture-tag plugin?

[frankhecker]

First, thanks very much for contributing the Minimal Mistakes theme. I'm currently converting my blog from WordPress.com and looked through dozens of Jekyll themes before settling on Minimal Mistakes. It did about 90% of what I wanted, which is great because I'm not a web designer and not up to the task of making major mods to a theme. I did do a couple of minor changes, including adding MathJax support and the jekyll-tagging and related_posts plugins, but am stuck on my next change:

I post a fair number of architectural renderings and related very large images; the "Inner Arbor plan part 7" post on my under-construction site is a good example, with four 3000-x-something pixel images totaling almost 8MB. I would like to use the jekyll-picture-tag plugin to do responsive images, but even after reading the documentation and related posts multiple times I'm still not sure how to proceed. Could you or anyone else point me to a working example of a Minimal Mistakes-themed blog using the jekyll-picture-tag plugin?

[mmistakes]

I don't have a working example but for testing I tried out the jekyll-picture-tag plugin recently. I've been looking for a solution to help deal with responsive images on my own site and generating the necessary markup and various sized images.

By following the plugin's setup instructions I had no problem getting it to work. The tricky part is deciding on what you want all the width's to be and what breakpoints they should adjust at. The rest is just setting paths and what not in your _config.yml file. And then using the new {% picture %} Liquid tag anywhere you want to include a responsive image.

Here's roughly what I did if you want a quick example to get you started.

In _config.yml I added a default preset

picture:
  source: "images/_fullsize"
  output: "generated"
  markup: "picture"
  presets:
    default:
      ppi: [1, 1.5]
      source_large:
        media: "(min-width: 800px)"
        width: "800"
      source_medium:
        media: "(min-width: 600px)"
        width: "600"
      source_default: 
        width: "300"

What I did here was setup the source folder for the high-res images in /images/_fullsize and have them output the resized images to /generated/. PPI outputs the images at 1x and 1.5x (you could bump it up to 2x for retina but that'll give you larger file sizes or just stick with 1x if retina isn't a concern). Then I set 3 sample breakpoints from large to small (you'll have to play with the numbers to get everything optimized correctly to fit MM theme's main content size).

Then I copied the Picturefill script into /assets/js/vendor/ and added the following line to _head.html include to load the script.

<script src="{{ site.url }}/assets/js/vendor/picturefill.min.js"></script>

Then to include an image I used this Liquid in a post

{% picture sample.jpg alt="unsplash image" %}

Which will look in the images/_fullsize folder for sample.jpg and then output all of the various sizes and generate HTML that looks something like this.

<picture>
    <source srcset="/generated/sample-1200by800-c83ba5.jpg" media="(min-width: 800px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 800px) and (min-resolution: 144dpi)" />
    <source srcset="/generated/sample-800by533-c83ba5.jpg" media="(min-width: 800px)" />
    <source srcset="/generated/sample-900by600-c83ba5.jpg" media="(min-width: 600px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 600px) and (min-resolution: 144dpi)" />
    <source srcset="/generated/sample-600by400-c83ba5.jpg" media="(min-width: 600px)" />
    <source srcset="/generated/sample-450by300-c83ba5.jpg" media="(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)" />
    <source srcset="/generated/sample-300by200-c83ba5.jpg" />
    <img srcset="/generated/sample-300by200-c83ba5.jpg" alt="unsplash image" />
  </picture>

There's probably better examples out there if you Google around. The plugin isn't specific to MM theme so really any working example you fine should work. Really the only thing you need to do from a theme standpoint is modify a layout or include to load the Picturefill script. Everything else is making sure to install all the necessary dependencies the plugin needs to generate the images and markup.

[frankhecker]

Thanks, this is very helpful!

[frankhecker]

OK, I think I got this to work; the results of my test are at http://civilityandtruth.com/2013/12/10/the-inner-arbor-plan-takes-shape-part-7/

Note that I changed one line of what you wrote above; in the _head.html file I used the line below, eliminating the extra pairs of enclosing braces:

<script src="{{ site.url }}/assets/js/vendor/picturefill.min.js"></script>

After doing this test and thinking about it some more, I'm concluding that the full responsive images approach is likely overkill for what I need. The standard pattern I have is including a "regular" size image displayed along with the text content, with that image then linking to the full high-resolution 3000 (or whatever) pixel wide image for people who want to see that. For my purposes I think it's simpler to just have two sizes of image, the original 3000 pixel wide image to link to and a smaller 600 pixel wide version to include with the content. Using the smaller version decreases the image size by almost 15x, and the smaller version looks reasonably good on my iPhone and iPad and when resizing the page on my Mac.

But in any case again thanks very much for your help; you got me unstuck. I'm closing this issue.

P,S, for anyone else who might be interested in this topic: In the file _sass/variables.scss there is a set of five breakpoints defined (from "micro" to "x-large") that might provide useful guidelines when setting the picture presets in _config.yml. I didn't really look at trying to use those though, in large part because I wasn't sure exactly what width those breakpoints were referencing, and also because I wasn't sure how to use em units in the context of jekyll-picture-tag.

[mmistakes]

Nice. Glad it was helpful. And good catch on the double braces.

Your conclusion is pretty much what I came to. I generally size one image that's slightly larger than the main content container and then link to the full resolution version. While it would be great to have responsive images sized appropriately to improve page performance it was a bigger hassle than I cared to deal with right now. Especially when I have close to 1,000 posts I'd have to go back and swap in {% picture %} tags into.