Improve social media image generation configuration and documentation

.github/og-image-config.md

@@ -0,0 +1,139 @@
+# Open Graph Image Configuration
+
+This site uses a custom fork of [jekyll-og-image](https://github.com/benbalter/jekyll-og-image) to automatically generate social media preview images for blog posts.
+
+## Features
+
+- **Automatic generation**: OG images are automatically created during site build
+- **Description support**: Images include post descriptions for better context
+- **Brand consistency**: Uses site colors and headshot for consistent branding
+- **Optimized sizing**: 1200×600px images optimized for social media platforms
+
+## Configuration
+
+The OG image settings are defined in `_config.yml` under the `og_image` key:
+
+```yaml
+og_image:
+  output_dir: assets/images/og          # Where generated images are saved
+  domain: ben.balter.com                # Domain name displayed on images
+  image: ./assets/img/headshot.jpg      # Logo/headshot image
+  verbose: false                         # Enable verbose logging
+  force: false                           # Force regeneration of existing images
+  skip_drafts: true                      # Skip draft posts
+  margin_bottom: 100                     # Bottom margin for text elements
+  canvas:
+    width: 1200                          # Canvas width in pixels
+    height: 600                          # Canvas height in pixels
+    background_color: "#FFFFFF"          # Background color
+  header:
+    font_family: "Helvetica, Bold"       # Title font (format: "Font, Weight")
+    color: "#2f313d"                     # Title color
+  content:
+    font_family: "Helvetica, Regular"    # Description font (format: "Font, Weight")
+    color: "#535358"                     # Description color
+  border_bottom:
+    width: 20                            # Bottom border width
+    fill:
+      - "#4285F4"                        # Bottom border color (Google Blue)
+```
+
+**Note on Font Format**: The `font_family` setting uses the format `"Font Name, Weight"` (e.g., "Helvetica, Bold"). This is the format required by the jekyll-og-image plugin, which passes it directly to the underlying image library. Don't separate font family and weight into different properties.
+
+## Per-Post Override
+
+Individual posts can override the global configuration by adding an `og_image` section to their front matter.
+
+For detailed examples, see [OG Image Examples](og-image-examples.md).
+
+### Basic Example
+
+```yaml
+---
+title: My Post Title
+description: A great post description
+og_image:
+  canvas:
+    background_color: "#F0F0F0"
+  header:
+    color: "#000000"
+  border_bottom:
+    fill:
+      - "#DB4437"  # Use red instead of blue
+---
+```
+
+### Color Palette Suggestions
+
+For topic-specific visual branding, consider these Google color combinations:
+
+- **Default (Blue)**: `#4285F4` - General content
+- **Red**: `#DB4437` - Important announcements or leadership topics
+- **Yellow**: `#F4B400` - Creative or innovation topics
+- **Green**: `#0F9D58` - Success stories or growth topics
+
+You can also use gradient fills with multiple colors:
+
+```yaml
+border_bottom:
+  fill:
+    - "#4285F4"
+    - "#DB4437"
+    - "#F4B400"
+    - "#0F9D58"
+```
+
+## Image Output
+
+Generated images are saved to `assets/images/og/posts/[post-slug].png` and are automatically referenced in the page metadata via jekyll-seo-tag.
+
+## Custom Fork Details
+
+This site uses a fork of jekyll-og-image with the following enhancements:
+
+- **Description rendering**: Post descriptions are rendered on the OG image below the title
+- **Customized layout**: Optimized text positioning and sizing for readability
+- **Domain placement**: Domain name is positioned in the bottom-right corner
+
+## Social Media Specifications
+
+The generated 1200×600px images meet the specifications for:
+
+- **Twitter/X**: Recommended size for Summary Card with Large Image
+- **Facebook**: Optimal dimensions for link sharing
+- **LinkedIn**: Recommended image size for link previews
+- **Open Graph**: Standard OG image dimensions
+
+## Regenerating Images
+
+To regenerate all images (force rebuild):
+
+```bash
+# Edit _config.yml and set:
+og_image:
+  force: true
+
+# Build the site
+bundle exec jekyll build
+
+# Remember to set force back to false afterward
+```
+
+## Troubleshooting
+
+If images aren't generating:
+
+1. Check that `libvips` is installed (required by the plugin)
+2. Verify the headshot image exists at `assets/img/headshot.jpg`
+3. Enable verbose logging: `og_image: { verbose: true }`
+4. Check build output for error messages
+
+## Future Improvements
+
+Potential enhancements to consider:
+
+- [ ] Merge upstream changes to support pages and collections (not just posts)
+- [ ] Add support for custom fonts
+- [ ] Support for multiple color schemes
+- [ ] Option to disable description text
+- [ ] Background image support

.github/og-image-examples.md

@@ -0,0 +1,145 @@
+# Open Graph Image Examples
+
+This file contains example configurations for customizing OG images for different types of posts.
+
+## Leadership Post with Red Accent
+
+```yaml
+---
+title: "Leading Through Change"
+description: "How to guide your team through organizational transitions"
+og_image:
+  border_bottom:
+    width: 20
+    fill:
+      - "#DB4437"  # Google Red for leadership/important topics
+---
+```
+
+## Technical Post with Green Accent
+
+```yaml
+---
+title: "Building Scalable Systems"
+description: "Architectural patterns for growth"
+og_image:
+  border_bottom:
+    width: 20
+    fill:
+      - "#0F9D58"  # Google Green for technical/growth topics
+---
+```
+
+## Creative/Innovation Post with Yellow Accent
+
+```yaml
+---
+title: "Thinking Outside the Box"
+description: "Fostering innovation in your organization"
+og_image:
+  border_bottom:
+    width: 20
+    fill:
+      - "#F4B400"  # Google Yellow for creative topics
+---
+```
+
+## Multi-Color Gradient
+
+```yaml
+---
+title: "The Future of Work"
+description: "Trends shaping remote collaboration"
+og_image:
+  border_bottom:
+    width: 20
+    fill:
+      - "#4285F4"  # Blue
+      - "#0F9D58"  # Green
+      - "#F4B400"  # Yellow
+      - "#DB4437"  # Red
+---
+```
+
+## Custom Background Color
+
+```yaml
+---
+title: "Dark Mode Design"
+description: "Designing for accessibility and preference"
+og_image:
+  canvas:
+    background_color: "#1a1a1a"
+  header:
+    color: "#FFFFFF"
+  content:
+    color: "#E0E0E0"
+  border_bottom:
+    width: 20
+    fill:
+      - "#4285F4"
+---
+```
+
+## Minimal Style (No Border)
+
+```yaml
+---
+title: "Simplicity in Design"
+description: "Less is more in user experience"
+og_image:
+  border_bottom:
+    width: 0
+---
+```
+
+## Brand Event Style
+
+```yaml
+---
+title: "GitHub Universe 2024"
+description: "Key takeaways from this year's conference"
+og_image:
+  border_bottom:
+    width: 30  # Thicker border for emphasis
+    fill:
+      - "#24292e"  # GitHub black
+      - "#0366d6"  # GitHub blue
+---
+```
+
+## Tips for Choosing Colors
+
+1. **Consistency**: Use the same color scheme for related posts to create visual patterns
+2. **Contrast**: Ensure text colors have sufficient contrast against backgrounds (aim for WCAG AA compliance: 4.5:1 ratio for normal text, 3:1 for large text)
+3. **Brand alignment**: Consider using colors that match referenced brands or topics
+4. **Emotional impact**: Colors convey emotion - choose intentionally
+   - Blue: Trust, stability, professionalism
+   - Red: Urgency, passion, importance
+   - Green: Growth, success, nature
+   - Yellow: Optimism, creativity, energy
+
+## Testing Your Changes
+
+To regenerate OG images for testing, the safest approach is to use force mode in `_config.yml`:
+
+```yaml
+og_image:
+  force: true  # Regenerate all images
+```
+
+Then build the site:
+
+```bash
+bundle exec jekyll build
+```
+
+Remember to set `force: false` after testing to avoid unnecessary regeneration on every build.
+
+Alternatively, you can manually delete specific images to regenerate them:
+
+```bash
+# Delete a specific image to regenerate it
+rm assets/images/og/posts/[post-slug].png
+bundle exec jekyll build
+```

README.md

@@ -4,6 +4,15 @@
 
 The personal site of Ben Balter. Built using Jekyll, GitHub Pages, and Bootstrap. See [humans.txt](https://ben.balter.com/humans.txt) for more infos.
 
+## Features
+
+* Automatically generates Open Graph images for social media sharing
+* Responsive design with Bootstrap
+* SEO optimized with jekyll-seo-tag
+* Built-in social sharing capabilities
+
+For details on configuring Open Graph images, see [OG Image Configuration](.github/og-image-config.md).
+
 ## License
 
 * Content: [Creative Commons, BY](http://creativecommons.org/licenses/by/3.0/)

_config.yml

@@ -149,9 +149,26 @@ job_title: Director of Engineering Operations and Culture
 handle: benbalter
 
 og_image:
+  output_dir: assets/images/og
   domain: ben.balter.com
   image: ./assets/img/headshot.jpg
+  verbose: false
+  force: false
+  skip_drafts: true
+  margin_bottom: 100
+  canvas:
+    width: 1200
+    height: 600
+    background_color: "#FFFFFF"
+  header:
+    font_family: "Helvetica, Bold"  # Format: "Font Name, Weight" (plugin-specific)
+    color: "#2f313d"
+  content:
+    font_family: "Helvetica, Regular"  # Format: "Font Name, Weight" (plugin-specific)
+    color: "#535358"
   border_bottom:
     width: 20
     fill:
       - "#4285F4"
+# Note: This site uses a custom fork of jekyll-og-image that includes description text support
+# Future improvement: Merge upstream changes to support pages and collections