Thumbnail Creation Project

In preparation for the relaunch of Learn.WordPress.org and Learning Pathways scheduled for July, we need to create a large quantity of small graphics – called thumbnails – to serve as featured images for each course, lesson, and tutorial. This will create a visually appealing site that will entice learners to dive in and get started on their learning journey.

We invite volunteers at WCEU’s Contributor Day on June 13 – and beyond – to pitch in and create as many of these thumbnails as possible. Even if you’re not attending WCEU in person, you’re welcome to help out. Just follow the steps below, and let the team know in the #training channel in Slack so we can recognize your contributions.

Thank you in advance to everyone who’s able to lend a hand with this group effort! We’ll keep the project going for as long as needed.

Preparation

• Create a free Figma account – required.
• Download the Figma app – optional, as Figma can also be run in the browser.
• Carefully read the Figma thumbnail generator guide in the Design handbook and watch the video walkthrough. (Also below)
• Generate a couple of test thumbnails, exporting, and verify that they look as expected.

Process

Step 1: Choose your content

• Open the content-tracking spreadsheet. (You’ll find the link in the Training team’s SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. bookmarks – screenshot.)
• Working from the top down in one of the three sheets (tabs), choose a lesson, course, or tutorial for which you’ll create a thumbnail. (Ignore anything with a “Deprecated” status.)
• Put your name in the Thumbnail by column to claim it.
• For those who speak a language other than English, see if there are any lessons, courses, or tutorials in that language and prioritize those first.

Step 2: Create your thumbnail

Create the thumbnail by going through the thumbnail creation guide, also following these important points specific to this project:

• Vary the colour palette and slide template style. Try not to repeat the same template or colour palette on consecutive images. Keep in mind that the order in which the content is listed in the spreadsheet is the order in which the thumbnails will appear on the site, so the idea is to vary the thumbnail styles and colours that are next to each other. The goal is to end up with something a bit random like this:

And not end up with something where there are a lot of the same colour-palette variations repeated next to each other, like this:

• Copy-paste the course/lesson/tutorial title into the text area of the thumbnail generator, from the column that says Lesson (tutorial/course) title – for copying. It’s not obligatory to use the title in your graphic; if you find a great image to represent the course/lesson/tutorial, feel free to use one of the templates without text. (More on finding images below.) 
• We are not using Faces or Guest names for these thumbnails. If you’ve chosen a template with any Faces (avatars), click the Faces component and click the eye icon next to it to hide it, or right-click the component and select the “Show/Hide” option in the menu.
  
  
  
• Similarly, if you’re using a template with Guest names, select the Speaker component and and click the eye icon next to it to hide it, or right-click the component and select the “Show/Hide” option in the menu.
  
  

• If you’ve chosen a template that features an image (other than the ones that feature a preselected BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. Editor image), replace it with an open sourceOpen Source Open Source denotes software for which the original source code is made freely available and may be redistributed and modified. Open Source **must be** delivered via a licensing model, see GPL. image from the WordPress Photo Directory, Openverse, or Pexels. Make sure no credit is required in the image’s license terms.

Step 3: Export, upload, and record your thumbnail

• Export your thumbnail by following the handbook instructions. Rename the file using this naming convention: yyyy-mm-dd-name-of-tutorial-or-other-content-type
  Example: 2024-06-13-introducing-the-twenty-twenty-four-theme for a tutorial titled “Introducing the Twenty Twenty-Four theme.” (Do not use any spaces or uppercase letters in the file name.) The file will automatically be given the .png extension by the generator – don’t change it.
• Upload the thumbnail file to the Google Drive, in either the Courses, Lessons, or Tutorials folder. (You’ll find the link in the Training team’s Slack bookmarks – screenshot.)
• In the spreadsheet’s Thumbnail URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org column, paste the URL from the Google Drive by clicking the three dots next to the file > Share > Copy link.

• Leave all other columns blank, unless you receive further instructions.
• If you haven’t been able to upload thumbnails for all the ones you “claimed” in step 1, go back and remove your name next to that piece of content so someone else can get to it.

Resources

• Thumbnail creation guide.
• Google Drive for uploading thumbnails – the drive has sub-folders for these three content types:
  • Courses
  • Lessons
  • Tutorials
• Content tracking spreadsheet

For security reasons, you’ll find links to the Google Drive and tracking spreadsheet in the Training team’s Slack bookmarks: