Resize post image (like footer / header)

[datafig]

I am trying to figure out if it would be possible to dynamically resize the main image displayed with the post just like the header and footer.

When a window size is reduced or if the viewing environment is mobile, the theme correctly resizes the footer (default image: typewriter) but the main image associated with the post is cropped.

[Benjamin Dunphy]

Seconded. I was actually thinking of just substituting the post banner image using a media query, but it doesn't appear possible (or at least easy) with the yaml front matter.

any solutions are welcome.

[Benjamin Dunphy]

Ok, I figured it out. Turns out it is possible to add custom yaml front matter items. Hooray!

Here's what I did:

In main.sass, I added a few media queries:

.post
  .article-image
    position: absolute
    background-color: #000
    top: 0
    left: 0
    right: 0
    bottom: 0
    overflow: hidden
    @media(min-width: 700px)
      .post-image-image
        background-size: cover
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: 0
        text-indent: -9999px
        padding-top: 33%
        z-index: 1
      .post-image-image2
        display: none
    @media(max-width: 700px)
      .post-image-image
        display: none
      .post-image-image2
        background-size: cover
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: 0
        text-indent: -9999px
        padding-top: 33%
        z-index: 1

In your /_posts/current-article assort the yaml front matter something like this:

---
layout: your-layout
title:  "Awesome blog title"
date:   2015-11-30 14:34:25
categories: some-category
image: /filepath/image-banner.png
image2: /filepath/image-banner-mobile.png
---

Finally, in /_layouts/post.html add the mobile code banner as such:

<div class="article-image">
          <div class="post-image-image" style="background-image: url({% if page.image %}{{ page.image }}{% endif %})">
            Article Image
          </div>
          <div class="post-image-image2" style="background-image: url({% if page.image2 %}{{ page.image2 }}{% endif %})">
            Article Image
          </div>

Of course, make sure that you've saved your mobile banner image and it's in the proper filepath.

Happy responsive coding ;)

[Dirk Fabisch]

I added your solution to the master branch in pull request #56. Thanks!