 Hello. Welcome everyone to today's online workshop. Happy Friday to everyone. Yeah, I'm still letting folks file in here. Looks like we have folks from all over the world. I saw Florida in the US, Amsterdam. Who else did we have here? Bulgaria, Germany. Welcome. And thanks for spending your Friday evening with us. So I see you're already doing this, but feel free to answer these questions in the chat. Where are you joining us from and what do you do with WordPress? I'm just curious what what folks do with WordPress out there in the community. Looks like you also have folks from Colorado, India, Canada. Wow. Good to see you all. Thank you for joining us. And I also have Sarah here who is my co-host for today. She'll be monitoring the chat and keeping an eye on the waiting room here. So thank you, Sarah. As for me, I'm going to answer these questions for you. My name is Courtney. I'm located in the US in the state of Hawaii. I started using WordPress in 2004 as a blogger and I've been a sponsored contributor to WordPress since 2016. And this image you see here is my profile on WordPress.org. And it shows like the badges of the teams that I've contributed to over the years. So I do these workshops as my contributions to the training team and as well as Sarah and a lot of our other teammates. So yeah, it looks like we have Michael from the Pacific Northwest using WordPress for business and hobby. Well, like from Netherlands builds webpages for affiliate marketing and travel. Awesome. Great to have you here. So if you've never been to one of these online workshops before, welcome. We're here to learn together so you can ask questions in the chat at any time. And also, if you know the answer to someone else's question, or have anything to add to the conversation, you can just contribute live in the chat. Again, we're here to learn together. We help each other learn new things about WordPress. I learn something every time I do some of these workshops. I know that this and other online workshops are recorded and then uploaded to WordPress TV. And so I will share a link to the recording once we have a posted on the meetup.com page. And finally, I wanted to add that online workshops like these are hosted by folks like myself and Sarah that enjoy WordPress and giving back to the community. So if there's a topic that is WordPress related that you would like to share your knowledge about and would like to do one of these workshops, please get in touch with one of us. I'll be sharing some contact info at the end. Alrighty, so the reason why we are here today is to talk about some tips and tricks for working with media and WordPress. So we'll be going over adding and removing images, organizing your media library, regenerating your image thumbnails and I believe we'll have time to go over applying do a tone filters to change the color effects on your images. So we're doing something a little bit different for me today. I'm going to be sharing these tutorials and we'll be discussing them afterwards. So, all right. So that said, what we will not be covering today is how to install WordPress. We do have some excellent tutorials on that on learn.wordpress.org and we can share some links to that later. We won't be going in depth to compare some different plugins for each of these topics. But there are some recommendations within the tutorials for some plugins. And finally, we won't be going over any advanced image editing. We're going to show you some things that you can do within WordPress. Alrighty, so before we begin, I know that look you had this question about if there are any common sizes for images. I did start looking into this for you so you did specifically ask about image sizes in 2022. The guideline that I found is just 1024 pixels. That's the large default size in WordPress, which you know we will see that we'll go over that in this in a tutorial in a moment. So the first tutorial that I'd like to share with you is from Sarah and this one is about adding and removing images to WordPress. So give me a moment and I'm going to switch my screen share to that. And Sarah mentioned that this is the first tutorial that she had ever made. Okay, so let's see. Let me know if this works. Perfect. And when I started, if there's no sound, please let me know. Hi, welcome to Learn WordPress. My name is Sarah Snow. Are you not sure where to upload your images or do you have some concerns about deleting existing images? If so, you're in the right place. This workshop will walk you through both adding images and some little-known considerations about removing them. Let's get started. Let's discuss adding new media. Now, there are a few ways to add an image to this media library. Either of the pictured buttons will take you to the screen or one like it. You can then upload your photos by dragging and dropping them or by looking for them in your finder. Here's an example of dragging and dropping. You can also add media to the library by using any sort of image block while you're working on a post or a page. Now from this page here, I upload a new image and I select the one that I want. Wait for it. An image appears both on the page and in the media library, just like magic. Now let's talk deleting images and media. Deleting media from your WordPress website is a little more complicated than it sounds. You can remove an image from a post or a page and it will still appear in the media library. Take a look. You can then choose to use that image on a different poster page in the future. However, let's talk about what can happen if you delete an image from your media library. If you want to delete your images, videos or other media from the media library itself, do so with caution. When you delete posts, pages or comments, you can often find them in the trash if you changed your mind or made a mistake. However, unlike posts, pages and comments, if you delete an image from your media library itself using this button, it is gone forever, or at least until you find it on your computer and re-upload it. Worse, you might not know it right away, thanks to something known as caching. The short version of caching is that whatever program you're using to browse the internet, it likely downloads a temporary copy of your website to your machine. Which means your website will continue to look the same as it did for you, pictures and all, for a few days. However, everyone else who accesses your website from other computers will see a broken image. So, thanks to caching, even though you might continue to see an image for a few days, it will eventually disappear. This is what happens if you delete an image from your media library, but you left it on a page or a post. Why do people delete media? Well, some people will upload all sorts of enormous photos, videos or other media that take up a lot of space, which is sometimes the cause for deleting media from the media library. The good news is you can auto-limit the size of images by default through these settings. If you realize that one of your photos is just a little too big, there are also these edit image settings that will allow you to change what size an image can be. So, for example, let's say I don't need something that is 2,000 pixels across. This is just a small image that I'm using on a blog post, not one that I'm using as part of a larger layout or as a header image, so I can make it smaller. Instead of deleting it forever, I can change the scale and make that image smaller, which saves me time and space. There you have it. Now you know the basics of the media library. Okay, so take a little feedback that the video was a little blurry, so I apologize for that. I will be sharing some links to these tutorials at the end as well. So, does anyone have any questions on what we just watched? I know that we had an unrelated question that we'll get to in a moment. I just wanted to check in with you all to see if you had any questions on that last tutorial? No? So, the question in the chat from Gerald, what is the best method to keep individuals from stealing my images? Yeah, that is a very good question and it is a ongoing problem for sure, especially if you're doing something like a photography blog. The only thing that I've done in the past is adding a watermark to the images. Sometimes that does interfere with the image, but it does prevent folks from claiming that they own your image. Yeah, watermark. So, that is something I don't have any resources offhand for doing that, but usually you can add that in most image editors of your choice. But thanks for asking that question. Yeah, it sounds like that's something that folks want to know more about. Maybe that's something we could do a workshop on in the future is protecting your images. I would be open for that. Yeah, adding your copyright info on the images as Jean suggested, that's a great idea. And mentions you can also disable the save image as option. I actually did not know that. Yeah, that's because the browser that's because the people usually like will right click on an image and do like save image as is that something you can set in WordPress. Yeah, some watermarks can be easy to remove. I have seen some that actually like, lie it over the entire image and I know that can be distracting. I mentioned about the save image as option. You have to block in code but that doesn't stop someone from taking a screenshot very true. There's so many ways around that. So tricky. But yeah, definitely something to think about. And I'd love to find some resources for y'all about that. So thank you for asking that question, Gerald. Next, we have a tutorial about organizing your media library. And this one is a good one. Find that video for you. Let's see if we can make the quality a little better on this one. Just a moment. Hi, welcome to Learn WordPress. Join me as we explore the media library and ways to organize all your media. Media consists of the images, videos, recordings and files that you upload and use on your site. And the media library gives you access to all your media and allows you to add, edit, view and delete media you use or wish to use on your site. You can add various types of media to your library from photos, screenshots, audio, PDF documents, spreadsheets, PowerPoint presentations and even Adobe Photoshop documents. When you open your media library, it will open to the default grid view. And in the grid view, thumbnails of images, audio icons, etc are all arranged in a grid structure. And yeah, you are able to filter through your media to find what you're looking for. At the top, next to the grid view icon, you can filter your media by media type and date. The All Media Items dropdown allows you to select by the types of media such as images, audio, video, documents and even spreadsheets. You can also view any media that is unattached to any posts or pages and this means the media is in your media library but you haven't used it anywhere on your site. Let's use the filtering option. For example to only see audio files or documents like a PDF or even spreadsheets. And then of course you can just go back to seeing all media items. Next, the All Dates dropdown allows you to select by date which media are displayed. You can quickly find media you have uploaded in September for example or October or you may choose to view all. To the right is a search box where you can enter a word or series of words to search for specific things in your library. The search results will be updated as you type. But as you can see, nothing showed when I typed in jump. For this function to work effectively, you will need to add a description to your media items. And now when I return and type in jump again, the image will appear. You may also wish to view your media in list view when you click on the icon next to the grid view on the left. In list view all your media will be listed below each other as the name implies and you will also be able to see the file name and what type of file it is. For example a PDF or JPEG. This leads us to the main reason for this workshop. If you have a lot of media in your library, it might start feeling a bit disorganized or intimidating to manage all your media. You may be asking, isn't there a way to categorize your media? Well, the answer is yes. We are going to use a plugin to achieve this goal. As a reminder, plugins help you to extend the functionality of your site. And there are thousands of free plugins to search from and use in the directory. Let's make our way to plugins and click on add new. I'm going to type media plugin organizer in the search box and within a second or two we will be able to choose from a variety of options. I will be selecting an open source plugin called media library organizer. Media library organizer doesn't replace the look and feel of the media library. Instead it will enhance the WordPress user interface. Adding key features needed for mass organization as well as searching and filtering of media. There are many other wonderful plugins to choose from in the directory. Three popular plugins worth exploring are number one WordPress real media library. Number two Filebird and number three Wicked Folders. Let's go ahead and install the media library organizer plugin. And always remember to click activate. When I return to the media library you will see we now have a new left sidebar called media categories. And you have three options to add, edit and delete. Due to the fact that I haven't created any categories I only have the option to add new categories and subcategories. I'm going to go ahead and create a new category and name it traveling. Then I will click on box select and choose the appropriate images. And once I've done that I'm going to drag and drop them to the new category. The second category that I want to create is going to be called nature. And once I've created the folder I will once again click on box select. And then choose all the relevant images I want to add to this category. And once I finish selecting all the media I will drag and drop them to the new category called nature. The third category I want to create is going to be called lifestyle. Now I will click on the category to add subcategories. I will right click on my mouse, select add child and name my subcategories. The first one is going to be called exercise and the second subcategory I'm going to name recipes. Once I've done that I will click on box select, choose the exercise images and drag and drop them to the new category. Lastly I want to create three more subcategories within recipes. The first category is going to be called vegetarian, the second one meat and the last one breakfast. Once I've created the subcategories I will choose box select and drag and drop the images to their respective categories. So first breakfast, then my vegetarian options and then a meat dish. And now you will see all the images in their categories. The display of categories we see here is called tree view and is used for easy searching, filtering and bulk categorization. If you click on unassigned you will be able to view all the images or files that have not yet been categorized. If you right click on a category and decide to delete it, the images or files will merely return to being unassigned. As you have seen using a media manager plugin can help you organize and feel more in control of your sites media and this becomes even more true the larger your media library gets. Visit Learn WordPress for more workshops and training material. Alright, well thank you Wes for that he's not with us today but he always has such great content. Yeah I think this is one of his was one of his early work tutorials as well. Do folks have any questions on organizing your media library or anything you saw there. I know sometimes it moves a little quick. So, so curious if there's anything you'd like to go over again, or if you have any questions. Let's see. And asks, can an image be in more than one category in that plug and I believe so yes, I did try that so like for example. I think I in Wes's example was he had breakfast and vegetarian and one of those images fit into both. I believe so. Yes. Gerald says, use happy files so that is that a plugin. I believe I haven't heard of that one. Gene asks, is there a limit to how many categories or sub categories you can have. I haven't hit a limit on that yet. So as far as I can tell there's no limit. It's like delete returns it to unassigned category not delete from media library. Yes, that is that is confusing. When you're so when you're actually I have it up on a test site right now so let's take a look over right actually have no categories in this right now. Let's add two categories. The leaders returns it to unassigned. So like say, let's try that out. So you mean like this delete permanently, I'm guessing, or the drop down of the category. Ah, this. Okay, gotcha. So if I deleted this logo category that has one image in it. Delete media category. Okay. Yeah, it looks like it does just return it to unassigned. They use that terminology delete here but if you wanted to delete from the media library. You would select here. And then hit delete permanently so the fact that it's using delete for both of those. That is confusing I do agree. Gerald, you mentioned that happy files as a plugin and works. Works a demoed plugin. It also works on pages posts and others. Thank you for sharing that the word delete is universal across technology they should have used remove or something yeah bad UI UX. Yes, or even just being clear to say like, you know if I am right clicking on the category here delete category would be just as just as clear or delete image if that's what you're looking to do. So yeah, good, good input and thank you. All right, so to move on to our next tutorial. This one is about regenerating thumbnails for your images. Good day. My name is Wes Theron and welcome to learn WordPress. Today we are going to look at how to regenerate thumbnails or new image sizes in WordPress. But you may ask, why would I need to regenerate thumbnails? Well, a problem that WordPress users can bump into one day is that they featured images appear cropped and out of proportion. And this happens a lot after you've changed your WordPress theme. Normally when you upload images to WordPress, they are being resized to the themes requirements. So after you've changed the theme, you may find the thumbnails for the previously uploaded images are distorted as they have been sized according to the old themes requirements. Don't stress, we have a solution. Firstly, let's recap the objectives of today's workshop. At the end of this lesson, you will understand how WordPress handles images and image sizes. You will be able to install the regenerate plugin and use the plugin to regenerate thumbnails for all media or only for certain images. So let's say you changed your theme and some images are distorted. To remedy the situation, one can use the regenerate thumbnails plugin. The regenerate thumbnails plugin is an open source plugin, but you may decide to use another plugin such as regenerate thumbnails advanced or dynamic featured image. And there are more options available in the directory. In today's workshop, we'll be using regenerate thumbnails. Essentially, the plugin starts generating new image sizes defined by your new theme or media settings. Let me provide some more clarity by looking at how WordPress handles images and image sizes. If you go to media settings, you will see that WordPress gives you three default image sizes that can be customized. These sizes are all generated when a new image is uploaded through the media library. And here are the default options, which you can change if you wish to. The thumbnail size is 150 by 150. The medium size is 300 by 300. And the large size is 1024 by 1024. Remember to save any changes. If you check the uploads folder, you'll see something like this. In addition to the original picture JPEG, three sizes were generated. So as we mentioned earlier, these files are created at the moment the files are uploaded to the media library. But if your theme has different size requirements, it will override your default settings. Now here is where it gets tricky. If you change your theme, your old images might not be able to fulfill the requirements of the new theme and can lead to distorted design. And this is where we need the help from the regenerate thumbnails plugin. This will allow you to resize all the images you uploaded before to conform to the size requirements of your new theme. Note that in real life, we recommend making a backup of your WordPress site before adding and activating a new plugin. So let's go ahead and install the plugin. Go to the left hand side of the dashboard and click on plugins and add new because we are going to look up a new plugin. And then on the right hand side, go to search plugins and type in regenerate thumbnails. And you'll actually see it's the first plugin that comes up. The next step is to install the plugin. So click on install now. Let's wait a sec. And then afterwards, we have to activate the plugin. Click on activate. And now we are ready to use the plugin. So we will demonstrate the way this plugin works via modifying image settings and not inter-exchanging themes with different requirements. So let's start. Create a new post and choose add media. I'm going to make a heading and call it regenerate thumbnails. Upload a picture to the media gallery and place it in the post draft twice. Make sure the first time it's uploaded is a thumbnail. Now we are going to upload the same picture again. Image, media library, and then click select. This time we are going to save it as medium. Then publish the post. Now edit the media settings of your images. Go to settings, click on media, and change the thumbnail settings to 200 by 200. And the medium size to 400 by 200. And remember to save the changes. To finally enforce regenerating the thumbnails for your site's needs, go to tools and at the bottom click on regenerate thumbnails. And now we are going to click on regenerate all thumbnails to regenerate new image sizes as defined by your theme on the settings media page. Look at the conversion progress and note that you may need to wait for quite a bit of time if your media library is large. Now we are going to edit the previously created post and add a new thumbnail size image there. Use the same image as before so that you can compare. Remember you can add an image by writing dash image or click on the plus sign and add an image via the media library. You will notice the old pictures are still left in the dimensions they were in while the new one is sized as expected with the new themes requirements which is 50 pixels bigger in both dimensions. But you might only want to regenerate thumbnails for a certain image. So go to the library section under media, switch to the list view and then you choose the image you would like to alter and click on the regenerate thumbnails link on the right of the image. And then you click regenerate thumbnails and the process is done. Alternatively, you can use the WordPress media regenerate command if you are using the command line interface. I trust you have found this workshop helpful. Please explore learn WordPress for more workshops and training material. Thanks again to Wes for that. Do we have any questions about regenerating thumbnails? Yeah, this one was actually new to me. I was mistakenly like deleting and re-uploading images. And that was just a waste of time. Is that a universal process to reset the size regardless of the theme? Yes, I believe so. Oftentimes after you install a new theme, that's when you want to do this. So any theme, so it's a good practice. Any other questions? Let's move forward. All right, so this is our last one. It's a fun little trick to apply some duotone filters to your images. Hi and welcome to Learn WordPress. Let me show you how to use this really cool feature called duotone. And if you haven't heard of it, duotone means combining two colors as a filter and then applying it to an image or video background. Depending on your needs, duotone can make your images pop and it allows you to further your branding through colors and create even more striking designs. Let's look at a few examples. With duotone, you can completely change the look and the feel of an image. In the next example, we will contrast two different types of duotone filters. You can even use the duotone filter in the featured image block to meet your design requirements. It's a great way to bring character to your photos. Duotone can be anything from a simple gray scale to a mixture of any two colors and something to take note of, the duotone effect works based on high contrast images. And don't be worried. Images and videos in your media library will remain unchanged so the image or video is never modified in your library. To add a duotone filter, click on the insertter and select an image from your media library. When the image is selected, you will have access to your block toolbar. Click on the applied duotone filter which appears as a dotted circle within the menu. You will see a few duotone filters that come with your theme. You can easily just click and it will make the change for you. And if you want to change it, click on the duotone icon again and select a new filter. If you would like to undo the changes you've made to the image, go back to duotone and click on clear. You can also click on shadows or highlights and select one of the colors from your palette. So you can go ahead and change and modify your duotone filter to meet your requirements and design needs. A duotone filter can be added to a video in the cover block. So let's go ahead and add a cover block and select a video from our media library. And I will change it to wide widths. And now we can follow the same process by selecting one of the default duotone filters or by creating our own. And as you will notice, it really does have a remarkable impact on an image or video. And you can play around with the colors to find exactly what you're looking for. So now it's your turn to find the right duotone filter for your website. Visit Learn WordPress for more workshops and training material. All right, that one was short but sweet. Another good one by Wes. And that's it for the tutorials I wanted to share with you all. Any questions on what we just watched? Nothing in the chat. Gene mentions adding a duotone might help with the stealing of images. That is funny. Yeah, you can do it in a funny like neon color or something. It's a style for sure. The cat image went from angelic to demonic and duotone. And in this house, we always say cats are a little bit evil. So just kind of bringing that out. Something like, I'm going to move on to this, to our recap, because I always ask, and Sarah asks this too in her workshops, if there's something new that you've learned today. So in putting together this workshop, I, you know, I discovered these plugins. So they're all new to me. I apologize if I didn't have like a depth of knowledge on any of them, but something that I learned new from the duotone filters that you can apply it to video. I had no idea. I thought it was just an image based filter. So I'm definitely going to play with that. Let's see. Look, you learned about the thumbnails. And see Henry or about organizing the media library. That's great. Yeah. Organize eating media libraries. Once they get like huge is. It can be a mess. It could be really difficult. So yeah. Sarah mentions that she loves that there are so many of these tutorial videos available on learn.workpress.org that is right. There's one of the reasons why we did this workshop this way today is to, to, to showcase the tutorials that we have available. And I strung together these media related ones. So yeah, if you go to learn.workpress.org, there's a pretty clear section. Actually, just pull it right up on the screen. Right here under tutorials, we have all these great tutorial videos like the ones you just saw. So if you click there, you can find all sorts of topics here of tutorials that the training team has recorded for you to learn at your leisure. You see, we have a question here. What is the difference between the dot org and the dot TV for WordPress. Excellent question. So WordPress.org is where we, where we host, you know, the files for WordPress, the support for WordPress, you know, the self-hosted version of WordPress that, which is what we all contribute to here on the open source project. And the dot TV is specifically for the videos that are that we record in at WordPress events for learn WordPress. So you'll see that here. There's thousands, at least the videos here for your perusal from work camps and meetups all over the world. So yeah, check that out when you have a chance. I'm just asking how to resize the image. You mean like within the media library. I'll give you a moment to answer that. Gene says, I like the media organizer you showed the one I tried before had a category limit for the free version. That's not a question, but a comment. Thank you, Gene. Francois asks, is it possible to upload SVG file like that other media's file? I'm just trying to understand the question. So to upload SVG to the media library is what you're asking. And Henry says, I thought WordPress doesn't support SVG. Yeah, I didn't think so either. I bet you can just upload it as a file, but it's not going to be supported in like it'll just store it as a file and you wouldn't be able to use it as an image. So I'm going to try that. I don't know if I have one on hand actually. There's an SVG plugin. There's your answer. Circling back to M's question. Can you resize the image in the media library like if you want to crop it or something? Yes, you can. Let me show you how that's done. So let's open an image here. I'm going to click on the image to open it in the media library. And if you click on edit image, you have all these options here at the top. So you can crop it by clicking on the crop button. And say I just want to tighten this up a bit so you can drag the corners to crop the image. And there you go. And then just hit save. There's the cropped image. Yeah, and here you can regenerate the thumbnail. It's right in the attachment details. Because I have the regenerate thumbnails plugin activated. Let's see, would the edit image apply to all previous usage of that image or only new uses going forward? It would apply to previous uses of that image because it's referring to this particular attachment. And that's why it's good to regenerate the thumbnail too. Do you have any other questions? Nancy Henry was asking about the plugin, the SVG plugin, and what does it do? I'm not familiar with that. So if Jay Grieger, if you could answer that question. We'd love to hear if you're still around. If you update the alt text, caption, description, et cetera, for the image in the media library, does that also ripple to the images already in use? Yes, it does. Anytime you edit the attachment that is already linked to other uses on your site, your page, your posts, it will update throughout your site if it's in use in different areas. Do we have any further questions? I see we've got an answer about the SVG plugin. It's called SVG support and it allows one to upload an SVG to your WordPress site. Thank you. All right, so I mentioned that I would provide you with some contact information. So if you would like to ask any further questions, the training team is on the making WordPress Slack. So you can join that at chat.wordpress.org. I can be found, and the training team can be found hanging out on the training channel there. I'm also on Twitter at cpk underscore WP. And also, yeah, if you would like to do a workshop on any topics that you would like to share your knowledge about, please reach out. I'd love to help you make one of these workshops happen. Or even one of those short tutorial videos we saw, if you have some knowledge you'd like to share about a WordPress topic, please let me know. So thank you. So again, thanks for learning with us. And as we mentioned earlier, you can join more online workshops and watch some more video tutorials at learn.wordpress.org. So thank you everyone for being here, and we'll see you next time.