In order to make the site stand out, and also to support media types most common to the internet, I’ve quickly styled up a featured image container. This code uses the assets plugin, and results in a simple styled image at the beginning of each post.

The images themselves are inserted via the jekyll-assets plugin. The snippet of code that renders them using the assets plugin looks like this:

<div class="featured-image-container">
  <figure>
    <div class="box">
      {% if include.post.featured-image.src %}
      {% asset
          "{{ include.post.featured-image.src }}"
          magick:resize=400x400>
          alt="{{ include.post.featured-image.alt }}" %}
      {% endif %}
    </div>
  </figure>
</div>

The asset liquid tag comes courtesy of jekyll-assets. It allows me to resize the image via ImageMagick so that the images don’t end up too large, and it uses the variables in the featured-image front matter to determine the source and alt text for the image. I’ve put this code in a component called featured-image.html. Any post can include it and provide the necessary variables to use a featured image. Including the featured image from a post looks like this:

---
featured-image:
    src: tahoe.jpg
    alt: "Lake Tahoe"
---

<div class="content">
    

<div class="featured-image-container">
  <figure>
    <div class="box">
      
      <img alt="Lake Tahoe" integrity="sha256-rJYE1ALBPyU+XSD7S4P2kJpbQGKIm5HP/wiuGtHPE+s=" crossorigin="anonymous" src="/assets/generated/237d7c-1f15e14edf15d5aad00a59ae64a0df892d82348d6e601f4d72889423413adb1b.jpg">
      
    </div>
  </figure>
</div>

</div>

I’ve added this html snippet to the post layout as well as the post-snippet component so that any post can include it for free. It’s also interesting to note that this is the first template that requires a variable to be passed into it. By default when processing a post, Jekyll stores all information about the post, including its front-matter, in the variable called page. The template passes the page variable into the component featured-image.html. All the variables passed via the include liquid tag get stored in the variable called include (fitting, huh?). That is why the YAML front-matter is referenced as include.post.featured-image instead of just post.featured-image.

To get the image just right, I needed to tweak a few CSS properties of Bulma. The current method I use to organize the styling in this theme is via a main assets/nn.scss file. It looks like this:

---
# This file needs front matter in order for Jekyll to process Sass
---

@import "nn-main";

This is a dummy file that imports another SASS file called nn-main.scss. That serves as the main entrypoint for the styling of the theme. The reason I have an additional import is so that I can separate the styles as they would be organized in a main SASS project from the portion required to make Jekyll process the styles.

Anyways, back to the style changes that needed to be tweaked. I created another SASS file called _bulma-tweaks.scss that gets imported by nn-main.scss. This file is where I can place all the custom rules to override Bulma as much as I need. Here’s the change I made for the featured-image:

.featured-image-container {
    display: flex;
    justify-content: center;
}

This just makes sure that the image shows up in the center of the containing box. There was one last thing missing that I hadn’t realized up to this point: when I looked at the front page of the site, I noticed that all the text for posts that included this image went missing. The root cause of this is how Jekyll determines what an excerpt should look like. Because the featured-image component added extra HTML, Jekyll thought that was sufficient for the excerpt and removed the text. Thankfully, there’s a way to get it back. Jekyll considers a config variable called excerpt_separator: when determining how to make post excerpts. Defining the variable in the file _config.yml will cause Jekyll to consider all text before the matching string the post excerpt.

excerpt_separator: <!-- excerpt separator -->

I’ve backfilled this comment in all earlier posts and updated the Rakefile to generate a post with an excerpt separator so that I always have control over where to split the post. With all of these small changes in place, I am able to include images in a more pleasing manner.

In the future, I plan to add a way to view the full-size original asset as well as include images throughout the post. This featured-image component provides a great starting point for all this future work.