Improve social media image generation configuration and documentation #794

Copilot · 2025-10-30T17:02:04Z

Summary

Successfully improved social media (Open Graph) image generation for benbalter.github.com.

Recent Changes

✅ Clarified that font_family format "Font Name, Weight" is plugin-specific
✅ Added inline comments explaining the format in _config.yml
✅ Added documentation note about font format requirements
✅ Responded to user question about making images more visually engaging

Changes Made

Configuration Enhancements (_config.yml)

✅ Added explicit og_image configuration with all available settings
✅ Configured canvas dimensions (1200x600px) for optimal social media display
✅ Set font families and colors for header and content text
✅ Configured margin_bottom for better text layout
✅ Enabled performance optimizations (force: false, skip_drafts: true)

Documentation Created

✅ Comprehensive configuration guide (.github/og-image-config.md)
- Feature overview and specifications
- Complete configuration reference
- Per-post override examples
- Font format clarification
- Social media platform requirements
- Troubleshooting guide
✅ Customization examples (.github/og-image-examples.md)
- Topic-specific color schemes (leadership, technical, creative)
- Multi-color gradients
- Custom backgrounds
- Brand event styling
- Color psychology guidance with WCAG contrast ratios
- Safe testing procedures
✅ Updated README.md to highlight OG image feature

Benefits

Clarity: Explicit configuration makes customization straightforward
Flexibility: Per-post overrides enable topic-specific branding
Guidance: Comprehensive documentation with examples
Accessibility: WCAG compliance recommendations included
Maintainability: Well-documented for future updates

Technical Details

No breaking changes - all existing OG images remain valid
Configuration follows jekyll-og-image plugin standards
Font format "Font Name, Weight" is plugin-specific (not standard CSS)
Uses site's custom fork with description text support
All documentation files excluded from site build (in .github/)
YAML configuration validated successfully

Original prompt

This section details on the original issue you should resolve

<issue_title>Improve social media image generation</issue_title>
<issue_description></issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes Improve social media image generation #793

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Co-authored-by: benbalter <282759+benbalter@users.noreply.github.com>

Copilot

Pull Request Overview

This PR adds comprehensive configuration and documentation for the jekyll-og-image plugin to automatically generate Open Graph images for social media sharing. The changes establish configuration defaults and provide extensive documentation on customizing OG images for different post types.

Expands og_image configuration in _config.yml with detailed canvas, font, color, and layout settings
Adds two new documentation files explaining OG image configuration and providing examples
Updates README.md to highlight the OG image feature and link to configuration documentation

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File	Description
`_config.yml`	Adds comprehensive `og_image` configuration with canvas dimensions, fonts, colors, margins, and comments about the custom fork
`README.md`	Adds Features section highlighting OG image generation and links to configuration documentation
`.github/og-image-config.md`	New documentation file explaining OG image configuration, usage, troubleshooting, and specifications
`.github/og-image-examples.md`	New documentation file providing multiple examples of OG image customization for different post types

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-10-30T22:09:27Z

_config.yml

+    font_family: "Helvetica, Bold"
+    color: "#2f313d"
+  content:
+    font_family: "Helvetica, Regular"


The font family specification 'Helvetica, Bold' uses a non-standard format. Font weight should typically be specified separately from font family. Verify that the jekyll-og-image plugin accepts this format, as standard font specifications would separate family ('Helvetica') and weight/style ('Bold') into different properties.

Suggested change

font_family: "Helvetica, Bold"

color: "#2f313d"

content:

font_family: "Helvetica, Regular"

font_family: "Helvetica"

font_weight: "bold"

color: "#2f313d"

content:

font_family: "Helvetica"

font_weight: "normal"

The format "Helvetica, Bold" is correct for the jekyll-og-image plugin. This plugin-specific format passes the entire string to the underlying image library (libvips), which expects "Font Name, Weight" as a single parameter. The upstream documentation confirms this is the standard format (see examples using "Roboto, Bold" and "Roboto, Regular").

Added clarifying comments in commit 2277c54.

Copilot · 2025-10-30T22:09:27Z

_config.yml

+    font_family: "Helvetica, Bold"
+    color: "#2f313d"
+  content:
+    font_family: "Helvetica, Regular"


The font family specification 'Helvetica, Regular' uses a non-standard format. Font weight should typically be specified separately from font family. Verify that the jekyll-og-image plugin accepts this format, as standard font specifications would separate family ('Helvetica') and weight/style ('Regular') into different properties.

Suggested change

font_family: "Helvetica, Regular"

font_family: "Helvetica"

font_weight: "Regular"

The format "Helvetica, Regular" is correct for the jekyll-og-image plugin. This plugin-specific format passes the entire string to the underlying image library (libvips), which expects "Font Name, Weight" as a single parameter. The upstream documentation confirms this is the standard format.

Added clarifying comments in commit 2277c54.

Copilot · 2025-10-30T22:09:28Z

.github/og-image-config.md

+    height: 600                          # Canvas height in pixels
+    background_color: "#FFFFFF"          # Background color
+  header:
+    font_family: "Helvetica, Bold"       # Title font


The font family specification 'Helvetica, Bold' uses a non-standard format. Font weight should typically be specified separately from font family. Verify that the jekyll-og-image plugin accepts this format, as standard font specifications would separate family ('Helvetica') and weight/style ('Bold') into different properties.

Suggested change

font_family: "Helvetica, Bold" # Title font

font_family: "Helvetica" # Title font family

font_weight: "bold" # Title font weight

The format "Helvetica, Bold" is correct for the jekyll-og-image plugin. This is the plugin-specific format required by the underlying library (libvips). Added a note in the documentation explaining this format in commit 2277c54.

Copilot · 2025-10-30T22:09:28Z

.github/og-image-config.md

+    font_family: "Helvetica, Bold"       # Title font
+    color: "#2f313d"                     # Title color
+  content:
+    font_family: "Helvetica, Regular"    # Description font


The font family specification 'Helvetica, Regular' uses a non-standard format. Font weight should typically be specified separately from font family. Verify that the jekyll-og-image plugin accepts this format, as standard font specifications would separate family ('Helvetica') and weight/style ('Regular') into different properties.

Suggested change

font_family: "Helvetica, Bold" # Title font

color: "#2f313d" # Title color

content:

font_family: "Helvetica, Regular" # Description font

font_family: "Helvetica" # Title font family

font_weight: "Bold" # Title font weight

color: "#2f313d" # Title color

content:

font_family: "Helvetica" # Description font family

font_weight: "Regular" # Description font weight

The format "Helvetica, Regular" is correct for the jekyll-og-image plugin. This plugin uses "Font Name, Weight" as a single string parameter, which is passed to libvips. Added documentation clarification in commit 2277c54.

benbalter · 2025-11-04T20:39:00Z

@copilot how can I make the social media images more visually engaging?

Copilot · 2025-11-04T20:41:03Z

@copilot how can I make the social media images more visually engaging?

Here are several ways to make the OG images more visually engaging:

1. Use gradient borders (already supported):

og_image:
  border_bottom:
    width: 30  # Thicker border
    fill:
      - "#4285F4"
      - "#34A853"
      - "#FBBC05"
      - "#EA4335"

2. Add background images for visual interest:

og_image:
  canvas:
    background_image: "/assets/images/pattern.jpg"

3. Customize per-post for topic-specific colors:

---
title: "Leadership Post"
og_image:
  border_bottom:
    fill: ["#EA4335"]  # Red for leadership
---

4. Increase border width for more impact:

border_bottom:
  width: 40  # Current: 20

5. Try custom fonts like Roboto or Open Sans (ensure they're available on the build system)

The documentation in .github/og-image-examples.md includes examples for each of these approaches with color psychology guidance.

Co-authored-by: benbalter <282759+benbalter@users.noreply.github.com>

Initial plan

10e97e8

Copilot AI assigned Copilot and benbalter Oct 30, 2025

Copilot started work on behalf of benbalter October 30, 2025 17:02 View session

Copilot AI and others added 6 commits October 30, 2025 17:10

Enhance og_image configuration with explicit settings

c890c49

Co-authored-by: benbalter <282759+benbalter@users.noreply.github.com>

Add comprehensive OG image documentation

c8b48e8

Co-authored-by: benbalter <282759+benbalter@users.noreply.github.com>

Add color palette guidance for OG images

1306056

Co-authored-by: benbalter <282759+benbalter@users.noreply.github.com>

Update README with OG image feature

e39a5d1

Co-authored-by: benbalter <282759+benbalter@users.noreply.github.com>

Add comprehensive OG image customization examples

e749ca4

Co-authored-by: benbalter <282759+benbalter@users.noreply.github.com>

Address code review feedback on testing and contrast guidance

2cde1ae

Co-authored-by: benbalter <282759+benbalter@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Improve social media image generation~~ Improve social media image generation configuration and documentation Oct 30, 2025

Copilot finished work on behalf of benbalter October 30, 2025 17:21

Copilot AI requested a review from benbalter October 30, 2025 17:21

benbalter marked this pull request as ready for review October 30, 2025 22:07

benbalter requested a review from Copilot October 30, 2025 22:07

Copilot AI reviewed Oct 30, 2025

View reviewed changes

Copilot started work on behalf of benbalter November 4, 2025 20:39 View session

Clarify font_family format is plugin-specific

2277c54

Co-authored-by: benbalter <282759+benbalter@users.noreply.github.com>

Copilot finished work on behalf of benbalter November 4, 2025 20:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Improve social media image generation configuration and documentation #794

Improve social media image generation configuration and documentation #794

Uh oh!

Copilot AI commented Oct 30, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Oct 30, 2025

Uh oh!

Copilot AI Nov 4, 2025

Uh oh!

Copilot AI Oct 30, 2025

Uh oh!

Copilot AI Nov 4, 2025

Uh oh!

Copilot AI Oct 30, 2025

Uh oh!

Copilot AI Nov 4, 2025

Uh oh!

Copilot AI Oct 30, 2025

Uh oh!

Copilot AI Nov 4, 2025

Uh oh!

benbalter commented Nov 4, 2025

Uh oh!

Copilot AI commented Nov 4, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	font_family: "Helvetica, Regular"
	font_family: "Helvetica"
	font_weight: "Regular"

	font_family: "Helvetica, Bold" # Title font
	font_family: "Helvetica" # Title font family
	font_weight: "bold" # Title font weight

Uh oh!

Improve social media image generation configuration and documentation #794

Are you sure you want to change the base?

Improve social media image generation configuration and documentation #794

Uh oh!

Conversation

Copilot AI commented Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Recent Changes

Changes Made

Configuration Enhancements (_config.yml)

Documentation Created

Benefits

Technical Details

Comments on the Issue (you are @copilot in this section)

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 4, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 30, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 4, 2025

Choose a reason for hiding this comment

Uh oh!

benbalter commented Nov 4, 2025

Uh oh!

Copilot AI commented Nov 4, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Oct 30, 2025 •

edited

Loading