Include Parameters

An include can be more than a fixed fragment.

You can pass values into it.

The official Jekyll Includes documentation exposes those values through the include scope.

Build a reusable callout

Create _includes/callout.html:

<aside class="callout callout--{{ include.kind | default: 'info' }}">
  <strong>{{ include.title | default: 'Note' }}</strong>
  <p>{{ include.content }}</p>
</aside>

Call it:

{% include callout.html
   kind="warning"
   title="Before publishing"
   content="Remove private information." %}

Trace the parameter

INCLUDE CALL
  content="Remove private information."
        ↓
include.content
        ↓
GENERATED <p>

Defaults protect optional parameters

If kind is omitted, the example uses the Liquid default filter.

Test with and without the parameter.

Parameterized does not mean universal

A giant include with twenty parameters may be harder to understand than a little duplicated markup.

Ask:

• Is this genuinely one reusable component?
• Are its inputs understandable?
• Is the include hiding useful complexity or creating it?

Accessibility boundary

If you create an image/card include, parameters such as alternative text should not be optional just because Liquid allows omission.

Technical flexibility does not remove content responsibility.

Repair an accessible image card

Use the browser code lab to inspect a tiny card before turning the pattern into a reusable include.

Static browser code lab · beginner

Add useful image evidence

HTML accessibility / portfolio evidence

1. Repair the image card so the browser can expose useful alternative text.
2. Keep the image inside a figure and write alt text that describes the image's instructional purpose.
3. This lab is about evidence and accessibility, not decoration.

index.htmlstyles.cssscript.js

<main> <h1>Robot Build Log</h1> <figure> <img src="/hero/campus-1.webp" alt=""> <figcaption>Prototype day in the robotics room.</figcaption> </figure> </main>

Preview

Run checksReset

Checksnot run yet

• CHECK · The image remains inside a figure.waiting for check
• CHECK · The card keeps a figcaption.waiting for check
• CHECK · The image has useful alt text.waiting for check

Hints

• Empty alt text is appropriate only when the image is purely decorative.
• Here the image is evidence, so the alt text should describe the evidence.

The point is not decoration. The point is the contract: an image card should provide usable structure and meaningful alternative text before you turn it into a template.

Portfolio action

Create one parameterized include that solves a real repeated pattern.

Good options:

• project badge;
• callout;
• project link block;
• image figure with caption/alt text.

Checkpoint

Document the include contract:

Include file:
Required parameters:
Optional parameters:
Generated responsibility:
Failure if required data is missing: