 Alright, well everyone, we'll go back to lunch, Christina Hill is going to be our next speaker, but before we get started, AJ has some announcements. That was the first half of the day for everybody. Such great energy. A couple things coming up. If you lost anything, you've had some crazy things that lost the phone already, and it's kind of just so amazing for people who don't even care anymore. All awesome and fast stuff is at the hub desk. It just up those stairs right on the left, right cast for registration. So, if there's anything, if you lose anything, check there first. Second, don't forget about the after party tonight. It's one of the coolest parts of our camp period, and hang out with everybody. Geek out at the museum, man in Sao Boa Park, it's a really cool museum. I haven't even been there, I've just been dying to go, so I'm excited. It's going to be really, really fun. And that, have a great session. Alright, she is the creator of the website creation workshop. It has been passionately teaching WordPress and non-techy small business owners, experts, coaches, and consultants. Before becoming a WordPress entrepreneur, Christina worked as a digital artist, for a number of promotions, and she did 3D CTV, and then as a senior technical director for the feature films division at George Lucas' Industrial Light of Magic with no credits for Star Wars, Jurassic Park, and E.T. in the re-release. She now lives in San Diego, California with her husband and daughter. In this session, Christina Hills will show you some easy tips to make working with images much easier for you. Best practices for featured images on how to get to show correctly when you share with social media, and you will walk away with practical tips and tools that you can use whether you're a business owner, freelancer, or just starting out with WordPress. Now let me welcome Christina on how to make our WordPress sites come alive. Alright, so just a little background. I've been teaching WordPress online in my program called the Website Creation Workshop for 10 years. And it's mainly done through webinars that I do do in-person teaching as well. And as he read before, I was an online entrepreneur. I worked for George Lucas' Industrial Light and Magic. I worked on Star Wars, E.T., the Extraterrestrial and Jurassic Park. And it was a great career. I loved it, but I wanted to be home with my daughter. So that's when I became an online entrepreneur. Alright, so we're talking about pictures today. And people like pictures. Because pictures are like candy, right? When you see a gorgeous image on a site, it really draws you in. And for those of you who are health nuts, I've got some great hair, right? Not too many sweets. But anyway, great images give your website that wow. And great images are easy for people who are not super techy. You don't have to be a coder to have really nice images on your site. So today what I'm going to give you is seven things you can do to make your site come alive with pictures in WordPress. So let me just jump right in. Number one, find great images for your site. So I'll run into people and I'll say, oh, that's cool image. Where did you get it? Oh, I got it from Google Images. No, no, no, no, no, don't do that. Just because you find an image on Google doesn't mean you're allowed to use it. Now I will go to Google to look for images to give me ideas of what to search for. So I might put words in like freedom or happiness or kind of adjectives because Google Images might trigger my mind to think of something. But Google does have an advanced image search. Are you all familiar with the advanced image search? Yeah, you just define the exact link. I just Google advanced image search. And then you can put in your keyword that you're looking for and you can click the dropdown, free to use, share, or modify even commercially. So I will sometimes do that, but you still have to be careful with rights and I'm going to be talking about usage rights. Now when it comes to images, if you use your camera, you don't have to worry about ownership rights and giving credits and all that because you took the picture. But we don't all have time and maybe we're not the best at taking pictures. So you want to use stock photography sites. Now how many of you regularly use stock photography sites? Okay some of you, you're not trying everyone. When you go to stock photography sites you always have to look at the image rights because you don't want to take or use a picture inappropriately that you don't have the rights to. So I'm going to go through now some common image license types. I'm going to cover royalty free, rights managed, editorial use only, public domain, and government websites. So let's start with the first one, royalty free. So royalty free means you can use the image multiple times without paying a royalty. For example, eye stock, shutter stock, thick stock, and there's many others. And this is the most common one, this is the one that I use. There's also rights managed, am I going too fast? No, okay. There's also rights managed. Rights managed is when you're granted a one-time use of the image. So if you want to use it on your website, you pay a fee, if you want to use it in a product placement or an ad, it's much more expensive. It's usually for bigger companies. And the pricing depends upon how you're going to use it, but you pay each time you want to use the picture. I never ever use rights managed because I don't want to have to think about that. I just want to use the picture whenever I want. Typical licenses for celebrity and exclusive photos and Getty Images is an example of a company that does rights managed. Editorial use only. You have to be careful with this. If you find an image on a stock site and it's editorial use only, you're supposed to use it only for a news-related story. Use to support text in your news article and it's not for advertising or selling anything. So typical editorial use only is a celebrity or a trademark, logo or service mark. I've gone and said, oh, wow, this is a great picture. I'll use it in my blog post. Then I find out it's editorial use only. And the reason why I stay away from it is because later I'll forget that it was editorial use only. And I'll wind up reusing it. And I just don't want to get myself in trouble. So I just steer clear from that. Public domain. Public domain is great because there's no copyright restrictions. It's in the public domain so you can use it. And now it could be public domain because the copyright expired or it was forfeited by the creator of the owner. So public domain images can be used free without any limitation, but you just have to be really careful is it really public domain. So sometimes I go to Wikipedia to find images, but you just, because lots of stuff in Wikipedia will list that it's in the public domain. So just be careful. I don't usually use a lot of public domain images just because I don't want to do the labor of making sure and figuring out from the website. This is really public domain. So I like stock sites and I have some resources for some great stock sites. Now government websites are generally not subject to copyright in the United States. And there's no restriction on reproduction, derivative works, distribution, because you know our taxes paid for the government so we can use their images. But you can read more at USA.gov slash government dash works. And remember I'm going to give the slides at the end. But the government has some really nice NASA pictures, you know, Cosmos pictures. So those are the kind of pictures I might get from a government website. But my understanding is if it has a .gov you can use the images. So here's some places you can get stock images and again I've listed a lot of resources and you'll get these at the end. I typically, when I'm looking for a picture I'll start with free and if I can't find it then I'll go to a paid site. So sometimes I'll have something in my mind. I do a few searches on the free stock sites. If it doesn't come up right away I'll go to the paid site. Now probably if I spent more time I might find it. But we're trying to do things quickly and get stuff done really fast. And I've got two plugins that make this easy that I'm going to tell you about. The first one is Pixabay. Is anybody already using Pixabay? Yeah, Pixabay is pretty good. What I like about Pixabay is at pixabay.com is they make the licensing really easy to understand. So that's probably the main reason why. I don't have to hunt and click and look at any photos. It tells me right there free to use even commercially. And they are donation based so it's a good idea to, you know, if you use Pixabay a lot give them 10 or 20 bucks every so often. But they have a plugin which is amazing. At WordPress.org and you can just search for Pixabay. When you install this plugin inside WordPress, then you can search right in WordPress, find the image, and then it downloads it into your media library. So it's really, yeah, really really nice. The other one that does the same thing is from Unsplash. Has anybody been to Unsplash? If you want very poetic, designery, beautiful magazine style images, Unsplash is a great place to go. So it's called, they call it Instant Images, One Click Unsplash Uploads. So again, it's free, you can install it, it makes it easy so there's a search right inside. Now some people, if you want to cut down your plugins, then you would go to Unsplash, do the search, download it, so there's just a few extra steps. But this makes it really nice, especially when you're building and you're not really sure, you know, what you're looking for, so it's nice to have that speed to get images into your site. Alright, so we're on number two of the seven tips I'm going to give you today. Number two is about sizing your images for WordPress. And I'm going to talk about the difference between big versus heavy. So what is big? Big is dimensions in X and Y and pixels. So when you're creating an image or you're paying somebody else to create an image, you'll always want the original as big as possible. Because you never know in the future how you might use it. So over the years, as imagery's gotten bigger on WordPress, I've had pictures I got years ago, but they're too tiny, and now I can't reuse them again. So, and you never know, you might create an image, but then in a few months or a couple of years, you want to use it as a header image. So always, always, you're originally wanting to be really big in dimensions. But on your site, you don't want to load in a giant picture because it's going to slow your site down. So big is dimensions, and then heavy is the weight. The weight being the file size. So this big image, which is 2408, 2508 is 392 kilobytes. When I make it smaller, the weight, the heaviness of the file goes down. And the reason why we want files to be light is our sites will load faster. So reducing the image weight is called compression. You want to compress your images. And it's not hard to do. When you compress it, so first one was big in size, then it went to 800 by 980, and it got smaller in weight, naturally. But then when I compressed it, it went down to 56 kilobytes. So when you compress it, it's going to load even faster. And as you get more and more images, you're going to want your site to load faster. Because a fast site is a sticky site when people stick around on it. So I've got a couple of ways you can do this. This is how I do it. I compress my images outside WordPress with a free site called Tiny PNG. And I love this site partially because I love the panda and you drag your files and then the panda is super excited. And then you can download it. And I've done eyeball tests. You cannot tell that it's a different file. Visually to the human eye, it looks the same. But internally, the computer has collected pixels together and made it much smaller. So it's a much lighter file size. One of the things that I see with my students when I'm teaching them to build sites is they're not compressing their files. The site is loading really slow. And you just don't want that to happen. So this method, I just go to Tiny PNG, put up and it's free. Put up my images, compress them, and I save them back to my computer. But you can do it with a plugin. So here are four plugins that will compress your images. And if you want, so once WP Smushit, Short Pixel Image Optimizer, Imagify, and Tiny PNG also has a version. You install this and it will go through your media library and it will compress your older images. So you might want to do this if you've had your site for a while. The reason why I do it manually is I'd like one less plugin to have to have on my site. And it's just a good habit to get into. I found my picture, I'm going to compress it. And then what I do so that I can remember is I add like a little dash in my file name. So instead of pristineandhills.jpeg, I'll put pristineandhills-tny for Tiny so that I know I've already compressed it. So that's just a habit thing. You know, a lot of success with WordPress is just getting in certain habits of you do things a certain way all the time. You know, especially if you work with clients, you want to do things a certain way. Now, how do you work with clients? Okay, I have to move. Now, I've been talking about sizes and compression and I just put this slide in because I just wanted to point out when you upload an image into WordPress, it's going to automatically make multiple sizes for you. WordPress just does that. What I was talking about is your original image. So if I'm going to put this picture on my site, I'll kind of eyeball it and I'll have a ruler tool that I'll show you. But I wouldn't upload a giant picture even though the photographer took a giant picture because I'm never going to display a giant. So what I've been teaching you applies to your sort of main size you're going to use. So you want images with the right size, dimensions, and small weight compression. Alright, so number three, I'm going to talk about organizing your images. So how many of you have like, you know, you start out, your site's not too big, you've got a manageable number of images and then all of a sudden years later you've got tons of images and you can't find them and where is stuff, yeah. So let me just point out with the media library. Some of you might know this already, some of you might not. There's the grid view and then there's the list view. So there's two different ways to view your media library. When you add an image, this is best practice, always add it from inside your page or post. Don't just go to the media library admin, even though you could. By putting it, by uploading it from the place that it's going to mainly live, it makes it easier to find it later. So you can go upload it to this post and you can see where were these images that I used because you might write another blog article, you might start another site, and it just makes it easier to find. It doesn't take long to just add media from inside. And the most common place to be, you're about us. So if you have your about me, about us page, upload the pictures of you or your company or your team or your storefront from the actual pages. It's just a little tip to make things finding easier later. So in that list view that I talked about, you can see where an image was attached to. So it says attached to which post, but then underneath you can see, you can see it fine, it's unattached. So you could attach it later. Again, it's just a little thing, just makes your life a lot easier. Now talking about pictures, you want to give your pictures good filenames and titles. This is important for you and it's important for the search engines. So when you take a picture with your camera, it's going to probably have a name like image and some long number. Like that's not a good name. That doesn't tell you what it is, doesn't tell the search engines. So you want to give a name of what it is and the dashes represent spaces to Google. So Google understands this is Christina Space Hill, Space Photo. That's very descriptive for the search engines and then also for you when you're looking through, what is this picture? So you have a good name and a good title too and it usually grabs it from the name of the file. Christina, do underscores work too? Do underscores work as well? No. No? I'm not sure. I always do dashes. I find them easier to read personally. So I'm not positive about underscores. Google sees them as part of a filename but doesn't see them as separators. Okay, so underscores, no, dashes, good. Alright, I've got a plugin to tell you about. It's one of my favorite plugins to keep the media library organized and this is called the Enhanced Media Library Plugin. It is a pre-plugin. I've been using it for years. You can find it at WordPress.org. Again, I'll have my slides at the end. And the way this plugin works is you create media categories. So just like your blog post has categories, you create your own media categories to put your images in. So it's however your brain works, however your site works, what makes sense to you. So in this example, I have logos. This is for one of my students. She runs a mastermind. She has speakers and sponsors, tea events, and she runs a network luncheon. So that's how she hasn't organized. Everybody's going to be different. And you can make up however many number of categories to work. Then what you do, once this plugin is turned on and activated and you've created categories, and don't stress. You don't have to think of all your categories up front. You can kind of do it as you go, if you, oh, I made a mistake, write out a typo, you can change the name of your category. It's really for your own organization. So you can add an image. This will show up in the media library, once you have this plugin turned on. And then you can check one or many media categories. So this is where it becomes cool, because here, once you've got things organized, you get this dropdown. When you're looking at your media library, the plugin adds this new dropdown. So I can look for logos. I can click the dropdown, and it will show me all the logos that I have for this site. So this is really helpful, if your logo changes, or, you know, you just want to find where it was, or you've got different versions. And then here, I've changed it for a different category for my speakers. So that is the Enhanced Media Library plugin. Again, one of my favorite plugins. All right, so the next tip I'm going to talk about is leveraging the featured image for your blog or your website for social sharing. How many people are using the featured image? Okay, some of you are, some of you aren't. I love the featured image. The featured image came out around 2010, but now, now, with more and more people using social media, the featured image is more important to be paying attention to. So, depending upon your theme, some things use the featured image, some things don't. Most of them now do. Older themes don't use the featured image. And what it does is it pulls up a picture. So this is my blog. This is an example site. Here's the blog. This is one of my favorite articles, and it's pulling up the featured image. Plugins can also use the featured image, like this is Jetpack's related posts. There's other related posts, plugins. They will pull the featured image. So what the featured image is, there's a setting on the side when you're inside WordPress, the featured image. So the concept is, for this article, what would be sort of the main image that would represent this article? So that's sort of how you want to think about it, and that is then you set the featured image. The featured image doesn't actually have to be a picture in here, but it's kind of good if it is, because if people see your blog post somewhere on the internet, it's nice to have that visual connection of I saw this picture and now I'm reading the article and I'm seeing the picture again. So the featured image is really fun. Does the featured image function be preserved in Gutenberg or used in some other way, or we're not touching that right now? We're not touching. So he was asking about the featured image in Gutenberg, and I think I might want to save the rest questions to the end, but I'm not dove into Gutenberg yet. I'm kind of waiting for the dust to settle with Gutenberg. Like, okay coders, you guys are awesome, go figure it out and when you've got it figured out, then I'll learn it. So that's my approach been to Gutenberg. Although it's coming, you know, there's a whole track on Gutenberg. So I'm assuming they would retain that. It wouldn't make sense for them not to. So I mentioned that the featured image shows up in social sharing. So here's an example from my Facebook fan page and my LinkedIn. So when I share, that image pops up and it makes it more enticing. It's going to help draw people in to read your articles and your content. Sometimes the featured image is wrong and it could be wrong because you forgot to set it. You know, that happens to me. It appears. So it's missing. Or I shared an old article that I wrote years ago and I forgot to set it. Or you want to change your image. I mean this is what's great about WordPress is you can change things as you wish. And that's the nice thing about being able to do it yourself not having to wait for somebody else when you want to make a change to your site. So sometimes it's missing or you want to change it or you pick the wrong one. So here is a great URL that I use all the time and it's called the Sharing Debugger. And it's developers.facebook.com slash tools slash devo. Don't worry about writing that down. You'll get the slides at the end. What it does is when you share on Facebook Facebook stores a sort of a snapshot. It caches your site. So if you change it you need to tell Facebook hey I changed my picture go fetch a new image. So you just put you copy and paste your URL hit debug and it might give you other code or stuff and it might give you some other errors. I just ignore that and just click a button that says refetch. So very easy you change your featured image if you're going to share it on Facebook you can just come to this Sharing Debugger tool for coders even if you're not a coder and it will grab the new image for you so that if it was missing now you'll have your image. You know there probably are I don't know of them but there probably are. I had to look into that. That's a great question. It's really easy to use. Here's a plugin for you. I love this plugin. It's called recent posts with thumbnails and if your theme doesn't do this so this is a snapshot of my sidebar where I have some recipes and it throws in the featured image. Again so now my sidebar instead of just having words it has pictures really drawn to pictures like I'm having. Alright so I'm up to number 5 of my 7 tips that I'm going to give you today is creating professional graphics with Canva. How many of you have already heard of Canva? Some of you, not everybody. If you haven't used Canva you are going to love it. Canva is created for the non-designer to get designary looking imagery that you can put on your site and you won't believe how good it looks. And the way it works it's free at canva.com you can open an account and I had a free version of Canva for years before I finally decided to upgrade. So and I think upgrading is worth it but you can get a lot out of it if you're free. The way it works is you pick your design type like your shape so it could be an Instagram post, is it going to be an ebook cover, you know, what kind of image, blog post what kind of image do you want to make? Then here's the power of Canva once you pick basically okay it's going to be a blog post there are pre-made designs so you just drag your design over and then you can use the picture in it if you want or you can change your picture and you can change your text and it's just a nice starting point because I hate starting with a blank canvas I freeze up but if I see a design and this one I don't remember what the original looked like and had like some flowers and some other quote I'm like okay I can put my picture in and I put it in there Do you, I think we have to have the paper in the background photo No, I don't think so So Canva also has so they have these layouts which are basically designs it also has stock imagery so you can search in here and find images so if you want a sunset or a starry night or a forest or whatever you want you can do a lot right within Canva and their paid images are only a dollar so it's really cheap it's worth it so here's some examples you can create ads blog post graphics here's some before and afters so this was the template inside Canva so I took that template copied it into my own I said use this template and then all I did was I changed my words I changed those pictures with my own pictures this one I decided to make this pink color and now I have a professional looking flyer and I printed that out and took that with me to an event so it really saves you time and you don't have to be a designer so here's the key with Canva if you're going to use a design stay pretty close to the design because you've had a designer figure this out if you go changing it really crazy it can start to look ugly if you don't know what you're doing so the best