Use a template

Once you created a thumbnail template and saved it to your account, you can now start using it on your website.

In short, to use a template on your site, you need to:

Dynamically create the image URL strings with your query parameters
Add the correct meta tags in your site's <head>

See below for more information. Don't hesitate to ask for help if you have any questions.

Create the image URLs

Expand the sections below for examples.

JavaScript

In JavaScript, you can use the @thumbsmith/url package to construct the URL string, which supports nested objects and provides TypeScript definitions.

However, you can also simply create the URLs like this:

const imageProps = {
  title: post.title,
  author: post.author.fullName,
  category: post.category.name,
};
const queryParams = new URLSearchParams(imageProps).toString();
const imageUrl = `https://cdn.thumbsmith.com/v1/u/your-account/blog.png?${queryParams}`;

React / NextJS

import Head from 'next/head';

function usePostImage(post) {
  const imageProps = {
    title: post.title,
    author: post.author.fullName,
    category: post.category.name,
  };
  const queryParams = new URLSearchParams(imageProps).toString();
  const imageUrl = `https://cdn.thumbsmith.com/v1/u/your-account/post.png?${queryParams}`;
  return imageUrl;
}

function BlogPage({ post }) {
  const imageUrl = usePostImage(post);
  return (
    <div>
      <Head>
        <title>{post.title}</title>
        <meta property="og:image" content={imageUrl} />
      </Head>
      {post.body}
    </div>
  )
};

BlogPage.getInitialProps = async (ctx) => {
  const post = await fetchPostById(ctx.query.id);
  return { post };
};

export default BlogPage;

You can also import the @thumbsmith/url utility directly as a hook:

import Head from 'next/head';
import useImageUrl from '@thumbsmith/url';

function BlogPage({ post }) {
  const imageUrl = useImageUrl({
    account: 'your-account',
    template: 'post',
    data: {
      title: post.title,
      author: post.author.fullName,
      category: post.category.name,
    },
  });
  return (
    <div>
      <Head>
        <title>{post.title}</title>
        <meta property="og:image" content={imageUrl} />
      </Head>
      {post.body}
    </div>
  )
};

BlogPage.getInitialProps = async (ctx) => {
  const post = await fetchPostById(ctx.query.id);
  return { post };
};

export default BlogPage;

PHP

<?php
$post = Post::findById($_GET["postId"]);
$image_props = array(
  'title' => $post->title,
  'author' => $post->author->fullName,
  'category' => $post->author->name,
);
$query_params = http_build_query($image_props);
$image_url = "https://cdn.thumbsmith.com/v1/u/your-account/post.png?$query_params";

// Insert the tag in <head> where appropriate ...
echo "<meta property='og:image' content='$image_url' />";

Add the meta tags

Once you have the image URL constructed, at minimum, add this meta tag in your page's <head>.

<meta property="og:image" content="{{ image_url }}">

For twitter and some other services, you will also need these two tags:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="{{ image_url }}">

Recommended example

We recommend following this more robust example for best SEO, compatibility and shareability with third party services:

<head>
  <!-- HTML Meta Tags -->
  <title>{{ page_title }}</title>
  <meta name="description" content="{{ page_description }}">

  <!-- Open Graph Meta Tags -->
  <meta property="og:title" content="{{ page_title }}">
  <meta property="og:description" content="{{ page_description }}">
  <meta property="og:site_name" content="Your Website">
  <meta property="og:url" content="{{ page_url }}">
  <meta property="og:type" content="website">
  <meta property="og:image" content="{{ image_url }}"> <!-- Image URL goes here -->
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">

  <!-- Twitter Meta Tags -->
  <meta name="twitter:title" content="{{ page_title }}">
  <meta name="twitter:description" content="{{ page_description }}">
  <meta name="twitter:url" content="{{ page_url }}">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:image" content="{{ image_url }}"> <!-- Image URL goes here -->
  <meta name="twitter:image:width" content="1200">
  <meta name="twitter:image:height" content="630">
</head>

See ogp.me for more info.