Skip to Main Content

ReadMe

This is my personal website/blog.

To learn more about this website, view About This Site.

Features to Add

Inspiration

Documentation/Notes to Self

Liquid

Read Liquid documentation at: https://shopify.github.io/liquid/.

Feeds

Images

Save images to /assets/images/. Give images a human-readable name like desk-keyboard-notebook.jpg.

Aim for three different file sizes of each image. For example: desk-keyboard-notebook-600.jpg, desk-keyboard-notebook-1200.jpg, and desk-keyboard-notebook-2400.jpg. Remember to create a .license file for each image.

Image Collection

For each unique image, create a file in /collections/_images/ for that file. Structure the file as follows:

---
SPDX-FileCopyrightText: 2021 Cam Coulter <git@camcoulter.com>
SPDX-License-Identifier: CC0-1.0
title: desk-keyboard-notebook
alt: "A keyboard, a notebook, headphones, and a cup of coffee rest upon a wooden light desk."
source: "/assets/images/desk-keyboard-notebook-600.jpg"
srcset: "/assets/images/desk-keyboard-notebook-1200.jpg 1200w, /assets/images/desk-keyboard-notebook-2400.jpg 2400w"
width: 600
height: 397
link: https://unsplash.com/photos/GnvurwJsKaY
---

Photo by <a href="https://unsplash.com/@goumbik?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Lukas Blazek</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

The body of the file should be a caption. This file is used with the /_includes/image.html file to easily and quickly create the HTML for the image anytime it is needed.

Image Include

/_includes/image.html makes it easy to add an image. Use the include like so:

{% include image.html image="desk-keyboard-notebook" %}

You can also use the include to reference a page’s featured image like so:

{% include image.html image=page.image %}

The resulting code will be a figure element, and it will pull the src, srcset, alt, width, and height values from the corresponding file in /collections/_images/. It will also display the caption (if any) stored in that file.

You can also add a class to the figure element like so:

{% include image.html image="cam-coulter" figClass="About__Headshot" %}

The image include defines a standard sizes attribute, which should work well enough in most cases, but you can pass through a custom sizes attribute. This is done for the featured images on the homepage. You can do that like so:

{% include image.html image=post.image figClass="recent-post_image doNotPrint" sizes="(min-width: 21rem) 21rem, 100vw" %}

Good alt text is contextual. If an image is used in different contexts, you may want to use different alt text. You can do that with this include like so:

{% include image.html image="desk-keyboard-notebook" alt="this is different alt text" %}

What if you want to use different alt text for a post’s featured image? Include image_alt in the frontmatter like so:

image: desk-keyboard-notebook
image_alt: "This is alternative alt text."

What if you want to suppress the caption and mark an instance of an image as decorative? For example, this is done with the feature images for blog posts on the homepage, where they really only serve a decorative purpose. You can do that like so:

{% include image.html image=post.image caption="False" decorative="True" %}

Image Metadata

In practice, add a featured image to every post.

However, code this website in such a way that featured images are not technically required:

The same goes for alt text. In practice, be sure to include alt text for every image in the images collection. In practice, code the site such that alt text is only included if it exists.