 Hi Jonathan. Hey there. Is that carpet? Excellent. Welcome everybody who's joining. On this, I believe it's warm around the world today. I've seen folks in Europe reporting that it's warm. Yeah, Tracy mentioned that it's warm. That's nice. Seems to be warm all over. Sorry, I'm just going to do something here quickly because I've got something sitting in front of me that's flashing and I'm trying to turn it off. So while everybody is joining, let us know where you are joining us from. You're welcome to let us know in the chat or you're welcome to use voice and let us know where you're joining us from. I'm Karthik from India. Okay, we've got Karthik, welcome Karthik. I met Karthik officially for the first time on Wednesday morning. Yeah, it was on the dashboard widget workshop that you have. That's right, dashboard widgets, but I mean what I'm saying is we spoke for the first time, I think Wednesday morning when there was a WPCLI. Yeah, actually I have already met you in the WP training meetings as well. Okay, all right. Okay, excellent. Yeah, it's so difficult to keep track of everybody that I've met. Okay, we've got Anatoly from Ukraine, we've got Sharon from Galveston, Texas, Rico from Switzerland, Doug from Portland, Oregon. Hey, Adrian, see you there from Anaheim, California. This is going to be around 90 degrees Fahrenheit or 3040 degrees Celsius today. We've got, I think it's Mark from Isacara, Washington, Karthik from India. How do you pronounce that name? Coimbatore. Coimbatore. Okay, I'm going to try and remember how to say that next time. It's a city in Tamil Nadu, India. Okay, excellent. All right, so let me introduce myself very quickly. For those who don't know me, my name is Jonathan. I live in Cape Town. It is the middle of winter, but it is 30 degrees outside today. So Cape Town is doing its usual thing of being weird. I work at a company called Automatic. I am a developer educator, sponsored to work with the training team. And all that just means is I do these kinds of things. I do workshops, I do tutorials, I do courses. I try and help folks learn WordPress development specifically. So today we're going to be diving into responsive images. Now, before we get into today's topic, I just want to mention that unlike my usual Thursday workshops, today is a little bit less show and a little bit more tell. There's not a lot of coding we can do really around this topic in a short space of time. So today is just to introduce the responsive images API to you show you what it does and kind of give you an idea of how it works. But there's generally, depending on how you build your themes, you generally shouldn't have to interact with it too much because it's kind of things happening under the hood. But that is the goal for today's workshop. Then just a few announcements. We always try to get through these. Tracy is co-hosting with us today. Tracy seemed to have some trouble with his video today so you can't see Tracy. But thank you to Tracy for co-hosting. Please, if you can't see any of these slides, please let me know you're welcome to either unmute and let me know if you can't see the slides or mentioned in the chat. We should be presenting in focus mode, which I actually haven't checked this time so I'm going to quickly check that. Yes, we are in focus mode and all focus mode means is that I can Tracy and I can see all of you and all of your video, but you can't see each other. One reason we do that is because there have been some situations of zoom bombing. I seem to have been very, very lucky in that not many people have zoom bombed my sessions, but it does still happen. So that's one of the reasons we've enabled that. You are as always welcome to ask questions. You're welcome to post your questions in the chat or use your mic to ask questions. The only thing that I do ask is if your question is not specifically related to what we're talking about at the time, please keep it until those breaks that I allow for questions. But if you're posting them a chat, you're welcome to post them as they go through and I'll get back to them when I get a chance. I'm going to start with item two on this announcements list. I've just come back from lunch with some colleagues, not work colleagues just colleagues that I know from the local tech community. And I haven't been drinking I promise, but I have had lunch with them and chatted with them so that does make me a little bit excited. So if I'm speaking too fast, if I'm rushing off like I tend to do, please do let me know and I will slow down or I will take a pause or I will take a breath. As I mentioned, we're not going to do that much local coding today, but if there is some coding some some things that we can do later so if you would like to follow along with me please make sure your local install is ready. You just need a local WordPress install I'll go through the requirements in a second. It's nothing it's nothing major. I will be posting this to WordPress TV afterwards. And if you're looking for any other tutorials or courses you can visit alone at WordPress.org and any other developer news or blog updates or posts you can go to developer WordPress.org slash news. Those are two great places to look for information. Sharon says yes zoom bombers are not welcome had it happened to me in one of my meetings it's terrible. And what we've what we think we've determined is that it seems to be teenagers in US time zones later in the US time zones I guess they're not awake at the time that I run my workshops, which is why it might not have happened but hey I might be I might be inviting it now so I best be careful what I say. All right. Let us move on to learning outcomes. Today we're going to look at what it means when we talk about responsive images and how that works. We're going to dive a little bit into the history of how things used to work responsively or adaptive design is what the term is. Then I'm going to show you what the WordPress responsive images API does effectively under the hood I'm not going to show you the actual code but I'm going to show you the results. We're going to look at some of the functions and the hooks that have added to enable this responsive images API. And then we're going to chat briefly about creating your own responsive images in your WordPress site. We're going to look at how you do that in classic themes and how that is taken care of in block themes. And the, the secret about block themes is all handled for you don't have to do anything which is which is great. The requirements for today if you want to code along with me later on is just the default WordPress install a text editor to put some code into one of the theme files and then if you have them installed the 2021 and 2023 default themes. The reason for this is the 2021 was a classic theme or is a classic theme so that's the one we'll be using when I show you the classic theme way and 2022 is obviously a block theme and will and will dive into how that works. Adrian says yes it's typically the teens in the ones who have been bombed that seems to be a common common thing they used to they used to graffiti things now there's a bomb. Okay. I'm going to take a pause there and have some water. If anybody has any questions or if anybody's still getting that thing set up. Otherwise, if not we will dive straight into some documentation. All right. And the first piece of documentation that I'm going to show you today is not one from the WordPress developer docs. But before I do that what I'm going to also do is I'm going to share my slides in the chat because there was a little bit of a bug with the link for my slides and meet up. And a full stop at the end which was breaking the URL so I'll share those slides again. But this is the Mozilla developer. What are they called MDN what does it stand for Mozilla developer network or the MDN web docs. If you are building for the web, and you've never seen MDN before I highly recommend checking it out. It is everything to do with HTML CSS and JavaScript since 2005. It is my default location when I'm looking for knowledge about how CSS works our HTML works and our JavaScript works. For those of you have been around for a while, it is the better version of what W3 schools used to be. We've W3 schools that updated their knowledge but there was a state where they were not seen as the best place to go. But it is a great resource for everything related to CSS HTML and JavaScript. And so the link that I'm going to share is the one about responsive images. It's a very long and detailed document I don't expect us to go through it now. But it will give us a good example of what a non responsive set of images look like. There is a live example in this document which you can open. I will share it in the chat and we will use that as our example of what not responsive images look like. And then we're going to dive into something called your responsive mode in your browser. Now depending on which browser you are using it's called something different. In Chrome based browsers it is called I think it's just called responsive mode. In Firefox and Safari it's called responsive design mode. I use Chrome so I'm going to show you at least I use Brave which is based on Chrome so I'm going to show you how to get there in Chrome. And then if we have some time we'll dive into Firefox as well. So whatever the shortcut is to open up your developer tools mine happens to be F12. So that opens up my developer tools mine I like on the right hand side. And then it's this little button I just need to hide something here. It's this little button here it looks like a desktop with a little mobile device in front of it you click on that and it changes the layout. And you can then switch between different responsive sizes. So there's a tablet one there's a mobile one. There's a laptop one you can't see it on screen right now but there's even a desktop one. You can even manually change these values you can create your own ones it's a great way to test for whether or not your site is responsive. I'm going to open up Firefox quickly so we can see how it works in Firefox. For those of you who use Firefox. Let me just get Firefox up and running. And let's actually get that link in Firefox that I opened up here. Let me just copy this out. I think in Firefox it'll be a similar shortcut mine might be F12 again no it's not maybe it is maybe I'm not in the right place. It is F12 there we go. So in Firefox because I don't use it much I've got my developer tools at the bottom. And I don't actually know where the, I don't use Firefox a lot there it is it's on the right hand side just this little icon it looks like a tablet with a mobile phone in front of it. I click on that and it enables my responsive design mode in Firefox, same kind of concept. I don't remember who came out with this first I think if memory serves it was Firefox who came out with it first. But it is available now in most most browsers let me open up Safari quickly, and we can see how that works in Safari. Where Safari gone Safari open. Don't use Safari much so it might take a while to open. There we go there is Safari. Let me grab the URL and open up my Safari browser. And now I'm going to ask might have to ask for some help because I actually don't know how to enable developer tools in Safari I don't use it a lot. If anybody knows they're welcome to let me know. It's probably going to be under. You somewhere perhaps. Windows and developers tools. Say again. No, no. Move on right window. Okay. Window window. Okay. Window. There we go. And. Don't have that option. Maybe you're not activated the model. Okay. All right. It seems it seems it needs to be activated first. Okay. So somebody is saying file settings advanced and let's go file. Let me find my settings. I didn't even know that you had to enable you see I don't use Safari much so this is a cool thing to under advanced. Development you there we go is it that one. I know because we suffer very many, very, very many issues on the client side because. Okay. Let's check it. Is it the develop. And somebody just reading here. Settings for a settings advanced. No, no open develop. No develop. Oh, there I see, I see, I see, I see. And then wonder where we would say what images. I'm not seeing an option to show the. Anybody knows develop show web inspector. Okay, develop show web inspector show web inspector. Which is there and I can't click on it. Thank you to whoever that was. Who was that. Just so I know. Jean. I'm trying to do it along with you and it mine is not great out. Okay. So mine, there might be a problem with mine or something where there we go. Probably because I had advanced open. There we go. Okay. There we go. It's up and running. Awesome things. And then somewhere here there's a responsive mode. It's probably one of these. I would guess no. Should have maybe did done this before I prepared this. I thought it would be easy. Anybody knows where the mobile responsive mode is. I wonder if it's in the development. Let me just. This is fun. All learning yet together today. Let me hide this. Web JavaScript. I'm just going to. I did have it. I thought I had it linked somewhere. I'm just going to put up another browser. And I'm going to. Sorry. Sponsor design console. Mode. Like this. Click. Here we go. The web browser. Probably preferences advanced. Show develop menu. Develop into responsive design. Okay. It was that simple. So let's minimize this. And let's go here. Let's get developed. There it is. Into responsive design mode. There we go. It's a separate mode. Okay. There we go. So now we can, and this one's a little bit nicer than. Then Chrome or Firefox. You can actually see the little. Sort of things that you're testing with. But it's it's basically it's the same, the same effects. It's the same. It's the same. It's the same. I think it was someone. And it's only maybe you help you with that. I'm not sure, but thank you everybody. Maybe there's Anton. Who helped me with that. Thank you for showing me how that works. Let's get back to where I'm comfortable, which is Chrome. And so if we have a look at. These images, we will see that. When we switch. So this is at 1920 by 1080. So this is desktop mode. Let me make this a little bit bigger. And let me zoom this in a bit more. There we go. Let me go to a smaller screen size. Maybe not laptop. We're focusing mostly on this image in the middle here. We will see that the image kind of tends to start shrinking down. And, and all of that and sort of, you know, response the size of the screen, but it's still the original image. So on a mobile device, we're still, let me inspect this image. We're still rendering whatever this image size is. This one is 800 by 464. It doesn't make sense to render an 800 wide by 464 high image on a mobile device, which is in this case, 320. It would be ideal if there was some way to render an image that was the correct size, maybe even do some cropping, if you will. And so this is where the idea of responsive images came from. Now, before responsive design was a concept. So we're talking about, you know, prehistoric times. What folks used to do was they used to do something called adaptive design where they would do a thing called, and I'm going to find a link for you. They would do device detection. So depending on the server language that was being used. In our case, we're talking about WordPress, we're talking about PHP. I'll share this link with you in the chat if you want to read about this, this is purely for historical purposes. They would use in PHP, you can use something called the server HTTP user agent. And what that will do is that will give you information about the browser or the device that is accessing your computer. So what we're going to do if you want to see what this does, I do find these things interesting. As I'm going to open up my VS code, I'm going to go to my WordPress site. And I'm just going to create this, I'm going to create this info.php page, sorry, or file. But instead of outputting PHP info, I'm going to output the user agent string, just so we can see what's stored in there. So all I'm going to do is I'm going to grab this, and I'm going to print this to screen. So we go print R, no, not print for print R. There we go. And there's the user agent. And I'm going to comment out all of this other code. And then I'm going to access this info.php file. So if you want to test the site, you just create a file inside of your WordPress site. Okay, let me just give me one second. I just got a question about my screen size. So I'm going to just make it a little bigger. Did I do that on purpose? Not necessarily. There we go. So this is the code we're using just in any PHP file. You want to give it a try yourself. Mine's in an info.php file. I'm going to switch over to my site. My site is hosted at learn, press dot test, slash info.php. And there we will see there is the user agent string. Let me make that a bit bigger because that is quite small. Let's go up to 150 on that one. So there it says this is a Mozilla browser, Macintosh, Intel, Apple, WebKit, Chrome, Safari, all kinds of things that it includes. This is not Mozilla. This is Chrome. So I don't know why that's showing Mozilla, but anyway. But you would then be able to use this information to check what kind of device is accessing your, this kind of information here. It tells you it's an Intel Mac. And then what the code does, if we go back to the code, let me find it quickly. So what it does is it would then do some kind of functionality. It's stripping out things and checking things and looking from the word mobile. And if it finds the word mobile, then it uses a mobile device and then it will render an image for that device. So that's happening on the server side. You might have some functionality where your server side rendering is also taking the original image and then creating the mobile image version the first time around or doing it on the fly. So that's something that people did, but it was basically adapting sort of pre-adapting to whatever device was accessing the content and then showing the image accordingly. Then this concept of responsive design came about. And that's what this article is about over here. And if we scroll down a little bit, they talk about the fact that responsive image technologies were implemented recently to solve the problems indicated above by letting you offer the browser several different image files, either all showing the same thing but containing different numbers of pixels or different images suitable for different environments. So we can see that in action in our WordPress site if we upload an image to it. So what I'm going to do now is I'm going to switch back over to my dashboard and I'm going to go into my media library. I've already got some images there, but I'm going to add a new image and I'm just going to zoom out a little bit here and make it 125. And I'm going to add a new image and the image that I'm going to add, I'm going to get a specific one with a specific name. Here are my samples and I'm going to upload water one so that we can see what happens when we upload water one. Before we do that, I want to show you not that one. I want to actually go into the directory for my site. So it's in my sites folder. It is learn press, which I cannot. There it is. And then we'll go WB content uploads 2023. And we are in July. And we'll see that I've got some images this four way three one and water one, but there's nothing about the one we're about to upload. So we'll have to upload 23 or four. I think I might have said one earlier. Let's upload one of the other ones. So let me switch back to brave. Okay. So one's already there. So let's upload three. For example, when I upload water three, it uploads it to my WordPress library. And they are the images sitting in my WordPress library. But if I switch back to my file browser, which I've gone past now. So I have to come back. You will see that there are one, two, three, four versions of water three that have been uploaded. So what WordPress does automatically, and this is since about version 4.4, maybe even before that. It uploads the original image. And then based on some predefined presets inside of WordPress, it'll upload one based on a 768 width, one on the 300 width and one on a 150 width. And then scale accordingly. So if it's a square image or a rectangle image, you'll get different size images. And what WordPress then allows you to do with the responsive images API is send all of those images to the browser when the image is requested and use special image attributes to display those images depending on which mobile device or laptop device or whatever is being used. And the easiest way that we can see that in action is by adding this to a post in the post editor in the new block editor. So if I go to posts and I create a new one, and I'm just going to go test image, and I'm going to add this image to my post. So let us pick from the media library and let's add water three. I think that is, let me just make sure. Yes, that's water three. And I'm going to select that image. So that adds the one image in my area. I'm going to set it to full size for the purposes of this test, which it already has done by the looks of it. It's set there to full size, which is fine. And it's defaulted the default full size image dimensions. If we preview this, so preview in a new tab. And then scroll down and I can either right click and inspect or however you get to develop the tools. I'm just going to go right click and inspect. You will then see that what is being output is this code over here. So let us zoom in on that a little bit. I actually think it's going to be easier if we edit this code and copy it into a text file. So we can format it a little bit better and we can see exactly what it's doing. So let me pop that on over here. I'm going to just create a simple HTML file, which we will throw away. Why is that not working? Just call it image.html for now. And we'll just paste that in there. And then I'm going to see if we can format it. I'll bring it back into view now. There we go. All right. So this is one very, very long image tag. And you'll see that what it's doing is it's automatically doing some async decoding. It's setting the width and height. It sets the default source attribute to the path to the original source file. It sets an alt attribute, which I haven't said yet. It puts in the class. This is default WordPress stuff. But then it uses this SRC-SET attribute. And you'll see what it does is it gives you a new line. And then it's going to set the width to 800 width. And then after that, let me, sorry, I got things in my way here. Let me put this on a new line. After that, there is water 300 by 200 at 300 width. After that is water three, 768 by 511 at 768 width. And then it sets some default sizes. And so what that does is that sets up the browser so that when devices that are bigger than equal to or bigger than say 800 width, so desktops, laptops, that kind of thing, show the original image. When it's between 800 and 768 show this image or at least render this image. When it's between 768 and less than 300, then show this image. So basically it sends all of that data in the image tag. This is a thing that HTML images support by default. It's an update to HTML images. And if you set up the source set with the different sizes and set up the sizes, it will then render depending on which browser you're accessing it from. It'll render each set image differently. What's nice about this is there's no extra processing required on the server to do this because those images are generated before the page is requested. And it means that because these images are all on the server, they can be cached either in the browser or whatever caching you have available. It instantly makes your images responsive in your designs and it instantly makes your sites faster by doing this. Okay, any questions on how that, that's just responsive images. This has nothing to do with WordPress yet, but that's just the basics of how responsive images work. I don't understand the depths of how this works and the sizes and all of that. I recommend reading through that article that I shared with you earlier on the ins and outs of how that works. But if you do have any questions on that, I will do my best to answer them. So Adrian says, is this to help reduce page load speeds for small screens? Yes, absolutely. So what it means is if you're loading this on a small screen, it's only going to physically load the smallest size based on the screen in the browser. It's not going to load all the others. It'll just load the smaller one. So it's a speed of improvement, both on the back end and on the front end. And it means those images can be cached and then rendered accordingly. As Jose says, it's a preloader. It's exactly what it is. Okay, so that's just responsive images. That's got nothing to do with WordPress. And that's the topic we can dive into and we can make sure we understand and go forward from there. John, can you just tell me that the sizes attribute, what does that mean? I actually don't know. Unfortunately, John, so how responsive images themselves work? I don't know the ins and outs of. I do recommend this article that I shared with you right at the front. Sorry, Zoom keeps getting in my way. This responsive images one on MDN, I recommend reading through that. That will give you all the information you need. Thank you. We could do a whole workshop just on how responsive images work. But I need to move on to the actual API side, the WordPress API side, but I do recommend reading this if you have questions. And then if you have further questions on how it works, don't ask me because I don't know. I just trust the HTML to do its job. Okay, thank you. And I totally said you had a question. So I told you, you want to go ahead and ask? This answer before. Okay. Okay. Perfect. No, no, no, I mean, about I don't know, very interested how can management it because using this solution is good. But on practice, I'm meet with a problem when I can control this perhaps. Okay, so we are going to dive into that a little bit later. We're going to dive into how WordPress, how more or less how WordPress does that, but we're not going to dive deep into the management of it. It's basically just an introduction to it. And again, it's not something that I can give you answers to because I don't use this a lot. So maybe what we can do is once we finish today's workshop, if you still have questions, what I would suggest is let me find the GitHub issue for this workshop. This is very much an introduction to responsive images in WordPress. If we get to the end of today and I say to you, I don't, I don't know the answers to your questions. What I would suggest you do is this is the GitHub issue for this workshop. Any questions we don't cover today, I'll do my best to log them in that issue as well. But if you have any others, you can log them there as well. You can ask them there and then I will see if I can do further research and come back with another workshop, maybe a follow up. But today's very much an introduction to how this works and not so much of a deep dive. Okay. M says, if cached, what happens if you replace the image with another of the same link's name? Again, M, I don't have answers for that one. It's something that I haven't really dived into. So I'm unfortunately, I can't answer that for you. Adrian says, I assume you need to clear the cache to refresh and see the new image. That probably is what would happen. But it's not something that I can, that I can provide you answers to unfortunately today. All right. So I'm going to put that one in the question list. We can do a follow up to this. So I'm going to pop this one in here from M. If cached, what happens? You press the image. And then I totally had a question around management. Questions around the images. Okay. I'm going to pop those two in there. So we've got them for follow up. And we can come back to that. All right. So now let's talk about the responsive images API in WordPress. Now, everything that you just saw, where's that image? Yeah. Everything that you just saw happening here happens automatically in WordPress now. And what I want to show you is the documentation on responsive images. So I'm going to close some of these links down. I'm going to close that one down. I'm going to close that one down closing that one and that one. I'll leave that one open for now. But then I'm going to go to the developer documentation. And we're going to go into the common APIs. Sharon says, sizes defines a set of media conditions like screen widths indicates what image sizes would be best to choose. So that answers that question around what the sizes is useful. Okay. So if we go into common APIs, the very first one is the responsive images API. So this is basically a document on how responsive images came to be within WordPress. It was WordPress 4.4. Let me make this a little bit bigger. There we go. So since WordPress 4.4 responsive images is supported by including the source set, the sizes, attributes of the image markup it generates. And then it says for background on this feature, you can read the merge proposal. Now, this is another one where we could spend a lot of time diving into this and it would make for a much longer and much more involved workshop. We unfortunately just don't have the time, but this merge proposal talks about the background of responsive images, where it all comes around, where it all comes from, and talks about what it does. And essentially the core understanding we need to think about here is that when the images are uploaded, the four sizes are really automatically created. And then when you call, I'm just trying to find the right link here. Here we go. When you call the WP get attachment image function. So let's go to that documentation. And I will share it with you in the chat. It then in the background handles everything for you. So as long as your image is part of the media library and you call this function and you tell it which size you want. So one of those four sizes, thumbnail doesn't have them in this list here, but they are around thumbnail, medium, large and full or something like that. Then it will automatically generate the source set attributes, generate all the different values for you and output that image. And you don't have to do anything else. So generally by default using the core WordPress functionality as it is, is usually enough. In this responsive images API document. So here we go. It's the full size, the large, the medium and the thumbnail. Those are the four that automatically get created. There are however, also, if we scroll down a bit here, there are some new functions and hooks that got added to WordPress to make this happen. So there's a function called get attachment image source set which retrieves the value for that source set attribute based on the size that you want. There is calculating the image source set. There is getting the different sizes. So if you need to customize things for yourself, you can dive into these functions and you can see how they work. There is also a new default image size called medium, large, which was added, which is 768 pixels wide by default. And you would have seen that in the list we saw. So the full size is the original image. Here it says large 500, medium 300 and thumbnail 150. But if we have a look at what was added, it looks like it did the medium, large, and then a 300 by 200, which is probably the medium one. And then the thumbnail one, it probably didn't do the large one because the file was only about whatever file size the file was. Let me just check what the file was quickly. The file itself was only 800. So maybe it went, well, 800 is not that much bigger. So we'll stick with that as the large size. But if it was a much bigger image, then it would probably create all of those. You'll see this one over here. This is an image that I uploaded previously. There is the original. Then there is one, two, three, four, five sizes. So there it's created the five because the biggest image was very big and then it creates the other sizes from there. So if you want to manipulate those sizes, if we scroll down, you will see that there are two filters that you can use. The one is the calculate image source set filter. So that's the function that that's the filter hook. So I'll share that with you. And the other one is calculate image sizes. Let's get that one. And I'll can share that one with you. And so you can use those to change the sizes on the fly if you need to do when the images are uploaded, when the source sets are gathered, all that kind of thing. My specific experience is unfortunately that I've always only ever needed to use the default sizes that ship with WordPress. So I don't have physical experience with actually manipulating those sizes and changing those sizes. If that's something you would like to dive into in a future workshop, we certainly can do that. But for today, we're just focusing on working with the default information. Okay. Any questions on all of that before we get and dive into a little bit of how this works in the real world. Okay. So before we do that, I also just want to mention at the bottom of this documentation, there is a learn more about customizing responsive images markup in this GitHub repository. It is basically a fully responsive image plugin for WordPress. If you want to really dive into how this works, how it does things, this is the plugin to check out. Essentially, this is the plugin that this is the feature plugin that was being worked on before it was merged into WordPress. So this would be a great way to have a look at the code, see how the code works, and really dive into the functionality of hard work. So if you really want to dive into that, I do recommend checking that out. Otherwise, I want to show you how you can implement this in your own site. So let's assume that we're happy with the default sizes we have, and we just want to render them in both a classic theme and a block theme. So I'm going to close down some links again. And we'll get on to our theme. So you will notice, you might have noticed that I'm currently using a classic theme. So I have 2021 activated. That's a classic theme. I also have 2023 installed. So we'll switch over to that in a second. What I'm going to do now is I'm going to take one of these images and let's take water three as a good example. So there's water three and it's ID is ID 26. Now there are many ways that you can get the ID. I'm just going to use it from the URL for this, for this example. But I want to be able to render this image in my footer, but I want to render the responsive sizes. So I'm going to use this code in the developer documentation. So let's go back over to developer.britpress.org. Let's go back to utilize APIs, responsive images. And I'm going to scroll right down to this customizing responsive markup section. So let me share that with you there. And here is the code that we're going to use. Emma says, I like that waterfall. Very copy. I love water pitches. It's one of my favorite things to use as desktop backgrounds and example pitches for exactly that reason. And so this is the code that I'm going to use. I'm going to copy this out quickly. And so what I'm wanting to do is I'm wanting to create a custom function that will render my image for me. So inside of my theme that I'm busy developing, in this case, I'm just going to hack 2021. But let's say I was developing a custom classic theme. Inside of the functions.php, what I'm probably going to do is create a custom function to manage this for me. So right at the bottom of my functions.php, I'm going to say function and we'll call it 2021. Get responsive image. And I'm going to want to pass the image ID or the attachment ID to this function because I want to be able to call a specific, I want to be able to use this function all over the place. Then the code is going to look something like this. So the reason I change it to attachment ID is because that's what was it the example. And the size that I might want to use might be the large size so it might be the medium, whatever. I'm going to leave it as medium for now, but you might want to go with the large one first and work down from there. But I'm going to stick with using this code. I'm then going to want to echo out or return maybe the image tag. So I'm probably going to change this slightly. And I'm going to say something like this. And then put this all in quotes. I'm just going to ignore co-pilot for a second. There needs to be a little bit of cleanup that I need to do here. So I'm going to take out the PHP echo bits. And I'm going to start concatenating things together, which I use a full stop. And in this case, a single quote to concatenate these strings together. So there's the image source getting the source and escape in the URL. And then we need to get the source set. So that's that they're escaping the attributes. So I'm going to go ahead and do that. Those of you who remember my escaping your, your outputs workshop, always escape whatever we're outputting to the screen. And then the sizes, I'm going to leave them as they are from the example. I would have decided this upfront, maybe the front end designer that I'm working with, with would have given me that information. And then finally, I'm going to want to, why is my thing not wrapping right now? Weird wrap. Here we go. I'm going to be just. Oh, I've got this too big on screen. That's why there we go. So let's undo word rep. And I want to jump right to the end of this. There we go. And in my PHP line there. Okay. So I'm going to just zoom out a bit. So we can see this all on one line. There we go. Got a couple of issues that are being picked up. It's telling me undefined variable attachment idea. Maybe I spelled something wrong somewhere. There we go. I think I spelled this one incorrectly. So there we go. Attachment ID. So what it's basically doing is it's getting the source, the URL. To the original image size, but I'm asking it for the medium one for whatever reason. Probably I would go for the large or the full size, but for now for this example, the medium is fine. And then it's getting the source set values. So that's string with all those different sizes. And I literally just call get image source set. And then based on those sizes that are stored by defaults, I can then pull those different sizes in. And then I simply build up the image URL, specify the source value as the path to the original file, set up the source set as that value from this function. And then the sizes, which Sharon mentioned earlier. And once I've done that, now I can just call this function from any of my templates. So what I'm going to do for the purpose of this example is in the footer. Just above the site info. I'm going to just line 42 in the footer.php file. If you're working with 2021, I'm going to just pop in a div. And then I'm literally just going to use PHP tags. And I'm going to echo that function call. Now this is just an interesting little side note. One of the ways that template tags usually work in WordPress is folks don't echo here. They echo in the function. I prefer to do in the theme. It's just a personal thing, but there's nothing wrong with doing it both ways. And then we'll pass in, in this case, ID 22. In pointed out that we need to update our alt tag, 100% correct on that one. So let's give it a better alt tag. In this case, I'm going to just call it water number three, because that's the name of the file. Maybe which waterfall. We'll just call it a waterfall. So that's a better alt tag there. And that should be that. Okay. So there's my simple function. It gets the image by the ID generates the image source, the image source set, and then renders the image tag. And then I add it in my, in my footer by calling it and passing in the ID. I think it was 22. Let me just verify that or maybe just 26. Now that I think about it. That was 26. Sorry. 22 was the deer that I was working with when I was preparing this workshop. So it's 26. Okay. And then if we switch back over to our site. And we have a look. And we scroll right to the bottom. We will see that there is the image. And if we inspect this image, we will see that it is generating the default image source. And then all the source set values with all the different sizes and everything that we've set up. And if you're using the default sizes, it's really as easy as doing that. If you're wanting to use custom sizes, you'll have to hook into those filters that I mentioned earlier and create custom sizes. You can, I believe, overwrite the default WordPress sizes. That is also possible. I don't know offhand where that is, but I know that is also possible. But that's how easy it is to use. You just call those two functions with your sizes and you're off to the races. Okay. Any questions on how that works within classic themes? I'm going to leave it on that function if anybody wants to see that again while I grab my next superforter. All right. So there don't seem to be any questions on this. Now let's move on to how this works in block themes. And the cool thing about block themes is block themes will do all of this for you the minute you add an image in the site editor. So let me show you what I mean. If I switch my theme to 2023, excuse me. And I go into the editor and I go into my photo template part and move this out the way here. And this is, I'm running the 6.3 beta, by the way. So if yours looks slightly different, that's fine. But basically you want to edit your photo template part. And I like to use the list view to see my layout. And I'm just going to above the row. I'm going to add another group. So I'm going to insert before and I want to insert a group block. Here we go. And I'm just going to insert an image into this group block. And I will use one of the other waters. I'll use this one over here, which I think is water one, which I've already uploaded. Actually, no, let's use the deer, whatever this is. Yes, I saw the copy into the chat. I'll copy that in a second. So there's the image. And I decided I want to use the medium image. So that's the medium image size. And just for the sake of it, I'm going to align this in the center because I just want the image in the center. There's no specific reason I'm doing that. But there is the image added to the photo. Now, what I want to show you is what this looks like in the code editor. So in other words, if you were to save this to a template part file in your block theme, this is what the code would look like. So if we grab, it's this image, image tag there, I'm going to stick this inside of our image.html. So we can see what that does. So it's the WP image block code. The alignment was sent to the ID was 22 in this case. It's using the medium size and there's no link. It wraps that in a figure, which is generally a good idea. But then you'll notice it doesn't include any of the responsive image stuff. It just has the image source, the alt tag and the class. We should probably update the alt tag. So let's do that while we're there. Let me exit this and go back here and let's go. I don't think this is a DA, but I'm going to call it a DA because I don't know what else is. So I apologize to any animal lovers out there, whatever that is. I'm going to call it a DA for now. But the important part is this code. This is what the code is that is being stored in this template. Now I'm saving it to the database. But if I was rendering this to a template file, that's what it would look like in the template file. However. You're on a thing. You're muted. Sorry, folks. I got muted this. I'm not sure how that happened, but I should be, you should be able to hear me now. For some reason, my image wasn't showing. So I'm going to go back to my footer. Oh, I didn't save it. That's what's silly of me. So let's do that again. Thank you for whoever pointed out that I was muted. So I want to insert before. And I want to insert a group. And then I want to insert my image. There we go. Selecting from my media library will go with the deer. I think it is. I don't think it's an actual deer. I think it's something else, but I'm going to go with it. If anybody knows what that really is, let me know. We'll go with the medium size just to kind of replicate what we had earlier. And I'm just going to align it center just for the sake of doing that. And then let's save that. There we go. Okay. Now it's saved. And now if I switch back to my front end, I should now see my image right at the bottom in my footer. There it is. And if I right click on that, you will notice that it does everything automatically for me. So I didn't have to use any code. I didn't have to tell it what to do. It knows the block edits and knows that when I'm saving this image, it must go and do this by default to built in thing. And that's one of the things that I love about the responsive images API is if I'm using the block editor, I have to do no work. I add my image, tweak my sizes, let it do its thing and it'll handle everything for me. Okay. I'm going to just quickly copy that function out for those that wanted from the, from the classic side. But are there any other questions around, around how this all works? As I said, I don't have a lot of in depth information on using responsive images in classic themes. My experience always was that I used to get from the designer, the images, and I used to upload them to WordPress. And then the defaults were good enough for what we needed. And so we went with that. So I can't go too in depth about how to modify that. But if you want to know, we could maybe do a follow up workshop on that. But this is just an introduction to how it works and what it does. Jose says there is a challenge here under the scenario that you need to show different versions of different images in the artwork space using the same widget. How could it be solved? Although it might be easier to use the show hide settings. We don't want to use this to solve the problem. The same widget should be used. Justification of the requirement images with text do not behave well when thumbnails are generated with WordPress. The cropping tool sometimes removes some text. As I say, it's not, it's not something that I've had a lot of experience with. So if anybody has any suggestions or comments on that, they're welcome to let me know. We can definitely do a follow up if folks have more questions. As I say, if you've got questions that you'd like us to dive into, please do consider a copy, leaving them on that GitHub issue. I love doing follow up workshops to my initial workshops because that helps me understand what people need to learn, what people want to know. So this was just an introduction to responsive images. If you want to go deeper, we definitely, we could go deeper. Sharon says, how do the block themes framework compare to something like a bootstrap framework? That depends on whether you mean a generic bootstrap framework or specifically the bootstrap framework, which is the one that was developed by, I think, the folks at Twitter. Or if you mean something like, so there's multiple things called bootstrap. So there's Bootstrap, which was, I think, developed by the Twitter folks. Then you've got something like underscores, which is also considered a bootstrap framework. I'm not going to... Hang on, let's go WordPress underscores. It's a starter theme for WordPress, if you will. The original bootstrap. So Bootstrap is your sort of front-end framework. You could consider, I wouldn't consider Bootstrap and a WordPress block theme to be comparing apples to apples. So it's difficult to say how one would compare to the other. You can certainly use Bootstrap in your front-end. If you're building a theme, you can certainly use Bootstrap. I've never done that, though, I'll be honest. I've always, when I'm building WordPress themes, I've always used sort of the WordPress paradigm, whatever that was at the time. So when it was building classic themes, I would build classic themes. When it was building block themes, I would build block themes. There is actually, if anybody's interested, I run a Twitch stream every Tuesday at about 3 p.m. my time. It's about 1 p.m. UTC. I won't for the next two weeks because I'm away, but going forward, we're taking a design that a very cool designer from Chicago designed for me. And we're building a block theme from it. And Emily is the designer's name. She's thrown all kinds of curveballs at me. How would you do this and how would you do that? And we're really trying to design it from scratch. If you want to see some of the work we've done there so far, you can, I'm going to paste these in the chat in a second. You can go to my YouTube channel where all the live streams have been uploaded. I will share those links in a second. And then just go back. You'll just have to go backwards in time. We started, that was building a react block. That was custom post types. So the first one is, I think it's this one here, sending development on the 9th of May. I think that's where we started and then go through from there. It's kind of weird because I'm developing a theme for an hour a week once a week. So it's very difficult to kind of get into that mind space every week. I'm also developing it with Emily and another developer by the name of Aruba. Aruba has way more experience in the block theme paradigm than I do. So she's helping us as we go. But check some of those out for some of the, some of the paths there of how things work. It's still very early days. We've basically built the base theme, which is just a copy of another theme. And then we started working on the footer. And that's as far as we've gotten. So let me share those links out quickly. For folks who want to check that out. And then I will swing back and run through the chat so far. Okay. Let me see. Yeah. I will say some links. Okay. Can you, do you know of any good resources to get understanding if and how to start making client themes as block themes? Okay. So I kind of do. There are two courses I can suggest you try. They're all on learn.wordpress.org. Basically when I joined automatic last year, that these courses were being built. And there's actually, there's actually three courses that you can, that you can check out. The first one is, let me just find it here. Not those two. The first one is develop your first low code block. So this is very much aimed at beginners who've never developed a theme in their lives. And this will introduce you to how sort of the initial block theme paradigm works. And then there are the developers guide to block themes part one and part two. This is aimed more at somebody who is knowledgeable with classic themes has built themes using the classic theme paradigm and now wants to learn sort of the differences between the two. It doesn't cover a lot of the sort of customization options. Sorry. I'm having a trouble copy pasting my links here. Copy link address. There we go. There's parts one and part two. It doesn't cover the advanced custom functionality. That's something that I'm busy working on. I'm busy working on part three of this course, which is all the lessons that I'm learning from the sending development, but it should give you a basic understanding. If you already understand our classic themes work, how block themes work to give you a good place to start. So that's what I do recommend for those. The other thing Sharon, you said you're trying to create develop something more streamlined. You're trying to create a good place and would like to create a nice base theme. The other thing that you can check out and I mentioned this in those two block theme courses is there's a plugin called create block theme. And what this essentially does, it allows you to take any other existing block theme like 2023 or any other block theme and create a brand new theme from that and then build that in the site editor. And if you go through the two courses or the three courses that I mentioned earlier, I'm going to talk about using create block theme and how to export those files and how to go through that process. Okay. I like that there's a baby version for us. We're doing our best. We're doing our best. One of the things we as the training team are doing is we're trying to get that sort of base level of baby developer knowledge out there on learn WordPress. If you don't know learn WordPress.org has only been around since 2020. It launched June, July, 2020 in the middle of the pandemic. So it's only two and a half years old. So it's as much of a baby as us baby developers are, but we are very much focused on this. There's two things we're doing. Number one, we're focusing on the sort of base level knowledge and also we're focusing on a big project that we're focusing on for the rest of the years, what we call learning pathways. So depending on your specific requirements, if you're a beginner developer, a new developer, a brand new user, there will be specific pathways that you will hopefully be able to go through. And eventually the goal is to build up all the content for all of those pathways as well. So we are getting there. Okay. I think that covers all the questions. I hope that if nothing else, I have given you a good introduction to the responsive images API. As I say, if you want, if you would like to dive into this more, please do comment on that GitHub issue. And I will prepare a future workshop and we can dive really into, you know, and ask your questions because then I can go and find the answers and bring them back to the workshops. It's one of the things that I love doing is finding out what people want to know and then presenting those topics. So I mean, a couple of weeks ago, we did a workshop on custom tables because somebody asked about doing a workshop on custom tables. So I'm very keen to do those things. Otherwise, are there any other questions before we wrap up for today? Raleen says, if all of this is built into WordPress, why do we need the API? That's actually a very good question. So the way I look at it is it's good to know that it exists and kind of how it works. If all you do is walk away from today and go, okay, cool. That's how it works. And you never worry about it again. That's also okay. But I like to dive into some of these things so we can understand how they work. But yes, if you're using block themes, you probably never have to worry about it. One day you might say, one day you might go, gee, I wonder how I can manipulate these images. And then you'll know, I need to look at the responsive images API. So at least you have that knowledge. Great. And there are no bad questions. Yes, I can hear somebody saying something. Yeah, Jonathan. So if we are going to use some other than block themes, so the source set will not be available by default, right? Jonathan. That is my understanding is it's not by default. You have to code it yourself as we did in the earlier example. Yes. So you'll need to make sure you're setting those things up for any time you're rendering images. My understanding is... So when I say that, if you use the... Let me just clarify that. If you use... Just find this function. Sorry, I've got so many links open. Here we go. If you use the... As far as my understanding is, if you use the WP Get Attachment Image URL, that will start generating things for you. But my understanding of it is that you need to get the source set and render it with the image like that to get all those things to happen. Because if you look at Get... Sorry, so it's WP Get Attachment Image. There's two. There's Get Attachment Image and Get Attachment Image URL. Let me do this here. And let's actually look at what the two different things do. So Attachment Image gets the HTML image element representing an image. So you can just do that as my understanding. This was just to show you how you can work with it. Now you can change things. But it is also possible to do this and just do something like this. Let's just show you what this does. If you get Attachment Image, I'm passing the Attachment ID. And then if we render this on the front end with my browser go... Now I'm going to have to find that tab. There we go. Let's close this. Let's actually change the image ID so we can see it in action. Let's take Image 24. That's a good example. No, not that one. 24. There we go. Let's render that. That didn't work. Just check my code here. So let's get Responsive Image, Attachment ID. It might have been cached. So let me... Oh, this is because... Hang on. This is the wrong theme. That's why. Let me go back to that. Hang on a sec, folks. So let me switch back to my classic theme. Activate that. There's my classic theme. Let's render that. There we go. All the way down there's 24. And let's inspect that. And there you'll see... You see what it does is it does lazy loading, but it doesn't do the image source sets and all of those things. So if you want to include those things, then you need to code it the way we did it. Okay. Thank you. Thank you, Jonathan. No problem. Great. Well, thank you so much for joining, folks. I hope that this was interesting. I hope that you at least understand a little bit about how this works and how you can use it. Yes, I appreciate all the contributions. It's always great to learn things from each other. I know that in my sessions, I tend to do a lot of talking, but I do welcome you all talking as well. So if you have questions, you're welcome to ask them vocally and you're welcome to, to bother me with those kinds of things. I don't honestly don't mind at all. What was that? You had a tab with something called low code development. Low code. Oh, that was, that was, that was develop your first low code. Yes. Sorry. Can I get that link? All good. All good. So I'll even make it easier for you. So who's that I'm speaking to? Oh, this is Sharon. Hi, Sharon. I even make it easier for you. Just go to learn.wordpress.org. Just remember that learn.wordpress.org. Oh yeah. And just go down to, to courses. You can scroll down to view all courses. And we don't, we don't have a lot of courses at the moment, but if you scroll down, there are the two developer ones. Okay. And just below that is the low code. So it's all. No problem. No problem at all. All right. Great. Folks, I am not going to be around next week. I am very fortunate that I'm flying to the us of a to meet up with my team at automatic for our yearly team meetup. So there will be no workshop from me next week. There will be a workshop from me the week after, which is either going to be about the database API, or it's going to be about the file system API. I haven't decided yet because we kind of covered the database API in the custom tables workshop. So I haven't figured out if there's enough content still there for us to go into a whole workshop, but I'll decide that when I get back. So I want to thank everybody who's joined today and everybody who joins regularly on a Thursday for, for joining me for all of these sessions. And I will not see you next week. I will see you again in two weeks time. Sorry, where are you going to be in the US? No need to apologize. I'm going to this, I'm going to this horrible place that I've never heard of before. It's called Hawaii. I don't know if it's any good. Fantastic. Thank you. So the irony is our team, the way our team is distributed. And if you're wondering why I'm looking at the corner of my screen is because that's where I have all the zoom images. I'm going to look at the cameras. My team is distributed in such a way that two of us are in Japan. One of us is in Florida. One is in Hawaii. I'm in Cape Town and one is in New Zealand. So I got, did I get signed out there? Are we still going? I just got a message that I've been signed up, but I think we're still going. So, so because we're all spread out, we've all tried to find a central location and Hawaii just happened to be it. So that's where we'll be. But yes. Awesome. Folks, thank you very much. I need to rush have an amazing rest of your day and rest of your weekend. And I'll see you in two weeks time. Bye. Thank you, Jonathan. Thank you. Bye bye. Bye.