Skip to Main Content

ReadMe

This website is a work-in-progress. This will be my personal website/blog.

Done

To-Do Soon

Filling Out Content & Style

More Advanced Features

Publishing

Misc Inspiration

Documentation/Notes to Self

Liquid

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

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" %}

Good alt text is contextual. If a 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."

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.