How to make a dynamic Twitter Header with Switchboard Canvas
Tags: twitter, header, switchboardcanvas, api
Published: 2021-10-27 13:57:41

---
title: How to make a dynamic Twitter Header with Switchboard Canvas
published: true
description: A number of interesting posts on dev.to describe how to make a dynamic Twitter header/cover and they inspired me to add this capability to Switchboard Canvas - an API-driven image generation tool.
tags: twitter, header, switchboardcanvas, api
cover_image: https://www.switchboard.ai/static/assets/images/twitter-header/hero.png
---


A [number](https://dev.to/dailydevtips1/how-i-made-my-twitter-header-dynamic-68d) [of](https://dev.to/haideralipunjabi/dynamic-twitter-header-using-python-4hkm) [interesting posts](https://dev.to/erikaheidi/how-to-dynamically-update-twitter-cover-image-to-show-latest-followers-using-php-gd-and-twitteroauth-62n) here on dev.to describe how to make a dynamic Twitter header/cover and they inspired me to add this capability to Switchboard Canvas - an API-driven image generation tool.

With [Switchboard Canvas](https://www.switchboard.ai), users first create a template, then use the API to create images from it with data you supply or from other tools that you already use.

In this tutorial we’ll:

- create a template
- Use Switchboard Canvas to make a connection to Twitter
- Use the API to generate an image from the template
- Use the API to actually update your Twitter header

### What are the dimensions of a Twitter header/cover image?

The correct size for a Twitter header/cover image is 1500x500 pixels. 

### Making a Twitter header/cover template

Open the Previewer and choose Profile header from the Twitter section.

![Twitter Cover in the Switchboard Canvas Palette](https://www.switchboard.ai/static/assets/images/twitter-header/twitter-cover-size.png)

Saving your template at this point, despite it being empty, will default it to this size in the future.

#### Background

For a background, I chose this moon and stars backdrop from Adobe Stock. I also resized it to a height of 500px. Upload the resulting image to your Library.

Add an Image element choose the image from your Library. Make sure the API name for the image is `backdrop`.

![Adobe Stock Preview](https://www.switchboard.ai/static/assets/images/twitter-header/adobe-stock-preview.png)

![Starry sky backdrop in place](https://www.switchboard.ai/static/assets/images/twitter-header/backdrop-in-place.png)

When choosing a background for a template, it’s helpful to have it fade into another color, especially if you’re going to add Text elements on top of the image.

In the template properties, set the background color to `#112346`: 
![The template's background color](https://www.switchboard.ai/static/assets/images/twitter-header/template-background-color.png)

Now we can change the Element Opacity of the background image to something around the 75% mark:

![Setting the background image's opacity](https://www.switchboard.ai/static/assets/images/twitter-header/element-opacity.png)

#### Adding a quote element

To add a quote to the image, we’re going to add a Text element. I’m using a Google Font called Sorts Mill Goudy from Google: [https://fonts.google.com/specimen/Sorts+Mill+Goudy](https://fonts.google.com/specimen/Sorts+Mill+Goudy)

Using pinning, we’re going to ensure that regardless of the quote we use in the Text element, it will stay centered, and won’t take up any more room than the bounding box.

Follow these steps to create and position the Text element for your quote:

1. Click `Add Text` or press `T` to add a Text element.
2. Set the `API Name` to `quote`.
3. Set the `Text Color` to white.
4. Set the `Text` to something generic such as “This is a placeholder for a favorite quote”.
5.  Click the Bottom and Right pinning icons to enable pinning to those edges.
6. Set the Top edge `px` value to 50.
7. Set the Left and Right `px` values to 200.
8. Set the Bottom edge `px` value to 0 and the `%` to 50.

The Location panel properties should look like this:
![Pin settings for the quote Text element](https://www.switchboard.ai/static/assets/images/twitter-header/quote-pin-settings.png)

We’re pinning the Text element to 200px from the left edge, 200px from the right edge, and 50px from the top edge.

On the bottom edge we’re pinning to 50% - which is 50% of the height of the template.

Ensure the `Horizontal Alignment` and the `Vertical Alignment` are set to `Center` and `Middle` respectively. This will keep the text in the center on the bounding box in both directions.

![The quote element in position](https://www.switchboard.ai/static/assets/images/twitter-header/quote-in-place.png)

#### Adding the latest follower images

The next step is to add a series of five Image elements that will show the profile pictures of our five latest followers. 

This data comes from Twitter automatically, so we just need to add the elements and make sure they’re named properly.

Follow these steps to make a profile image:
1. Click Add an Image, or press `I`.
2. Close the Library popup that appears - we don’t need an image at this point.
3. Change the `width` and `height` to 100.
4. SHIFT+Click the Bottom Pinning icon. This enables pinning to the bottom edge but also keeps the height you entered - 100 pixels.
5. SHIFT+Click the Right Pinning Icon. Likewise, this enables pinning to the right edge but keeps the width you entered at 100 pixels.
6. To add a little offset from the very edge, set the Right Pinning `px` value to 20. Before leaving this field, press SHIFT+Enter. This sets all `px` offsets to 20.

 ![The follower image pin settings](https://www.switchboard.ai/static/assets/images/twitter-header/follower-image-pin-settings.png)

To finish off the image:

Set the `Stroke Color` to white, and set the `Stroke Width` to around 20%. 
![Setting the stroke color and width](https://www.switchboard.ai/static/assets/images/twitter-header/stroke-color-width.png)

Lastly, change the `API Name` to `follower5-image`.

Your first follower image should look like this:

![The first follower image in place](https://www.switchboard.ai/static/assets/images/twitter-header/follower-image-in-place.png)

#### Making the other four follower images

With `follower5-image` selected, press CTRL+SHIFT+V to duplicate it.

Change the Right pinning setting as follows:
- Drop the edge selector down, and instead of edge, choose `follower5-image`
- Drop the side selector down and choose `Left`
- Make sure the `px` value is still 20px.

Set the `API Name` to `follower4-image`.

This pins the right hand side of  `follower4-image` to the left hand side of `follower5-image`  with an offset of 20px.

Repeat this process 3 more times, duplicating the element and setting the edge selector to the element you previously created.

Don’t forget to set the `API Name` of each new element `follower3-image`, `follower2-image`, and `follower1-image` respectively.

![All the follower images in place](https://www.switchboard.ai/static/assets/images/twitter-header/follower-images-in-place.png)
 

#### Adding a thank-you note

The last element to add to the template is a thank-you note, thanking your last five followers.

Follow these steps to add and position this Text element:
1. Click `Add Text` or press `T` to add a Text element.
2. Set the `Text` to something like “Thank you to my latest followers:”
3. Set the Left pinning edge selector down and choose `follower1-image` and set the side selector to `Left`.
4. Click the Right pinning icon to enable it.
5. Set the Right pinning edge selector to `follower5-image` and set the side selector to `Right`. 
6. Set the `Height` to 60px.
7. SHIFT+Click the Bottom pinning icon to enable it, preserving the 60px height.
8. Set the Bottom pinning edge selector to `follower1-image` and set the side selector to `Top`.
9. Set the Bottom pinning `px` value to 10.

These settings pin the position of your thank-you Text element to the follower images, specifically, to the left edge of `follower1-image`, to the right edge of `follower5-image`, and 10px above `follower1-image`.

![The thank-you Text element pin settings](https://www.switchboard.ai/static/assets/images/twitter-header/thank-you-pin-settings.png)

#### Previewing the template in other sizes

Even though we’re making a Twitter header/cover which are always 1500x500, we can use the Preview control to make sure our template is responsive.

Press `P` to open the Previewer and choose some of the other sizes. The follower images and the thank-you message should always be in the bottom-right corner, and the quote should be centered at the top of the template.

Make sure we’re designing back at `1500x500` before closing the Previewer panel.

Make sure your template is saved and that the `API Name` for it is `twitter-header`. 

### Connecting to Twitter

Now that the template is created, visit your Profile page to connect Switchboard Canvas to your Twitter account.

Click the `connect to twitter` hyperlink. Twitter’s authorization page will load and ask you to accept the request. Once authorized, Canvas will indicate a successful connection.

### Using the API 

Now we can use the API to create an image from the template. 

You can specify a quote to appear in the Text element in your template.

Using a REST client such as Insomnia or Postman, make sure your API key is added as the `X-API-Key` header, and send a `POST` request like this:

```js
{
	"template": "twitter-header",
	"sizes": [
		{
			"width": 1500,
			"height": 500
		}
	],
	"elements": {
		"quote": {
			"text": "Those who dare to fail miserably can achieve greatly."
		}
	}
} 
```

This will return a response with a link to your new image:

```json
{
  "duration": 2327,
  "usage": false,
  "success": true,
  "warnings": [],
  "sizes": [
    {
      "warnings": [],
      "success": true,
      "size": {
        "width": 1500,
        "height": 500
      },
      "url": "https://files.canvas.switchboard.ai/544d9fbe-270a-476c-8612-1b3385e9900c/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.png"
    }
  ]
}
```

![Pre-update preview](/static/assets/images/twitter-header/pre-update-preview.jpg)

As you can see, the quote has been set but the follower images have not.

Send the request again but this time, set the `updateTwitterHeader` property to `true`:

```json
{
	"template": "twitter-header",
	"sizes": [
		{
			"width": 1500,
			"height": 500
		}
	],
	"elements": {
		"quote": {
			"text": "Those who dare to fail miserably can achieve greatly."
		}
	},
	"updateTwitterHeader": true
} 
```

![Post update preview](https://www.switchboard.ai/static/assets/images/twitter-header/post-update-preview.jpg)

![The final Twitter profile preview](https://www.switchboard.ai/static/assets/images/twitter-header/twitter-profile-preview.png)
---
Thanks again to the authors of the following posts for the inspiration!

{% link https://dev.to/dailydevtips1/how-i-made-my-twitter-header-dynamic-68d %}

{% link https://dev.to/haideralipunjabi/dynamic-twitter-header-using-python-4hkm %}

{% link https://dev.to/erikaheidi/how-to-dynamically-update-twitter-cover-image-to-show-latest-followers-using-php-gd-and-twitteroauth-62n %}
---
Please visit [https://www.switchboard.ai](https://www.switchboard.ai) if you're interested in automating image generation with an API.