0:00:00
So there’s two different ways you can add images in oxygen. One is an old school way and one is the new way. And one way is responsive and one way is not responsive. And we got to think of responsive in terms of not like scaling its width down to different device sizes, but actually loading images that are specifically designed for each device size, or at least relatively close to each break point, or just the needs of the image width in general. So there’s something called source set that allows us to regenerate or take an image that’s let’s say 1920 pixels wide and generate a bunch of copies of that image at different sizes. And then we can choose the exact size we need as well as any sizes below that so that the browser at different device sizes can actually choose the image size that’s perfect for that device size.
0:01:02
That’s how it works. It’s great. It’s like magic. But if you add images improperly in oxygen, you’re not going to be able to use this feature. And it’s not a feature that’s like obvious. It’s a feature that’s a little bit hidden. So I’m going to show you how to use source set images in oxygen. I’m also going to show you how to resolve the one problem that you’re going to run into when you start trying to use source set, responsive images in oxygen. And that is the lack of custom image sizes. WordPress defines three image sizes by default. And then that’s it. And that’s not enough for source set.
0:01:36
So I’m going to show you how to define a bunch more custom image sizes. I’m going to give you the code so you can just pop it in. I’m going to show you how to install that code in the first place because oxygen doesn’t have a functions.php file. Anyway, I’m rambling. We’re talking about a lot of stuff when I could just be teaching you inside the tutorial itself. So let’s just hop over there. I’m going to show you how to do it all. All right, this should be a pretty quick tutorial. We’re going to start out by adding a section. We’re going to give it a background color just so you can see the section on the screen. And then we’re going to add an image.
0:02:09
So I’m going to go ahead and add an image module. And there’s two aspects to this image module that a lot of people miss. The first one is obvious. So right when you load it in the primary tab, it asks you for an image URL. It allows you to browse. You can use dynamic data. And then that’s what typically what people do. So they browse. They select their image. They add it to the page. They might give it a width, 100%. And when we talk about responsive images, there’s really two ways to think about responsive images.
0:02:39
The first one is does the image actually scale properly down to smaller devices? So in terms of width, does it continue to fit on the screen? So a width of 100% will naturally scale down. So on mobile, you’ll see that we don’t have any overflow issues or anything like that. We don’t have any aspect ratio issues. You typically do not set a height in this regard. If we changed it to rim, now in a lot of websites, this would break the design. So I set it to 60 rim. And so that’s about 600 pixels. Therefore, when we get down to a screen less than 600 pixels, the photo would shoot off the right side of the screen. But oxygen saves you because it has a default max width on all images of 100%, which takes over after that initial 60 rim break point.
0:03:31
So that saves you. So you’re not going to really screw anything up. Like it’s a bad practice to just set 60 rim width on an image. Ideally, what you would do in this situation, if you want the image to be 60 rim, is you would set a width of 100%. And then you would set a max width of 60 rim. And then it scales. Now you’re not going to see any difference, because like I said, oxygen kind of saves you in that regard. But that’s thinking of responsive images. Just in terms of does the image get smaller without losing its aspect ratio as the screen size changes through various break points? But if we save, and we go to the front end and actually look at this, you’re going to see that we don’t have the second type of responsive image.
0:04:15
So you’re going to see this image ID. And then there’s the source, and that’s it. Now what we’re going to do is we’re going to talk about adding source set. And what source set is, and it’s saying, all right, well, we’re going to determine the size that the image actually needs to be. And what we would like, that’s the browser talking, by the way, we’ll call the browser bill. So bill says, hey, I’m going to determine what size, this image actually needs to be. What I would like you to do, Mr. Developer, is I would like you to give me eight or nine versions of that image at different sizes, so that I have multiple image sizes to choose from.
0:04:55
That way, when the window gets smaller, I can choose a smaller size that more closely matches. That way, I’m only really loading on those devices. I’m only really loading that image size and below that I actually need, right? So that’s what we have to do. Now, thankfully, in oxygen, and that’s what source set is. So in oxygen, we have this Media Library tab, which it doesn’t say source set. It doesn’t say responsive images. It doesn’t say it’s just this Media Library, which is why I think a lot of people miss it, honestly. So, but if we click on Media Library, you’re going to see that it completely clears out the image.
0:05:32
And we have this browse tab. So we’re going to go ahead and browse, and we’re going to choose the same coffee cup. And now you see that we have one extra layer of control. We actually are able to choose an image size. And what we want to do is we want to choose the size that closely matches the size the image needs to be. So let’s say that this was in a div that’s a card, right? Let’s do like three columns. So you can see how this would work in real life. So we have our three column grid. We’re going to have a gap of medium. This is oxygen ninja grid utility classes. By the way, I’m going to put a link down to oxygen ninja, because this just makes your grid life phenomenally easy.
0:06:14
And then I’m going to say we want this to be two columns on large devices and one column on medium devices. So now I have a completely responsive grid. And if I drag that image into our grid, you’re going to see that it conforms, right? So what I’m going to do is actually go to size and spacing. I’m going to take off this max width. So it’s just 100%. And you notice it doesn’t change, because it’s being confined by the grid. And I can actually duplicate that two times. So let’s say that we have these image cards or whatever. I didn’t make a full card, but you get the point. I know that because it’s a three column grid, and this is like full width, the image is never going to need to be bigger than that.
0:06:53
So I don’t need to load the full image size. I need to load like the medium image size, all right? Or a smaller image size. Now the problem here is there’s only three image sizes by default in WordPress. So let’s hit save on this. And let’s go take a look at why that is. In WordPress, when you go to settings and you go to media, you’re going to see the three image sizes defined here. One is 150, 300, and then 1920. I think I changed this one, but I think this one’s the default for medium, and this is the default for thumbnail. The problem is when we’re trying to do source set, this is not nearly enough options.
0:07:34
You can already see that with the medium set at 300, when we go back and reload this page, it’s blurry. You can see that it’s pixelated, because 300 is like here somewhere, it’s stretching it out. It’s not changing the aspect ratio, obviously, but it’s taking an image that’s too small for that space, and it’s filling the space with it, and that’s why we look fuzzy, all right? So we needed a different image size, something more around 600 probably, or 640, or something like that. In fact, we can inspect the element and see exactly what we would need. So if I hover over that, we needed 397, actually, yeah, it was way off. But still larger than 300, right?
0:08:15
It’s set at 300 for medium, but we’re trying to take up a space that’s about 400, therefore we get a fuzzy image. So what we need to do is we need to load custom image sizes so that we have way more image sizes to choose from inside of oxygen. So we’re going to go ahead and do that now. The way we do that is by going to plug in add new, because we have to register these with functions at.php. Now, oxygen does not have a functions.php file, but we can use a plugin called code snippets. This is a completely free plugin. It’s right here. It looks like this.
0:08:50
Got this little icon here. And you’re just going to hit install now. And this is going to give us the area that we need to add code. And I’m just going to give you the code. I have it saved. I have it preloaded on all of my sites, and my default site blueprint. But here we go. So when you get code snippets installed, you’re going to see it over here on the left hand side. You’re going to hit add new. And then we’re going to call this custom image sizes. We can call it register custom image sizes. So the code looks like this. Wow.
0:09:23
Don’t paste it there. Paste it in the code box. Works better that way. So in the code box, we paste. And it’s basically saying add theme support for post thumbnails. And then add an image size called image480. And I name them like this because I want to know exactly what they are when I’m choosing them in the back end. So image480. And then I’m defining the width. And the height is basically like infinite. Because in responsive images, you’re almost always concerned with the width of the image, not the height of the image. So I’m registering 480, 640, 729, 60, 1168, 1440, and 1920.
0:10:01
I almost never used an image larger than 1920. That’s really all we have to do here. I’m going to hit save changes and activate. But there is one more step in order to use these image sizes. Like now, when I upload an image to oxygen, that’s let’s say 1920 or greater, it’s going to automatically create, recreate, duplicate that image at every one of these sizes, and kind of set them off to the side for later use. All right. So let’s check to see if that is correct. So what I’m going to do is I’m going to duplicate. Actually, I’ll just come down here. I’m going to add owl spacing to this.
0:10:40
If you haven’t seen my owl spacing tutorial, I’ll put a link to that. I should pop up on your screen here. Just evenly spaces everything in a container. So now when I add another div, you can see they’re spaced out nice and even. Automatically, like magic. It’s a really cool utility class. So I’m going to do another columns 3. And I’m going to do another gap M. And I’m going to do another L2. And I’m going to do another M1. So in eight seconds, six seconds, I have a completely responsive grid. Now what I’m going to do is add an image.
0:11:16
And for this one, what we’re going to do is actually go to unsplash. We need a new image. And I’m going to choose, let’s see here. Let’s just go down and see what their latest and greatest is. Let’s choose this one. All right. So download this for free. I am going to scoosh it real quick, because these images from unsplash are gigantic. So basically, what I’m doing is running it through a Google image optimizer called scoosh. That’s free. Unfortunately, you can’t do bulk stuff with this.
0:11:47
You have to do one image at a time. I have a different app when I need to do bulk image stuff. If you guys want to see a tutorial on that, let me know. All right. And I’m going to browse. And I’m going to upload this. All right. So what it’s doing is it’s uploading that file. And it’s making all of those image sizes. You see it actually does it very, very, very quick. You don’t see all of the image sizes, but they’re in the database. So now I’m going to hit select image. And I’m going to choose, oh, look at that. I have 480, 640, 720.
0:12:17
Remember we said that that was about, actually, what did we say? I already forgot. Short-term memory issues. OK. 397. So 480 is the closest size I have to that. So I’m going to go ahead and choose 480. And boom, there it is. And it’s not blurry. All right. So I’m going to go duplicate. And when we look at it on the front end, you’re going to see that there’s a lot more stuff going on here. So when I right click and inspect the element, it actually might be harder to see in here.
0:12:49
Let’s go ahead and view the source. Let me grab this image ID so that we can find it easily. And I’m just going to hit view page source. And then I’ll search for that image ID. So there’s our image. And you’re going to notice that the source is defined once. But then if we keep going, we’re going to see a source set definition. And here you’re going to see that it’s loading the 480 version. That’s the one I chose. But it’s also loading the image size below that, which is 300. And then you can see it’s defining the sizes as well. So you can see the code looks a lot different when we insert images this way.
0:13:27
And again, I’ll just reiterate that’s using the Media Library option under the image module, choosing the image, and then choosing a size. So I had 640, 480. I didn’t have anything below 480. But the medium default is 300. And that’s why it’s loading the 300 as well. So if that image size gets down to 300, it’s going to load a 300 image size. Now, the reason I don’t load anything below 480 is because on typical modern phones, even if the screen size is 320 wide, the pixel density is 480s plenty. Plenty small. So it should be fine.
0:14:09
It’s basically what I’m saying. So I load from 480 to 1440. And so you can see the clear difference here. Now, one thing that people run into, an issue, that they run into, is they go back and they say, all right, well, I want to make this one responsive. Well, this one was already in your Media Library, or it’s not in your Media Library, it’s in my Media Library. It was already in my Media Library before I defined those new image sizes. And if you already have a website that you’re applying this tactic to, the same thing is going to happen to you. All of the images that are in your Media Gallery before you load in that code that I just gave you are not going to have all of those versions created.
0:14:56
So we have to take an extra step. So we’re going to hit Save on this. We’re going to go back to our dashboard and we’re going to add another plugin. This one is pretty much temporary. It’s called Regenerate Thumbnails. And there is a reason. So there’s the classic Regenerate Thumbnails by Alex Mills. Then there’s Regenerate Thumbnails advanced by Short Pixel. I can’t remember why. There’s something missing from this one that this one does better. I got to look it up. I don’t remember.
0:15:28
But use the Regenerate Thumbnails advanced and hit Activate. It’s a free plugin. So it doesn’t matter either way. But what this is going to do is it’s going to scan your Media Library for all the images that you already have. And it’s going to regenerate all of those different size variations for you. And it does it fairly quick. But what I’m going to do is go to Settings and or it might be under Tools. Where does it put it? Yeah, Tools Regenerate Thumbnails. All right, Regeneration Period.
0:15:56
I want all of them. And then under Advanced Options, we’re not going to do any of that. All right. And then over here on the Image sizes, you’re going to see that we can choose what we want to regenerate for. I want to regenerate for all of my new custom Image sizes. All right. And then the default JPEG quality, I want to keep it at 100. Like I don’t want to scale it down any further. I’ve already scaled it down. So I’m going to hit Save Settings. Now we are going to go to Regenerate. And you’re going to see right here kind of live.
0:16:29
Let’s see how long it takes. So we’re already 25% done. We’ve done 3 out of 12. Now we’ve done 6 out of 12. And 9 out of 12. So if you had a big extensive Media Library, I mean, this would take a little while, right? But once it’s done, now let’s go back. And let’s refresh our builder here. Now unfortunately, we’re going to have to wait for Oxygen to load, which is another little waiting period in itself. It’s not something I tend to complain about. There’s times where I wish it was a little faster. But I know it will get faster. I believe in the Oxygen team, believe in what they’re doing, and they will make speed improvements.
0:17:12
They might even be releasing a brand new version. I see that wasn’t really that much for waiting time, right? OK, so we’re going to select our image here. And you’re going to see right off the rip, we have a lot more image sizes to choose from. Now, why did it regenerate anything above 960? Well, I think it’s because this image was 960 or near 960 when it was originally uploaded. So there wasn’t a version that was bigger, and it can’t magically make bigger versions, without blurring it like it was here. So now I can just say, all right, we’ll do 480, and you will see that I don’t know if you guys can see that on the screen recording, but it snapped into focus, basically. It got sharper when I chose the correct size.
0:17:58
If you watch carefully, when I choose 480, watch it. It’s a little blurry right now. This middle one, and there it goes. It got clearer, right? Because that more aligns with the size that it’s supposed to be. Now, we wouldn’t want to load like 720. It actually did get a little clearer there, but, or 640, maybe even 640 is a good way to go here. I tend to, yeah, I want to make sure that it’s not blurry. All right, cool. So I’m not going to do them all. That’s a waste of time. But you get the point, right? Now it’s going to load 640, 480, and then 300.
0:18:36
It’s not going to load the thumbnail, because that thumbnail is cropped by default if we went to, where is it, settings, and then media. That thumbnail is set to actually crop the photos set right there. So it’s not going to load that one, because it would load the cropped version, and it’s smart enough to know not to do that. So that’s cool. But we’re done. We’ve registered custom image sizes. I’ve shown you how to insert and properly using the Media Library tab and choosing an image size. I’ve shown you how to regenerate thumbnails for media that you uploaded before you loaded those custom image sizes. And that’s pretty much it.
0:19:11
If you have any questions, definitely leave a comment. Below, hit like, hit subscribe, hit the notification bell. Got a lot more stuff on the way with oxygen, with agency stuff, web design, running web design agency, SEO content, management content, digital marketing content. It’s all coming. So make sure you are subscribed. Peace.
