On this Craft Cms lesson you'll learn to setup local assets, volume groups and Amazon S3 Buckets.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
Hey, welcome back guys. On this lesson, I want to teach you how we can set up our local assets in craft, and also how we can set up cloud assets using Amazon S3. So the first thing we want to go do is click settings. Then go over to our assets. Once you're inside assets, we will want to create a new volume, think of it as a bucket or a folder, right?
So the name of this volume is going to be local images, and we're going to toggle the assets in this volume, have public URLs. Then we're going to create a folder called images inside our craft webroot folder.
So if we go back over to our base URL, just by clicking on the field, we get some environment variables that exist already and some aliases, but in this case, because it's local, we just need to add, we're going to just try it out with a slash images, which is going to be the name of that folder within the web root.
The volume type is local folder and on the file system path, we're just going to copy. The whole entire path, including web, which is the root plus images, which is where we're going to contain the images, go ahead and click save. And just like that we've created our local volume.
And so the next step is for us to start trying it out. So let's jump to assets on the left panel and your notice how that activated and click on local images, which is the new volume. And we're going to upload a file or a photo that I just found on splash and right away, you will see that image getting uploaded.
And if I go ahead and click on that image, you get additional settings. Like you can preview the image. You can also view where that source is, so you see the URL is the same with a slash images. That's where our volume lives. And if we go ahead and open our finder, you're going to see that image is now on that folder.
Pretty cool right?
Okay. A couple other settings you get is the time it gets created by the user information dimensions and all that cool stuff. You can even actually edit the image from here. So if the image is too big, you can click edit, you can rotate it, you can flip it horizontal or vertical. And you can't even crop it.
There's actually presets already for you if you need to do a quick crop, and I think that's really cool that we have that included in our craft.
So now that we know that it is working, what I want to do is swap out those, URLs. With an environment variable. So we just gonna copy that file system path.
We're going to open up our .env file using sublime text or your visual studio code. And what I'm going to do is go all the way to the bottom. And I'm going to add a new variable, this variable, we can call it however we want. I'm just going to call it local images, paste that in. Save the file. And then we can go back, refresh the page.
And once we do that, we can actually just call that variable, instead. We do this so that it doesn't replace the actual production server. It's only using the .env variable. We click save and that's it. That's local images.
The next thing we want to do is create an account in Amazon S3. I'm just quickly spinning this through.
We want to click the basic plan, so the free account. And once I log in, I'm going to see a dashboard like this. You're going to have an option to see all the services that it provides. But what we're really looking for is Amazon S3. So if you scroll down, you're going to see storage as one of the key services.
And also if you click on the top menu of services, you can find it there under storage. So S3 click on that little star and it will bookmark it so we can access it faster, anytime we get back in.
Once you're in. We need to create a bucket. So think about that as a volume as well. Right? So the first thing we do is click on that, create bucket or get started button.
And we're going to name it unique because it cannot match, it has to be a unique name.
That's going to be the name of our bucket. And we can skip ahead on the second step, because these are kind of a more advanced settings. On the third step though, make sure you actually click on block old public accessing toggle that off, what you're going to get is a little kind of dialogue or alert. I want to acknowledge that the current settings will result on all files being accessible and that's okay because we want them to be available when we load them on our site.
So there we go. We have created our bucket. Now, what we want to do is go into our plugin store in craft and look for the plugin under assets. And the very first one it's called Amazon S3. If you go over to your settings and click plugins. You will see the Amazon S3, has been installed successfully.
Let's go ahead and check out the tower. You're going to notice a couple of changes happening. The folder web images contains a new image, so it detected that change. It also noticed composer.lock has a new update on the actual, version of the Amazon S3 app that we just installed and composer.jason as well has a couple of updates there.
So all those little tiny updates get reflected on tower. And it's really cool because you can see the changes of red being the old one and green being the new one. All right. So let's go back to our volume settings. In our assets section and let's create a new volume. This volume is going to be called cloud images.
The handle is cloud images and a volume type is Amazon S3. Now, we're going to need the access key and secret key. We need to head over to the S3 management console. We click on our profile, click security credentials. And then from there, we want to click on access keys. We create a new key. And under the little toggle, show access key.
We want to copy that over, but instead of just copying it over, we're going to go directly to our .env variable file. And we're going to create new variables. Let's call this one S3_key. And then that will equal, we paste that in. We then go ahead and create another one called, actually let me change this to access.
Yep. And then I'm going to make another one for the secret key. So we do the same thing, create a variable. Going to just resize this a little bit. There we go. And S3_secrets, and then we paste that in. We save that file, .env file. And then we want to go back. And of course, it's not going to appear right away because we need to refresh this page.
So if we go ahead and refresh the page, we're going to just rewrite the name again, cloud images. And there we go. We will see those variables accessible to click on the bucket and refresh it because it needs to actually fetch for that information. Once it's done that it will appear under that dropdown.
The next thing is we want to make sure that, we fill in some of the fields in here, like subfolders, if you want to add all your images withtin a subfolder immediately, we want to toggle on all these actual settings, like having a base URL and making the uploads public. That is a really important one because everything, every time you upload something, it will become available for us to pull and view.
The cache duration, this is for casheing. We can look at this settings a little bit more in detail later down the road, but you don't really have to worry about the cloud front integration just yet. So we can leave that empty for now. So let's go ahead and click on the actual base, sorry the public URLs toggle.
Right away if I click on that, you'll see that the base gets added automatically, but if you accidentally click on it, it will get erased. So in order for us to get that back, we can just go back to the bucket, upload an image, and once we upload the image into the bucket, we can get and pull the URL that is the actual public URL that lives in Amazon S3.
So click on the image and you'll see that right below it has the URL that we need. So we just need to copy all the way up to before the name, copy that over, bring it back to the base URL. Again, this can become a variable on its own. So we might want to put that in that .env file.
Going to create here, an S3 base. We're going to just paste that in, save that. And now we're just going to put that variable in our base URL. Pretty easy. Let's go ahead and click save. Now you can see, we have both the cloud images and local images in our volumes. If you go into cloud images, you'll see that it's empty, even though we uploaded an image already, but that's okay.
Let's just give it a try and see if it works. I'm going to go ahead and download this image and I'm just going to go in directly upload it from Craft, just to make sure that it works and boom, there we go. It should be great. It's working.
All right. So now that that's done, we need to go to our utilities and under asset indexes, what we're going to do is just refresh that folder. So it's going to fetch any new images found on the Amazon S3. So we're going to go ahead and click update assets, and you're going to notice that it has found one additional image in the bucket. So once that's done, we go back to our assets and you're going to see that both images are now in the cloud images.
That's pretty cool guys. All right. So let's jump into the next lesson and take a look at transactional emails.
Access our premium community including bonus tutorials, project files & weekly resources.LIFETIME 💎 ACCESS