Kaito Hanamori 2:55 am on December 11, 2024  

Thumbnails for Learn – Help us make the final 70

In June this year, the Training Team worked on creating thumbnails for content on Learn in preparation for the new site design that launched in August. Now, the site has just 70 more that need to be created to complete the content migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies.. Anyone can help!

Please follow the steps below to help the team make the final thumbnails. You can leave a comment on the post once you have made some thumbnails, and a Training Team administrator will upload them to the site.

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.
See transcript below the video here

Process

Step 1: Choose your content

  • Open the content-tracking spreadsheet. (You’ll find the link in the Training team’s Slack bookmarks as shown below.)
  • Select the Tutorials sheet (tab) and choose a tutorial for which you’ll create a thumbnail. (Ignore anything with a “Deprecated” status.)
  • Put your name in the Thumbnail by column (column H) to claim it.
  • For those who speak a language other than English, see if there are any tutorials in your 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. 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 tutorial title into the text area of the thumbnail generator, from the column that says Tutorial Title – for copying (use for thumbnails). It’s not obligatory to use the title in your graphic; if you find a great image to represent the 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
    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 the Courses Tutorials folder. (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 above.)
  • 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.

This post is an updated version of the post Thumbnail Creation Project. If you’d prefer a video walkthrough of the process, check out this Online Workshop recording where @zoonini walked participants through the process outlined above.