Create Your Own Automated Social Images With Resoc

Create automated social images with HTML and CSS and integrate them into the Eleventy blog and eventually deploy to the Netlify platform. This article will guide you through the entire process step by step, achieving high-level social image automation without complex code writing.

Recently, automated social pictures have become a hot topic, and GitHub, Jetpack and others have launched related tools. Developers like Ryan Filler and Zach Leatherman have also implemented this feature on their websites, but require a lot of custom code. Nowadays, with some new tools, we can simplify this process.

This tutorial will guide you to create custom automated social images using HTML and CSS, integrate them into the Eleventy blog through configuration, and finally deploy to Netlify.

If you can't wait to see the final result, please visit the project link or browse the project code!

What are social pictures?

In HTML Partly, we insert some Open Graph metadata:

<meta content="The blue sky strategy" property="og:title">
<meta content="Less clouds, more blue" property="og:description">
<meta content="/sky-with-clouds.jpg" property="og:image">

When we share this page on Facebook, we and our friends will see:

LinkedIn, Twitter, WhatsApp, Slack, Discord, iMessage… All of these websites behave roughly the same way: they provide a link with a visual "card" to make it more spatial and contextual information.

Twitter has its own set of metadata tags—Twitter Cards, but they are very similar. When Twitter can't find Twitter Cards, it falls back to Open Graph.

Page titles and descriptions are essential, but in the screenshots above, they appear very small compared to the sky and cloud pictures, not to mention the size of the clickable area. This is the power of social pictures. When links are shared, it is easy to understand the influence of these images.

From Level 0 to Level 3

Not all social pictures are equal. The following are not official terms, but let's consider the level of influence of these social image cards:

Level 0

The most basic social picture is that there are no pictures. Links can be flooded with a lot of content, with small visual areas and lack visual appeal.

Level 1

A classic technology is to create a unified social picture on the entire site . While this solution seems to have a good input-output ratio, one might think it is worse than having no pictures. Of course, we will get some attention, but the reaction may be negative, especially when people see a lot of links from the same website look the same. It is prone to repetition and unnecessary.

Level 2

The next level is the standard practice for blogs and media websites: each post has its own featured image and is different from each other. This practice is completely reasonable for news websites, as photos can supplement the page content. The potential drawback here is the need to find and create image material for every published article.

This may lead to some laziness. We've all seen pictures that are obviously stock photos. It may attract attention, but it may not be the attention you really want.

Level 3

Final Level: Each page has rich and meaningful social pictures. That's what CSS-Tricks does. The team’s social pictures are brand-like. They share the same layout. They mention the title of the article, as well as the author's name and profile picture, which is not visible to ordinary titles and descriptions. They are striking and memorable.

There is an obvious prerequisite for this approach: automation. Creating a unique image for each possible link is impossible. Think about how much extra work this requires. We need some programmatic solutions to help us do the heavy lifting.

Let's create a blog with unique social images

To give yourself a good reason (and sandbox) to build unique social pictures, we will create a simple blog. When I write and post articles to this blog, I follow a simple two-step process:

1. Writing and publishing articles
2. Post published URL to my social network account

Social pictures must play a role at this time. We want to make our blog as eye-catching as possible. But that's not our only goal. This blog should build our personal brand. We hope that our friends, colleagues and fans will remember us when they see our social posts. We want something repeatable, recognizable and representative.

Creating a blog takes a lot of work. While automated social pictures are cool, it is unwise to spend too much time on it. (Chris came to the same conclusion at the end of 2020). So, to be more efficient, we are making an Eleventy website. Eleventy is a simple static website generator. Instead of starting from scratch, use an existing starter project. In fact, let's choose the first one, electronic-base-blog.

Visit the electronic-base-blog GitHub page and use it as a template:

Let's create the repository and set the repository name and description. We can set it public or private, it doesn't matter.

Next, we clone the repository locally, install the package and run the site:

 git clone [your repository URL]
cd my-demo-blog ### or whatever name you named npm install
npm run serve

Our website is running at http://localhost:8080.

Now let's deploy it. Netlify makes this task very fast (and free!). (Oh, spoiler warning: our social image automation relies on the Netlify function.)

So let's visit Netlify and create an account if you don't already have an account. Either way, create a new site:

Allow Netlify to access the blog repository.

Netlify deploys our site:

After about a minute, the blog was deployed:

One image template dominates all

Our social images will be based on an image template. To design this template, we will use techniques we already know and love: HTML and CSS. HTML does not automatically convert itself to images, but there are tools that can do this, most notably headless Chrome with Puppeteer.

However, instead of building a social image stack yourself, use the Resoc Image Template Development Kit. So, from the project root directory, we can run it in the terminal:

 npx itdk init resoc-templates/default -m title-description

This command creates a new image template in the resoc-templates/default directory. It will also open in a new browser window.

We can use this template as is, but this will only allow us to reach Level 2 within the "influence" range. What we need to get it to Level 3 and match the CSS-Tricks template is:

• The title is aligned right, leaving some negative space on the left.
• There is a footer at the bottom that contains a background gradient composed of two colors we will use throughout the blog.
• Name and profile picture of the author of the article.

If we go back to the browser, we can see in the "Parameters" panel of the template viewer that the template requires two parameters: title and description. This is exactly the template we selected when we run -m title-description in the terminal. But we can add more parameters by editing resoc-templates/default/resoc.manifest.json . Specifically, we can delete the second parameter to get:

 {
  "partials": {
    "content": "./content.html.mustache",
    "styles": "./styles.css.mustache"
  },
  "parameters": [
    {
      "name": "title",
      "type": "text",
      "demoValue": "A picture is worth a thousand words"
    }
  ]
}

The viewer in the browser reflects the changes:

It's time to design the image itself, we can design it in resoc-templates/default/content.html.mustache :

<div>
  <main><h1>{{ title }}</h1></main>
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174226994887403.jpg" class="lazy" alt="Create Your Own Automated Social Images With Resoc">
  <h2>Philippe Bernard</h2>
</div>

This is just plain HTML. OK, except {{ title }} . This is the template engine that Mustache, Resoc uses to inject parameter values ​​into templates. We can even type some text into the Title field to see how it works:

When viewing the preview, please note that we are missing an image profil-pic.jpg . Copy your best profile picture to resoc-templates/default/profil-pic.jpg :

It's time to write CSS in resoc-templates/default/styles.css.mustache . The point of this post is not how to style the template, but this is the style I ended up using:

 @import url('https://fonts.googleapis.com/css2?family=Anton&family=Raleway&display=swap');

/* ... CSS code... */

Most dimensions depend on vw and vh units to help predict the various contexts the template may present. We will follow Facebook's recommendation, which is 1200×630. Twitter Cards, on the other hand, are different in size. We can render the image at low resolution (like 600×315), but let's use 1200×630 so we just need to use pixels.

The viewer renders a Facebook preview at 1200×630 and zooms down to fit the screen. If the preview meets your expectations, so will the actual Open Graph image.

So far, the templates meet our needs:

(The following content continues to rewrite the remaining parts according to the original text structure. While maintaining the consistency of the content, adjust the language expression and paragraph structure to make it smoother and more natural.)

The above is the detailed content of Create Your Own Automated Social Images With Resoc. For more information, please follow other related articles on the PHP Chinese website!