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:
<head>
See below for more information. Don't hesitate to ask for help if you have any questions.
Expand the sections below for examples.
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}`;
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
$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' />";
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 }}">
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.