Jan Humphries

Combining Jekyll With Focal Point CSS Adaptive Images For Smart Thumbnail Images

July 29, 2013


Focal Point: Intelligent Cropping of Responsive Images is an excellent article on design shack introducing Focal Point CSS, a project on GitHub by Adam Bradley that sets up a small collection of CSS classes designed to crop images while keeping a focal area in view. This is a great solution to simple resizing of images to create smaller thumbnails without losing the important part of the picture.

Take for example my doodle here of some flowers. The basic setup for CSSing a thumbnail would be to wrap the image in a div with a fixed size and overflow set to hidden:

<div class="post-thumbnail"><img alt="Image for " src=""></div>

.post-thumbnail {
  height: 12em;
  overflow: hidden;

.post-thumbnail img {
  width: 100%;

However, this top-aligns my image with the div, and the flowers below get cut off. Not so pretty.

Basic Flower Thumbnail

I had come across some online posts about cropping image thumbnails using CSS, and wanted to go back to those and find a more advanced solution. Thus, I came across Focal Point. I’ll let you read the details if you wish, but the basic concept is that Focal Point defines classes that apply negative margins to your image based on where you want the focus to be. For each image, simply add one of the Focal Point classes for horizontal offset and another for vertical, and it will not only use negative margins to make that area you define as the focus, but because they are all based on percentages, it’s also responsive.

The basic structure for using Focal Point is an image wrapped in two divs. To use the example from the design shack post:

<div class="focal-point right-3 up-3">
  <div><img src="guy.jpg" alt="guy"></div>

Here you can see that the container div has three important classes: .focal-point center the image, .right-3 (horizontal), and .up-3 (vertical). Super straightforward. These are all you need for landscape oriented images. For portraits, you also need to add a .portrait class to your image.

The Challenge

My question was: could I still use Focal Point on my Jekyll-based blog, which generates a static page of blog posts using a loop? Because it’s using a loop to generate the post content couched in HTML, I would have to build the site after each post, and then go in and add the correct classes by hand to the markup - every time, for every image - and the classes would be different for every image. And nobody got time for that. Here is my loop:

    <div class="row-fluid featured-post">
        <h2> <a href="/at-dbc-everything-was-ridiculous" rel="bookmark" title="Permanent link to Everything Was Ridiculous: Reflections A Year Past DBC">Everything Was Ridiculous: Reflections A Year Past DBC</a> </h2>
        <div class="row-fluid"><!-- post content -->
            <div class="post-info row-fluid span5">
                <span class="meta"> May  4, 2016 </span>
                <p> <figure class="float--right post-body-figure">   <img src="assets/post-images/sea-liono-1.jpg" />
DBC names each cohort, regardless of location, after an animal of some sort. We were the Sea Lions.


</p> </div> <div class="row-fluid span6"> <div class="post-thumbnail"> Image for Everything Was Ridiculous: Reflections A Year Past DBC </div> </div> </div> </div>

    <div class="row-fluid featured-post">
        <h2> <a href="/blog-design" rel="bookmark" title="Permanent link to Iterative Design and Redesign">Iterative Design and Redesign</a> </h2>
        <div class="row-fluid"><!-- post content -->
            <div class="post-info row-fluid span5">
                <span class="meta"> February 20, 2015 </span>
                <p> <!-- <h4>Phase 0 Unit 3 Week 9 | Technical Blog #9</h4> <span class="meta">Feb 20, 2015</span> <a href="http://jannypie.github.io/blog/t9-blog-update.html" title="Read more">Read this blog post</a> -->

Feb 20, 2015

I've consistently update this site, so revisiting it for a redesign is a common activity for me. I already had my blog running Jekyll, and I did have Bootstrap CSS when I was learning how to use it, but I have since removed it in order to use 100% my own code. In addition, I already have a GitHub website tied to a custom domain (jandennison.com, my web dev portfolio repo). So, I feel that it is maturing quite nicely and in tandem with my own education.

I do still feel that there is quite a bit of room for growth, as well. It's not where I want it to be quite yet, but I'm working on it a little bit at a time. I'm going for an interesting and attractive, but clean and spacious look and feel for the entire site. I plan to carry over this layout to my web development portfolio as well, so that they have a consistent look.

I have received several good pieces of feedback about my blog, such as:

  • "Nice vibrant colors on your site. It's very eye-catching!"
  • "Love the colors and background pic in the header!"
  • "that is a vulgar amount of mustache!"
  • "I really like your blog layout and scheme."
  • "The layout works well on my phone."
  • "First impression, is oooh pretty. Scroll down, there's content! In Snoop Dogg latin too! Second impression, serious content follows the lorem ipsum."
  • "I love the look of the website! So pretty and clean looking. Inspired."

Some helpful, actionable feedback I've gotten has been:

  • "The Introduction link brings me down to the bottom of the page, but since the intro paragraph starts midway through the view of the bottom page, I had to look around for a little bit before I actually found it. This might confused others as well."
  • "I noticed that there are many links at the bottom, to pages I probably would have found more interesting, if I had seen them ten minutes ago. Oh look, those links are also at the top! Why did I not notice those links before?"
  • "The way the background image loads is visually jarring, make it smaller or more subtle"
  • General comments regarding text alignment and whitespace, and keeping link styles uniform

I plan to take all of these and use them to better my site. I've already moved the "Introduction" section up higher on the page so that it goes to the top when the anchor link is clicked. I'm also working on a modified nav of links that I'm actually pretty excited about. My typography as well could use some playing around with until it flows just right, and I'm working on finding a balanced approach of image resolution versus compression for the big header image. Typography continues to be one of the more challenging of design for me, but I won't give up!

</p> </div> <div class="row-fluid span6"> <div class="post-thumbnail"> Image for Iterative Design and Redesign </div> </div> </div> </div>

    <div class="row-fluid featured-post">
        <h2> <a href="/dbc-c9-questions" rel="bookmark" title="Permanent link to Help! Here we go!">Help! Here we go!</a> </h2>
        <div class="row-fluid"><!-- post content -->
            <div class="post-info row-fluid span5">
                <span class="meta"> February 19, 2015 </span>
                <p> <!-- <h4>Phase 0 Unit 3 Week 9 | Cultural Blog #9</h4> <span class="meta">Feb 19, 2015</span> <a href="http://jannypie.github.io/blog/c9-questions.html" title="Read more">Read this blog post</a> -->

Feb 19, 2015

If you're like me, you've been stuck on a coding problem at some point. Maybe more than once (she says, vastly understatingly). And after you stubbornly try to work it out for probably longer than you should, you finally realize: you need to ask someone else. Enter: asking questions on the internet. Yes, that ominous music you just heard is justified. Luckily when you're just asking coding questions, you're not likely to get into the bad internet stuff, but you are quite likely to not get any reply at all, or get the wrong reply if someone misunderstood your question. So how do you write a good question that gets the answer you need?

Good questions:

  • Include any background research you've done and approaches you've tried, so that people don't suggest things you already know.
  • Include details on any software you're running that might impact results - Windows or Mac? Chrome, Firefox, IE? Which version?
  • Are asked in places that are more likely to get replies (forums, StackOverflow, etc).
  • Have a summary of your problem as an introduction.
  • Include sample code snippets.
  • Have a title summarizing your problem in one sentence.
  • Explain your issue fully, but precisely. Don't go on and on or your readers will be moving on.

In the past, I've tried asking questions on Twitter and gotten hit-or-miss responses. Sometimes it's a great way to get short, quick answers, but sometimes it gets lost in the shuffle of people's feeds. For more in-depth answers, look on forums or Q/A sites, or look for mentors who can answer in person or through email.

</p> </div> <div class="row-fluid span6"> <div class="post-thumbnail"> Image for Help! Here we go! </div> </div> </div> </div>

    <div class="row-fluid featured-post">
        <h2> <a href="/dbc-c8-conflict" rel="bookmark" title="Permanent link to Breathe Deeply And Think Clearly">Breathe Deeply And Think Clearly</a> </h2>
        <div class="row-fluid"><!-- post content -->
            <div class="post-info row-fluid span5">
                <span class="meta"> February 15, 2015 </span>
                <p> <!-- <h4>Phase 0 Unit 3 Week 8 | Cultural Blog #8</h4> <span class="meta">Feb 15, 2015</span> <a href="http://jannypie.github.io/blog/c8-conflict.html" title="Read more">Read this blog post</a> -->

Feb 15, 2015

Writing about conflict

Conflict is very difficult for me, and something I have worked hard on in the past to grow and develop through. As kids, my siblings and I were never taught good conflict resolution skills, to put it mildly. As a result, there was a learning curve for me for dealing with conflict in constructive and temperate ways.

I've been stuck with writer's block thinking of a specific instance for too long for this post, so I'm just going to write about conflict in general. Many sources of conflict for me have come from poor communication, crossed wires, and jumping to be defensive. Almost always, the greatest emotion underlying anger I felt was frustration - whether I felt I wasn't being heard, or, honestly, that things weren't going the way I wanted. Often, I find myself wanting to defend myself, because I felt someone wasn't valuing my input, or taking my feelings into consideration.

As a child who thought that normal conflict resolution meant yelling and slamming doors, active resolution took a long time to learn. Once I entered my adult years, and realized my failings, I have worked towards reprogramming my reactions. Now when I recognize a conflict has come up, I stop myself and take deep breaths. I push the pure emotion out of me and look at it for the underlying causes. I evaluate what I am trying to communicate, and what, specifically, is frustrating me about the conflict. Sometimes I do still need to step away, if the conflict is particularly intense, and collect myself in a quiet space. I'm not always successful, but I do continually try.

Learning new conflict resolution skills is an ongoing process. I've gotten really great advice from friends that I work to keep in mind and practice. For example, during conflict, give the benefit of the doubt, or, assume that I am the one misunderstanding, and ask for clarification. Being generous and charitable in our dealings with others, rather than jumping to defend ourselves, has been the most effective way for me to resolve conflict not only in a way that diffuses the situation, but builds bridges for even better communication going forward.

</p> </div> <div class="row-fluid span6"> <div class="post-thumbnail"> Image for Breathe Deeply And Think Clearly </div> </div> </div> </div>

The basic structure of which is:

loop through the posts, and for each post
        left column
        right column
end loop

I wondered if there was a way to define the necessary classes beforehand in the body of the post and then pass those to the loop to be included in the markup.

The Solution

The answer to the question was actually very simple - using custom YAML key:value pairs in the head of each post to define the focal point of the image, and then applying Liquid output structure to pass them to the markup. I defined three custom variables (horizontal, vertical, and orientation) in the YAML front matter of each post:

layout: "post"
title: "Combining Jekyll With Focal Point CSS Adaptive Images For Smart Thumbnails"
image: "/assets/post-images/IMG_0746.jpg"
focal-vert: down-6
focal-horz: right-3
orientation: portrait

Then, using our Liquid templating variables, I set the value of each pair as a class in the loop markup:

<div class="post-thumbnail focal-point   ">
        <div><img alt="Image for " src=""></div>

Which results in markup for this image:

<div class='post-thumbnail focal-point portrait left-1 down-6'>
    <div><img alt='Image for Combining Jekyll With Focal Point CSS Adaptive Images For Smart Thumbnails' src='/assets/post-images/IMG_0746.jpg' /></div>

And here is the side-by-side image again for comparison:

Focal Point comparison

I do again highly recommend the design shack post for further reading, because the author Joshua Johnson does a great job of explaining how the whole grid works for selecting focus areas.