Alright, so I want to officially welcome you to this Thumbnail-a-thon. Where we're going to learn how to generate thumbnails for Learn.
Wordpress.org. And I hope the Thumbnail-a-thon wasn't too cheesy of a title.
I just was kind of inspired. And there you go. Alright, so what is the whole point of this? What are we doing here?
I want to give you some context on this project. So here we are at, oh, I'm sorry, I also want to quickly introduce myself for those watching the video.
I'm Kathryn Pressner and I'm coming to you from Montreal, Canada and I am working full-time.
helping the Training team and doing all kinds of projects with learned. wordpress.org and elsewhere and I'm sponsored by Atomattic and I've been working with WordPress since 2008.
I also wanna welcome Laura Adamonis who has kindly agreed to be my trusted co-host. Want to give a quick intro?
Hey everyone. Yeah, my name is Laura. I am the Training team rep. I've only been doing WordPress for 2 years.
And but I'm so I'm constantly learning and improving my skills so
Awesome, awesome. I also want to mention that you can ask questions in the chat box in Zoom and Laura will be keeping track of those.
Make sure we answer them all either live or live over the video, make sure we answer them all either live or live or the video or in text.
And yeah, alright, I'm gonna jump in. So here we have Learn WordPress.
Dot org and this is a repository of materials to learn about WordPress, not only learn how to use WordPress, but also learning how to, teach WordPress, give a lesson on WordPress.
Now this whole site is being overhauled right now and if you are logged into your WordPress.
Dot org account you'll see this little banner that says preview the new theme. And if you click that, you'll get a sneak peek as to what this site is about to look like.
And this should be launching. Mid July is the current ETA. So I'm gonna click.
Preview the new theme and this is what it's gonna look like. It's going to match the updated areas of the rest of WordPress.
Dot org a lot better. And it's also going to highlight what we're calling learning pathways.
So there's going to be 4 different target audiences, those who develop with WordPress, those who use WordPress, and those who design for WordPress and who want to contribute to WordPress.
Right now there's only the developing and using learning pathways ready, but they're here. And then below that we have courses which are a collection of lessons.
So if you take the beginner WordPress developer course, you'll see there's a collection of lessons.
So lessons. Make up a course. Alright, and then if we go back below courses and if we want to see all courses, there's a link to all the courses.
And you'll see these little graphics. These are the famous thumbnails that we were talking about and that the whole point of this workshop is to help fill in the blank spots.
So this one here, this is called the fallback image. So if there isn't a cute little thumbnail for a course or a lesson or another type of learning content.
This is the default. So our goal is to have as many custom cute little thumbnails as possible.
So a whole bunch of them have already been made. And you'll see some of them here. I know there's someone on our call today, Rico who has helped create some of these and they look great.
Below courses we also have lessons so here's what it looks like when we don't have the custom thumbnails.
It looks a little boring, right? So we wanna try and get rid of a lot of these. And we can see all the lessons here.
So 2 weeks ago, at work camp EU. We had volunteers on contributor day. Help make some of these graphics and they look really cool like RICO I mentioned created these cute custom screenshots to incorporate and there's a whole bunch of cute thumbnails that are now in use.
And so what I'm going to do today is show you how to make these thumbnails because the cool thing is we have a tool to do this.
We don't have to do these from scratch. We have a really cool tool. Created by.
Francisco, Vera, and I'm gonna show you how to use it. Alright, and so to just to show you how this is gonna work.
I'm going to show you how to use the tool. I'm going to show you where we are tracking where all these thumbnails are going to go.
So basically, On the site, I showed you that we have different content types we've got. Courses up here.
We've got lessons and we've also got to tutorials. Which are not being highlighted on the new site as such, they're going to be converted to lessons or narrowing down the number of content types that we have from 4.
To 2 courses and lessons. But you can see here that tutorials have some thumbnails.
And so what we have is the spreadsheet. Now I want to ask how many people are, is there anyone on this call who is not in the WordPress?
Slack instance. Because that is where the links to these documents are. And if everyone on this call is in WordPress Slack, I'm not going to put .
S. URLs in the Zoom chat. Is there anyone on this call who's not in the WordPress Slack instance Oh, Stanford has keeps having trouble with the link.
Okay. Maybe, let's see. Okay, there's a couple people who are not. Alright, well.
We won't, we're not gonna walk you through how to get into Slack today, but what I will do then is share the Okay, so I'm gonna share a couple of links, a couple of links.
Make.wordpress.org slash. Chat this is how to get into Slack so don't worry about doing this now on the call because I want your eyeballs to be focused on what we're doing here.
For those of you, so if you're having trouble getting into this Slack, Stanford. Maybe Laura could help you with this depending how things go depending how much we need to how many questions are in the chat but otherwise maybe you could reach out maybe you could reach out to me on the meetup event you could send me a direct message through meetup and I can try and help you get into Slack after the call. And I can try and help you get into Slack after the call.
And for those who are not, this is, to meet up and I can try and help you get into Slack after the call.
And for those who are not, this is how to get into Slack after the call. And for those who are not, this is how to, and who for those who have never tried before, this like that I just shared is how to get into Slack.
And so Laura Hartwig said, I'm in Slack, but I don't know where the links are.
So if you go to the channel called training, so number sign or hashtag training. If you go up in the bookmarks in that channel.
There's a bunch of things pinned and then it says team website get started and then there's depending how wide your window is there's, you might see 3 dots.
You're looking under the 3 dots or if it's just right there. There's a little folder icon and it says thumbnail project.
Inside thumbnail project, you'll have the links to the Google Drive that I'm going to show you and the content tracking spreadsheet.
And all of this is explained in this. Post, which I will link to. This outlines everything you need to get going on this.
So you may have already seen this post. But this outlines everything we're going to go over.
So if you pop into the Training team channel, if you are in Slack, if you look under the 3 dots or if you look for the words thumbnail project, you will see the links to all these documents, but I am also going to.
I'll share the link to the spreadsheet here. I won't share the link to the drive yet because I would prefer that.
Everyone. That everyone who's uploading thumbnails into the drive is actually part of the Slack so I can reach out if there's any issues.
Alright, okay, so this is this is where we're keeping track of all the thumbnails that need to be done.
And whether they've been done or not. So I'm going to go through. The spreadsheet, how this works.
So this is the title of the lesson. So for example, I will show this to right here. Let's go to.
Lessons, see all lessons and I'm going to search for a plugin API hooks.
Okay, so. This is the lesson. So that's the title in this 1st column. This is the author.
These are already pre populated. You won't have to do anything with this, but it's just to know the name of the lesson that you're looking at.
Who did it and then thumbnail by so If you see the name of a person in thumbnail by, you can you can move on.
That means that someone has already claimed this. That means that someone has already claimed this. Someone is either already made the thumbnail or is going to be making the thumbn And when the thumbnail is and done.
What I want you to do, I'm just going to show you an example here. You can see all the ones Rico has done for the tutorials.
You were going to upload your thumbnail into the Google Drive. So we have 3 folders.
We have a folder for the courses, thumbnails, folder for the lessons, thumbnails and folder for tutorials.
Today we're going to focus on lessons. Alright, so in lessons. You will basically you will scroll down and you will look for a blank.
Field here. You will put your name in there so
Like that, that's me. And then once you've uploaded it into just by dragging it into here, you will click.
The 3 dots, you will say share. Copy the link. I'm gonna go through all this again, by the way.
I'm just sort of giving you an overview of what we're gonna do and you paste it in.
So that's the content spreadsheet. Well, let's get to the fun stuff.
Let's get to actually making these thumbnails. How does this work? So we have a whole tool.
Called the thumbnail generator tool. So the thing you need to know to use this tool are you need a Figma account.
So again, this is also in the in the post if you don't or if you haven't had a chance to create your FIFA account no problem.
I'm gonna walk you through what to do once you've created your FIFA account but creating a FEMA account is free.
And you can go to sigma.com to do that. I will copy that in here so if you haven't done that yet you can do that.
Anytime doesn't have to be while we're on this call. And there's 2 ways to use Figma is a graphics tool and I I knew it as a way to create mock-ups or wireframes or prototypes of a piece of software.
But what I didn't know is it's also a tool that can do a lot more things.
And we're gonna see this very cool use of FIFA for creating these thumbnails in a moment.
And Figma can be run right in the browser. So I'm using the browser-based version here.
So I can sort of go back and forth easily between different tabs. But if you want, there's also a Figma app.
Which can be run on multiple platforms so you can download that. And run it on the app if you prefer.
And there's also a whole guide to doing this. So if you, you know, you don't have to read it now, you may have read it before this call.
But I go step by step through how to use this. Tool in general to create any kind of graphic.
What we're going to do here on this call is show how specifically to make graphics. For the new site.
Alright, so if you get off this call and you don't remember how to use the tool at all, you can come back to this.
And it walks you through it and there's also a video. Alright. Okay, so those are really the things you need to get set up.
You need to be in your Figma account and you need to have. The link to the generator open.
And the generator is Here. So the generator is hosted in this. The generators hosted it's kind of like a, like a host, like a web host, but it only hosts FIGMA files.
It's called the FIGMA community. And again, not something I knew about before this project, but it's super cool.
That means that we don't have to host this generator anywhere special, that's hosting it for us.
So I'm going to show you an example of how to make one of these thumbnails.
So I'm gonna go back to this. I'm gonna look at, actually let me do one in English just to make it a little bit easier.
I'm gonna do this one here, preparing your block plugin for distribution. Alright, okay, I'm gonna the 1st thing I'm gonna do is highlight the name of this course.
So I'm highlighting it and I'm copying it. So command C or control C.
Then I'll go into the thumbnail generator. So remember when we looked, you see that there's all different styles of thumbnails.
Alright, these ones down here you can ignore these are for particular uses and I'm gonna zoom in more.
One down here are for special uses for events and the WP briefing and for online workshops and developer hours.
We're not using those. We're gonna use the ones above. And you'll see that there's different styles.
These are called templates. Each one is a different template. And you can pick. Pretty much anyone you want, except the one that is just the person's face because for these courses and lessons and tutorials were not putting the person's name who created the content because sometimes it's We're just de-emphasizing the the creator in these thumbnails.
So don't choose this one, or this one, but you can choose any of the others.
One, or this one. Anywhere any of the ones where you see a gigantic face can hide the faces and I'll show you how.
So you'll see that some of them have a picture of the editor and that stays there. These are just pre-made graphics.
With a picture of the editor. Or the ones where you see this picture of a building, these you can swap out the picture of the building with your own picture.
So for example, let's say Let's say I wanna choose. This one here. Alright, I'm gonna zoom in a little even more.
Okay, so I'm gonna I want this one. So what you do is if you click on each element.
You'll see that things become highlighted on the left hand side. I know this is this part is probably a little difficult to see but you will be able to see it when you're using this tool.
This is called a component. A component is a chunk of content in FEMA. And this is a tiny little arrow which you can open up to see what's contained in.
And as I hover over you'll see that the different parts get highlighted in purple. So I'm going to click on the text block.
This is in a way a little similar to the block editor in WordPress. If you think about it, it's chunks of content are like the blocks in WordPress, maybe I'm pushing the the analogy, but I think it's kind of similar.
So what you're gonna do here is On if I click in here. So, what you can do is you can.
Highlight this text just like you highlight text and a word processor or in any other place. And I want to paste in text that I copied from the spreadsheet.
So if we go back here, you'll see it's called preparing your block plugin for distribution.
Paste it in and try not to change the way anything here is spelled unless you really think you see a typo in which case you can ping me in Slack and let me know.
But we've tried to go with WordPress style, which is. Capitalizing very specific words in a specific way.
If you think something is a mistake, let me know, but otherwise just copy paste it from this green column here.
Alright, so we've pasted that in. Now, we don't want the faces here because we're not using faces.
We're not using faces in the in these. So what you can do is you can you can open up.
These components till you see. The faces and it says here faces. And there's a little eyeball here.
Again, this might be very small on your screen and I apologize. There's no way to zoom in on this.
But if you click this little eyeball. Those faces disappear. In an earlier version of my guide, I, I said you can delete the faces, but I think it's better just to hide them that way.
If you are using this for another purpose later and you want them back. It's easy to just unhide them, you toggle this eyeball.
So we remove the faces, we leave the WordPress icon. But we don't want this picture.
So we want a different picture. And, you know, pictures are optional. Some of these templates don't have pictures at all, like, This one here, there's no picture.
This one here, there's no picture. This one here's no picture. So you can use one without a picture.
You can also use one with the block editor already there. I would say use the block editor one when the content of the course is somewhat relevant to the editor.
I mean, we're not strict about this. It's fine if you know if you're, If the course or the lesson is about something else, you can still use the email with the block, but.
Use your own judgment for that. So going back here. In the guide, ISIS I suggested, sorry, 20 posts open.
I suggested that if you want to find a picture. Down below, I talked about finding photos. You can find them from I suggested a few different sources some of these sources when you find a photo it does say you know a credit is required.
So try and find because we don't have a spot built in for credits, try and find one that doesn't require a credit.
So, you know, you might wanna do a play on Word and just type in the word blocks and say, oh.
Something with blocks, you know, or a blocky type of building. I mean, use your own judgment.
Some of these metaphors are overdone. But, you know, so I didn't wanna save I wanted to download.
So you download the picture. Oh, I think I've downloaded too many and now it's Oh, that was a paid one.
Yeah, Pixels build in free. Taxes mixes in paid. Images. No, I clicked on the paid one.
Okay, ignore what I just did. So you wanna focus on I got sucked in by I got sucked in by the page section.
So here's 1 note blocks. I'm gonna download this.
And I'm going to accept the cookies and I'm going to Try and it's giving.
Okay.
No, it's not. Let me down. Okay. So, you, click on the picture here.
And then on the right hand side.
If you open up this this component. It's a little tricky to find because it's You're looking for the image component.
You see this word image here.
Click on this and you click choose image and I'm going to just find an image from
Somewhere and you probably I'm going to
Just 4 a picture. And this is actually gonna be a picture of a person. Pretend this is a picture of blocks.
Sorry, I thought we were gonna find them together, but I'm just gonna go with something easy.
And then once you're done, once you're happy with the picture you found and the way it looks.
You're going to export. So down here, you're gonna click export and it's going to prompt you to save it.
And then once you have saved it. You were going to, oh, now we got, now we got the, sorry, I don't often use Chrome.
So I think that was the issue. That's a me problem. I usually use Firefox.
Okay. So once you have exported the image, You save that on your hard drive. And then you drag it.
Into the appropriate folder. So like I said, you have 3 folders, one for courses, lessons and tutorials.
Since we're focusing on lessons. Everything you do today or. In the in the upcoming days should go into lessons.
You'll just drag it in here. And when you drag it in, before you drag it in, the convention that we're using is to put the the year the month and the day.
And then the name of the course. So my file would be called, for example, it would be called let's see, it would be called.
Let me see if I can make a dummy file for you one second.
So it's 2024. 0, 6.
2 5 and then preparing your block plug in for distribution and use. Dashes instead of spaces.
So the download folder that I'm referring to is this Google Drive. I'm just gonna show you what it looks like once we've added.
So there is a Google Drive and to get the link to the Google Drive. It's in the Training team channel.
In the thumbnail project. Bookmark up at the top of the channel. So you'll need to be in the WordPress Slack in the #training channel to get access to this folder.
And that's because I really want everyone who's working on this project to be reachable in some way.
So if you're not already in the WordPress Slack and you want to, I see a few people have joined. That's awesome.
If you people join the train in the Training team channel, if you want to work on this project, if you can join the Slack and then pop into the training channel and then you'll have access to this drive.
Again, I just want to have everybody be reachable and. Active in the channel so that I can reach out if there's any issues.
So this is what your file name will look like it's gonna have the year, the month, that day, and then the full name of the course.
With dashes in between the words and that is so we can keep track when I download this and know what what this is for without having to open the file and it's just.
A nice organized way to keep track of these. And then once it is here, you will, I showed you this part before, but we click on the.
We click on the 3 dots, we go share copy link. And then paste the link here and.
This, this is not a real one. So if you go here and click on it, you're gonna see this.
It's not the right. They're not the right, file, but this is to show you how it works.
And, and then that's it. And then you can move on to the next one. Now, one important thing that I want to show is that You know, there's all different color schemes.
The idea is that we don't want the same color and the same template. Next to each other because if all of this page is the same format.
It's not as interesting as if it's if it's varied. So one cool thing in the.
In the tool is that Most of these have the option to change color schemes. So if I. Click on this template for example .
You can
If you look for the word color, this is the pomegranate gradient color. And if you want a different color scheme, you can choose from the light.
Brilliant or the blue? Color or the dark blue color. And so by varying which of these templates we're all using and which colors game we're choosing, we're going to have a nice varied look to the page.
So. Let's see, let's look for the word block.
And you see here most of these are pink. I mean, it's obviously it's impossible to predict what people are gonna search and what's what things are gonna be side by side but you can see there's a there's a variety of colors and layouts and.
You know, the idea is to just not all have us using the same template. So if you're doing thumbnails, you know, try and bury the templates that you're using.
So not just this one or not just this one. Try to bury. So.
Are there any other questions? I'm senior. Someone say I'm not seeing 3 dots when in Slack training channel.
So yes, Laura is pointing out if your Slack is wide enough on your screen. You might not see 3 dots.
You might see the words. Thumbnail project right there, but it is the very last thing in the row.
So it might be. So you're looking, the 1st thing you'll see in Slack is number sign or hashtag training.
And then below that you should see something that says one pinned team website, get started. GitHub Learn Repo, Google Drive folder, online workshops.
And then the last thing is the 3 dots or the word funnel project. So let me know, Eileen, if you see it.
There. Stephanie has said, how do I join the Slack team? I'm gonna okay.
I got it. I got the link.
Okay, Laura's on it. Thank you. So yeah, if you're not in Slack, you can follow the link that Laura is posting.
And that will help you connect your wordpress.org account with your Slack account. And so you will need a WordPress.
Dot org account because that makes you a full participant in the WordPress project and then you will link your WordPress.
Dot org account. To your Slack account and if if you've You know, you missed some of these links.
They are all linked off the meetup event. So off the meetup event, I've linked to the steps to prepare and to this guide.
So that should all be and they're all San Francisco's gotten to Slack. Awesome. Glad to hear that.
I know it can be tricky sometimes. To to Those steps can be tricky. So I'm glad to hear.
So, just to recap, we have several documents. We have the content tracking spreadsheet.
Where we're gonna focus on lessons. You're gonna claim the which thumbnail you wanna do by putting your name in there.
And then once you've made the thumbnail, you pop the link to the file in Google Drive.
And I see some people have gotten started. That is super awesome. You're going to try and very which template you're using and which color scheme you're using.
They don't all need an image if you do use an image, try and find an image that does not require a credit or and is a free and open source.
I've linked to some potential image sources in the project post. Another thing, if you don't get a chance, let's say you claim, you know, you put your name next to 10.
Thumbnails today, 1010 lessons today and you don't get a chance to do them all but you're planning to wrap finish or come back tomorrow and do them. Just remove your name.
Don't know because you might forget or maybe, you know. You know, just, you know, remove your name for now if you don't get to them all and then come back.
You're welcome to like come back and pick this up and do more, but try and try not to leave your name hanging hanging out there for more than a day because then we might not be sure like are you coming back are you gonna finish up or should we give that to someone else?
And I see people are naturally doing what I would also suggest, which is maybe like, you know, skip some ideally will do the, we'll do, we'll get all the most recent courses done, our recent lessons done.
These lessons are all the ones at the top are all part of the most recent courses. And so, you know, we were going to be featuring most recent stuff as opposed to older stuff.
So those are the higher priority than the older ones. What else? I see people are already joining.
Yes.
Yes, Catherine, you had mentioned the color variations and I didn't know if you had touched base on where to change those.
In Sigma. Okay.
Yes, I did. Yes, I'll show it again because it's sometimes a little bit tricky to find.
So to to find the color variation, you need to be, let me just see if this allows me to zoom in more.
Ask me to zoom in on the middle part. You need to have selected the. Top level. Of the template.
So you know how there's all these little triangles that open up and you can see what's within each template.
Well to find the color variation your cursor you need to have selected the top. Level of the of that template.
So You're highlighting that. And I'm in this one. It's highly, it's, it's circled in purple.
And then on the right under where it says the name of the template. So basically this is the name of the template.
Text, block, and guest write and I think it has the word names. I cannot see it because, figma cuts.
Oh, there we go. So yeah, this. Yes, exactly. It's just that when you click on that home now, if you're clicking in the middle.
You can also click on the on the thumbnail itself too. Yeah. Yeah, you gotta be careful.
You gotta be you gotta be careful if you got one of these open you might end up clicking on but yes if you click towards the outer edge of the template exactly like Laura just said, you will have selected the template itself and then on the right.
In the right hand panel where you see the name of the template just below that. You'll see the word color and there's a little drop-down with the 4.
Color options. And it's for most of them, it's defaulting to the pomegranate gradient and then you'll see the light gradient.
The blue and the dark blue. And in terms of the text, you know what I pasted here and I pasted the text?
Okay, well, I pasted the name of the course there. There's another way to do this if for some reason you want to edit it down here You can paste your text just below the color selections.
You have a box called text. Let me find, let me find a different. Looks weird. I'll find this again.
You, you can paste it in this little box as well. Instead of here. Either way, there's, there's multiple ways to do some things in Figma.
Okay, some excellent questions coming in. I'm gonna answer Kell's 1, Kells 1st because I'm in text mode here.
If the text is long and gets cut off, can we make the image or text smaller? The short answer is For design purposes, it's preferable if you can find another template where the text will fit.
So you'll see here that for example, this text is smaller than this text. So ideally you would use a different template.
It is possible to make the text smaller, but we kind of want to have some quality control and like for example if everyone starts making the text different sizes maybe we're going to end up text which is too small to read.
The it, it is tricky though, I'd say use your best judgment. Ideally use a different template, but it is possible to change the text size.
Just try and remember to change it back to whatever it was before so that the defaults stay the same for the next one.
Does that answer your question, Kel? Yes, okay, awesome. Okay, so someone wants me to go over how to replace the image with an image from Pixels and yes, with good reason, cause I didn't really show that well.
So let me just, okay, so this is, I've got the Hey, a chair block.
I'm just preparing an actual image to better show you. Okay. So what you do is You click on the picture.
So that's the 1st thing you do, click on the picture. And then actually I just discovered that by double clicking.
It opened up. The image vertical component to open the image. Component within that because to change the picture.
You have to see this little landscape icon. I realize on your screen it might be very small, but it's sort of the classic image of like a mountain and a cloud that sort of.
Graphic symbol. So If you don't see it. Go on the left in this panel on the left where you see image vertical or whatever it's called in any other template it might be called image.
I think they're all they're mostly all called image vertical. Some of them might be called something else.
Oh, that's called editor because it's a fixed one. But going back here.
You can open up this little triangle. And then click on the word image. Once you click on the word image.
On the right, you're gonna see this section called fill. And you're gonna see another.
Another word called image. And you're going to click on this. And I realized, Cal, I only answered the text part of your question.
So look at the image part of your question while I'm doing this. You click on this. You'll see there are a bunch of settings here.
The main one you're gonna wanna do is just to swap the image or in most cases not gonna wanna be messing around with exposure and all that.
You know, you could if your image is not great and you want to tweak it a little bit outside of a graphics program.
I'm gonna click choose a Mitch and now I'm gonna select I actually know I have a I got that image from and I'm gonna select it.
Okay, so this is the image from Pixels. And you can see here you can't really move it around like you can in other programs.
So. If it's not taking the portion of the image that you want. The, you know, one thing you could do is you can edit it in a graphics program, a very basic graphics program that you have built in, like on a Mac, there's preview.
On a PC, maybe someone who's using the PC knows the name of the. There's a standard image editing program on a PC.
You can do it there. There are some a few things you can fiddle with here.
Oh, thank you, ila was saying. Photo P is a nice online editor. Excellent.
I know there's also Canva, maybe Canvas more for creating graphics rather than Editing graphics, I'm not sure.
Maybe somebody uses Canva can answer. There is a drop down here that you can use if to see if it gives you a better effect.
For example, fit. Sit will actually Put the whole image into the space you have. In general, we don't want to use this one because again, for consistency reasons, we want the image.
To be a vertical image. So in general, you're not gonna wanna use FIT because that creates a whole different look and it doesn't look great.
Crop does other things you can crop the image so in general you really do want it to stay as fill, but under some circumstances you might want to use the other options in general, no.
And in terms of Kells question about can we make the image smaller. That probably would be something you would need to do in a graphics editor.
I don't think there's any sort of real resizing options here like you can't.
You know, like in the WordPress editor, you can resize things. I don't really see a way to do that in FIGMA.
Maybe there's someone who knows, really well and who. Yes, there is a way to resize and Figma in this context.
I don't, I mean, there is 100% here. See, I mean this will reside.
No, it didn't, it didn't work. I would say.
Yeah. Yeah.
I think we have, there's certain boundaries that they set up. Parameters within the thumbnails.
Yeah.
So those are things that we just don't have control over.
Yeah. Laura added in Microsoft photo viewer editor can resize on a PC. Excellent. Thank you.
I'm sure this will.
Yeah, it's just the photo viewer has editing tools that I use.
Perfect. Excellent. Stanford saying you can change the frame to resize. Not seeing how to do that, but anyway, you can play around.
The idea, the thing to keep in mind is that The whole point of this tool is to have consistencies.
Consistency across all the thumbnails with some variation in which templates use and which color, which color scheme you use.
We're calling them color variations. But apart from that, outside of that, we're trying to keep things more or less consistent.
So, Gina is saying you're in fitness thumbnail generator. In the window is teeny tiny tumbnails of the color palette.
Series and editable images. So if you use, I don't know if you're on a Mac or a PC, but if you're on a PC, if you go Control Plus and if you're on a Mac you can do command plus or whoop sorry At the top right, you have Zoom in, zoom out zoom to fit okay on a Mac it would be command plus to zoom in and out
or this top zoom tool here. We're at 25%. You can zoom out. So if everything looks really tiny like this, you might be at a very small number here.
You might be really, really zoomed out. Try zoom in to 50% or just pressing command.
Command. Command plus to zoom in and make things bigger. Until you can see things well.
The panels on the left and the right, I am not sure. I don't, I don't see a way to enlarge the panels on the right and left.
Yeah.
No, you can't. That's my little pet peeve is that I need to make it bigger and it's so hard.
Yes.
The the other little tool is the hand up at the top in the black toolbar when you click to that, and the black toolbar.
Yes.
When you click to that, then you can move your whole page around to get to different. So the the hand and the the little arrow are some great tools and that's a control H.
And control control, what's the other one? Control V. Is your arrow and then control H is So.
So, okay, so jeans all set that did it great excellent and Stanford agrees that Figma has some accessibility issues, meaning the not the size of these panels not being able to be changed to being one of them.
Yeah.
Yes, I think we all agree. Especially perhaps those of us with I don't know.
Exactly.
Or, you know, vision, issues. Great. And another tip coming in. If you hold the space bar, you can drag with The other arrow.
Yeah.
I'm not doing that but anyway I'm probably doing something wrong but thank you that sounds extremely helpful.
And I don't know why I'm working for me. Maybe it's, I'm just probably doing some wrong.
But thank you. I'm sure it'll work for other people. I love all these tips coming in.
What else? What else? Yeah, for me it
Yeah, holding down the space bar creates the hand. That's what it was. On my on my PC.
Oh, got it. Got it. Okay. So I'm able to hold down the space bar and use my mouse.
Yeah. Yeah, they are okay. Yeah, it wasn't there.
For some reason the arrow kids are not working for me. I mean, okay. Okay. Okay, okay, cool.
Yeah, there's different ways to get. I found for me, I found has a quite a learning curve like I take stay in a while to get used to it.
And even now, obviously I'm learning a lot of things as I do things. But I don't know, hopefully, you know, the idea here is that watching this happen once or twice watching us do things will if you're a visual person like me help.
Clarify how to do it because it's 1 thing to have the steps listed out and try and follow the steps and that's another to actually see it happening.
So another thing I'll just go over again, I know I mentioned it, but is to make sure to remove the person's face.
We're not going with faces or names, so. You know, you might have to open the panels to find that.
So it's in some places is called speaker in some places is called faces. It depends on whether it's just the face or the face and the name.
You can use this little teeny tiny eyeball to toggle that off. So, toggle that.
On and off. Leave the WordPress logo. If you have, if you're using a version of the template that has WordPress.
Dot org leave that there. And just remove the faces. So again, so for example in this component this component is guest and W.
So if I were to toggle this whole thing off, I'd lose the WordPress.
Org. So you have to make sure to go. Inside, select just the faces and turn that off and then this becomes centered.
So it's a little fiddly. Is there a good question that's come in?
Is there a specific resolution you want the files in? Here's the cool thing. The generator.
Is all preset to have the export done at the right resolution and size and format. So you don't have to worry about that.
So when you are with this template, let's say, let's say this one's ready.
Let me just. Remove the speaker. Let's say this one's ready. If you scroll down, you'll see export, export, text block, and guest, right?
So you click export. And it's going to save the file. Pre, you know, pre done in the right format, the right size, the right resolution.
So please don't change anything there. Want you to change is the name of the file. Because it will come out name something else and we want it to have the name of the course with the date.
So yeah, so hopefully that answers that. It's quite. PRETS, everything's preset in terms of format and resolution, etc.
What else? Eileen has to head up. Bye, I mean. Yeah, so I think That's probably That's probably it.
You know, we're hoping to, let's see, how many do we need to. Nick, there are.
Yeah.
A couple 100 lessons. I think once people are on a roll, hopefully it will go along quicker.
We're also I'm trying to get some help from the community team. There are some community courses as opposed to learning how to use WordPress.
There's a whole bunch of things about community best practices. Okay, a couple of questions.
Sharon knows noticing the, that some of the files have different file sizes and I know. I know I wouldn't worry about it.
I am not sure why actually maybe some because because if you look here, see some of them this is 3.1.
That's 77 kB that's interest that's a huge difference. I'm not sure why.
But As far as we're concerned, you don't need to compress them or change the resolution or the size or anything like that.
We're not we're not worrying about that moment. Are they being updated on WordPress? TV?
We are. We are prioritizing replacing them in 2 places right now. The learned. WordPress.
Dot org site and on YouTube. Later on, if we have more time, we will also do, you'll see there's a hidden column here where press.tv, but given limited time, we're not gonna do that right now.
We just, there's so much to do that we're gonna, we're gonna leave that aside for now, but perhaps in the future and certainly all the newer courses.
Do have the new thumbnails on WordPress. TV as well. Yes, Sherry says as long as Figman is doing what we need, I'm not concerned, just an observation.
I think it's an excellent observation actually. I should probably inquire about that with the the folks who created this generator as to why it's the the folks who created this generator as to why it is it is a bit odd but yeah we won't worry about it for now.
But yeah, making a note for me and I'll put that after. Thank you. Because it is a bit strange but yeah so we are planning to replace thumbnails on the site.
And on YouTube, but not going back on or press.tv for now. Just this is it's a ton of work.
We already have a lot of work. To do. And, yeah, so we're focusing on that.
What else? We've got 10 more minutes left. Does anyone run into any issues? Has anyone tried to do something and it's not?
Working as you expected.
No, so far so good. Maybe there's someone who's not yet in Slack, but hopefully, hopefully, everyone's able to get into Slack.
Oh, Neil was saying about the file size, it's just that solid, solid colors compress way better in PNG.
Oh, that's a really good point. So maybe anything with an image. Is going to be larger because the images don't compress as well as, just colors.
That's an excellent point. And yeah, it could depend on the images we use. I don't know how Sigma handles the images that we pop in there if it's doing any compression at all or anything.
And yeah, this this is being recorded. So if you need to rewatch it later, absolutely that's It's a normal unexpected that you might have to rewatch some of these steps.
I know there's a lot of steps. And you know it is the steps are also here so if you also We watch the video and want the steps in writing.
They're here as well. I'm just looking to see if there's anything else I might have.
Missed but I think I put everything here. Yeah. Yeah. Okay, cool.
Neil's giving an example of a file that's just 77 kB because it's all shapes and solid colors. Yeah, excellent. x 1.
So it is the images that are making the file sizes bigger. Sherry's not seeing the theme switch option.
If you're not seeing it, let me give you. The. Url.
Yeah.
I'm not sure if. People who aren't part of the Training team have.
That option.
Okay.
Okay, good point. So sorry if I, yeah, that's a good point. I, so I've popped the URL in so it.
It's the regular URL and it just has question mark, new dash theme equals one on the end.
And if you don't want. You know, that's, like, to, be, to, be, to, any, more, you make that one equal 0.
That's something called a query string and that will toggle you back to the old site.
Yeah, that'll that'll work. Even though you're not logged in.
So let me just. Yeah. Yeah. Let me.
And that's that's the route of the site that just shorten the URL there that the previous URL was the lessons page.
So yeah, so even if you're not logged in, these are all should work.
And yeah, you can go back and forth and see what things are gonna look like. When this launches and when this launches I'm planning to do an online workshop with a tour of the new site so that'll be something to look forward to.
Hopefully at the end of next month after this lunch is if all goes as scheduled. You'll be able to see the new launch, see the new site.
Yeah, let's look at replacing an image again because it is it because it isn't super obvious.
So let's replace Wes here. So you click on the image. If that doesn't work.
You look on the left hand side. For the component that says image. So let's say this is closed.
Let's say you're in this template and this is the triangle is closed. You're not seeing the stuff inside this component.
You click the little triangle to open it. And then you look for the component inside that one inside the template.
With the word image again. And then you open that one up. It's like a nested doll series, right?
You just open, open, open until you see the word just the word image and the little landscape image graphic icon.
All right. Once you see that, and there's no more triangles to the left of it.
Then you come over here on the right. And in this panel, you look for the panel called Phil, the section called Phil.
Quick on the little tiny picture and the word image. And then if you hover over the picture that's there in the default picture.
Click choose image. Sure, choose your new image. And it pops in. Alright, let me know if that.
Goes okay. I know it is quite fiddly because there's a lot of things to open up.
Thing inside of thing inside a thing. So yeah, when and I would open it up. In a way, again, The parallel here is that list view in the block editor, right?
If you if you look at list view. You have to open these elements the same way you know you might have a a group block with a paragraph block inside that or a button, a button block inside that.
So it's similar when you use the list view, you have to. Open up these little triangles or carrots are also called carrots.
Not a, not a carrot that you eat but like a 10 carat gold spelled that way.
So yeah, it's similar to that to see. The image that you need to replace, you need to open up all these elements.
So Gene, if you have a chance, if you're, if you're giving it another shot, let me know if you're able to try that.
And if anyone has trouble with this or has questions, if you're inspired to dive in and help out with this after this call, which I hope you are, please feel free to pop into the #training channel and ask me a question.
There's other people there who have used the tool before and once you start getting the hang of it, maybe you'll be able to answer other people's questions and we can all help.
And eventually getting this site looking the best that it can look. And I'm super excited to see things coming together and see the cute thumbnails coming in and It's looking better and better.
So thank you to everyone who has helped so far with all these little images. I think it's really making a difference.
Because the current site, the current site, the females were all a dark blue or like a medium blue with white text and it just looked it looked quite bland.
So this is gonna really help jazz things up and make it give a little variety. Yes, Jean got it.
Awesome. Excellent. Happy to hear. Yeah, it takes it took me a few tries.
It's very hidden. I also showed this to someone who's used Figma a lot and he did not know this was there and was like, oh my goodness, that's why you changed an image.
So, you know, Figma has a learning curve. Some of these things are not obvious. At all.
So yeah, so if you if you get stuck on something or you know you watch the video back and still not clear feel free to to pop into the channel Sanford's pointing out something interesting.
Figma requires nesting for a lot of it to work as automations. Okay, I did not know that.
So, Figma, I think this is a special, a special creature. The special requirements and let's get to know a little bit about the behind the scenes there.
I was really not familiar with it at all. Any other questions before we wrap up? We are right on time.
Okay, I'm going to wrap this up. Thank you everybody for being here today. Thank you for all the really good questions and thank you in advance for any any functional help you're able to give to make the site look great and fun and colorful.
Super appreciate it and I will be posting this video as soon as I can get it uploaded.
I'll be posting it in the Meet up comments and then you can get to it from there, but it should be going up on WordPress.
TV, hopefully in the next couple of days. So you can watch it. So yeah, thanks again for everybody to everybody and we'll see you hopefully at the next
workshop. Bye bye.