Ghost
+ Pictify

Dynamic social cards for Ghost publications.

CMS Platforms

About Integration

Integrate Pictify with Ghost to automatically generate beautiful social preview images for your publications. Use Ghost webhooks to trigger image generation when posts are published or updated.

Key Capabilities

Webhook integration

Feature image support

Custom code injection

Member data support

Common Use Cases

Publication social cards

Newsletter images

Member certificates

Integration Guide

15 minutes

Prerequisites

Ghost 5.x publication
A Pictify account with an API key
A template created in Pictify

Create a Custom Integration in Ghost

Set up a custom integration in Ghost to enable webhook functionality.

Code

1. Go to Ghost Admin → Settings → Integrations
2. Scroll down and click "Add custom integration"
3. Name it "Pictify OG Images"
4. Note the Content API Key and Admin API Key
5. Click "Save"

You'll use the Admin API key to write images back to posts.

Configure the Webhook in Ghost

Add a webhook that fires when posts are published.

Code

1. In your Pictify integration settings, click "Add webhook"
2. Configure the webhook:
   - Name: "Generate OG Image on Publish"
   - Event: "Post published"
   - Target URL: https://api.pictify.io/webhooks/ghost/YOUR_WEBHOOK_ID

3. Add another webhook for updates (optional):
   - Name: "Regenerate OG Image on Update"
   - Event: "Post updated"
   - Target URL: Same as above

Get your webhook URL from Pictify Dashboard → Integrations → Webhooks.

Configure Pictify Webhook Handler

Set up variable mapping in Pictify to handle Ghost's webhook payload.

Code

In Pictify Dashboard → Webhooks → Configure:

// Ghost sends this payload when a post is published:
{
  "post": {
    "current": {
      "id": "abc123",
      "title": "My Blog Post",
      "slug": "my-blog-post",
      "excerpt": "A short summary...",
      "feature_image": "https://...",
      "published_at": "2024-01-15T10:00:00Z",
      "primary_author": {
        "name": "Author Name",
        "profile_image": "https://..."
      },
      "primary_tag": { "name": "Technology" }
    }
  }
}

// Variable mapping:
title       → post.current.title
description → post.current.excerpt
author      → post.current.primary_author.name
category    → post.current.primary_tag.name
image       → post.current.feature_image

Set Up Response Action

Configure Pictify to update Ghost with the generated image URL.

Code

In Pictify webhook settings → Response Action:

1. Enable "Update Source System"
2. Select "Ghost" as the platform
3. Enter your Ghost details:
   - Ghost URL: https://your-site.ghost.io
   - Admin API Key: (from Step 1)

4. Configure the update:
   - Field to update: "og_image" (custom field)
   - Or: "feature_image" (replaces existing)

5. Save the configuration

// Pictify will automatically update the post after generating the image

Using og_image as a custom field preserves your original feature image.

Add OG Meta Tags to Theme

Modify your Ghost theme to use the generated OG image.

Code

// Edit your theme's default.hbs (in <head> section):

{{#post}}
  {{#if og_image}}
    <meta property="og:image" content="{{og_image}}" />
  {{else if feature_image}}
    <meta property="og:image" content="{{feature_image}}" />
  {{else}}
    <meta property="og:image" content="{{@site.cover_image}}" />
  {{/if}}
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta name="twitter:card" content="summary_large_image" />
{{/post}}

// Upload your modified theme:
// Ghost Admin → Design → Change theme → Upload

Test locally first using Ghost's theme development tools.

Alternative: Use Code Injection

For a no-theme-edit approach, use Ghost's code injection.

Code

Go to Ghost Admin → Settings → Code Injection → Site Header:

<script>
(function() {
  // Build dynamic OG image URL
  var title = document.querySelector('meta[property="og:title"]')?.content;
  if (title) {
    var ogUrl = 'https://api.pictify.io/v1/og?' +
      'template=YOUR_TEMPLATE_ID&' +
      'title=' + encodeURIComponent(title);

    // Update or create OG image meta tag
    var ogImage = document.querySelector('meta[property="og:image"]');
    if (ogImage) {
      ogImage.content = ogUrl;
    }
  }
})();
</script>

This generates images on-demand without storing them in Ghost.

Test the Integration

Publish a test post and verify everything works.

Code

1. Create a new post in Ghost with title and excerpt
2. Click "Publish"
3. Check Pictify dashboard → Webhooks → Logs
4. Verify the image was generated
5. Check if Ghost post was updated (if using response action)

// Test with social debuggers:
- Facebook: developers.facebook.com/tools/debug/
- Twitter: cards-dev.twitter.com/validator
- LinkedIn: linkedin.com/post-inspector/

Give it 10-30 seconds for the webhook to process after publishing.