7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 11Length: 46 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Setting Up an Asset Source

Craft CMS gives you the means to control exactly how users will interact with assets in a site. So the next thing we’ll do is go through setting up an “Asset Source” to enable users to upload their images to use in their content.

2.5 Setting Up an Asset Source

Hey, welcome back to Up and Running with Craft CMS. In this lesson, we're gonna learn how to set up an asset source. Now with Craft you don't have just one set static location that users are allowed to upload images and other assets to. With Craft you could set up as many different asset sources and you can have users interact with them in as many different ways as you want. So if you have one type of entry that needs to have one type of asset associated with it, then you can set up a folder just for that entry type. Now we're not gonna get into too much complication in this, we're just gonna show you through the basics of how to actually set up an asset source. So in this example we're just going to set up a basic images folder that we can use to set up a featured image for our about us page. Now as far as where to set up folders to house your assets, if you want your assets to be visible publicly, like images that are meant to appear in public entries, then you want to set up the asset folder inside your public HTML folder. So you can kind of imagine that you're setting up your folder for your images in just the same way that you would if you're working with a static HTML site. So insider out htdocs folder here, we're gonna create a new folder, and we're gonna name it images, and of course if you're working online, then you'll do the same thing inside your public HTML folder. Now we're gonna head back to our Craft CMS backend. We wanna let the system know that we wanna allow users to upload assets into the folder that we just created. So we head into Settings, and then we'll choose Assets. From here we're gonna choose New asset source. And now we can fill in all of these fields to create our new asset source. Now in this case we're just creating in generic images folder. So we're just gonna call it Images. Next we need to fill in the file system path. And because all we've done is create an images folder inside our htdocs or public HTML folder, all we need to do is fill in this with images and then a trailing / and notice here there's no leading /. You don't need to include a leading / here, but you do need to include that trailing /. And now we also want to make sure that these images are publicly accessible, because we're going to have this as a part of our frontend content. So make sure that this switch here is green, that it's switched on, and then we're gonna have to fill in this field here. Now one way that you can do this is by filling in a complete URL to your images folder like this. But when you look at this URL you can see that you might run into a couple of problems. For one, I just have HTTP in here, but what if we need to have HTTPS protocol? And also, sure I'm working offline now, and for now the correct URL is localhost 888, but what about when I want to put the site online? At that point we're definitely going to want that URL to change. And this is where we can use a cool little trick that Craft CMS makes possible. This field will actually process the Twig templating language and you'll see a bit more of the Twig templating language later when we start looking at templates. But for now all you need to know is that what we can do is take this URL out and we can replace it with a Twig template expression that will make that URL dynamic. Now let me show you how that's done. We're gonna go into our Craft CMS files. We're going to go to craft > config > general.php. In here we're gonna set up an environment variable that's gonna let us define the base URL of our site and to do that we're gonna add this code. Now what we've done here is we've used the term environment variables and Craft is going to look for this environment variables array every time it runs. Inside this array, you can set up any environment variables that you want. They can be named anything you want and they can have any value that you want. So in here, we've created one named baseUrl. Inside it we've added the URL of our offline site that we're working on. We're gonna use this baseUrl variable inside the URL field of our asset source. Then when you need to take your site and put it online, all you need to do is come into this general.php file and update this baseUrl variable. So, let's save that and add this in to our asset source setup. So now all we need to do is replace this URL with the variable that we just created inside a pair of curly brackets. Now any images that are uploaded into the images folder that we just created, will be visible on the frontend no matter what the main domain of the website is. So let's save that and now you see over on the left a new item has appeared in the admin menu, Assets. And now people can come into this area and they can manually upload assets into that images folder. And what they're also gonna be able to do is upload assets when they're creating entries. But in order to do that we need to set up asset-specific fields to go with an entry type. And that's what we're gonna learn how to do in the next lesson when we learn how to create fields to correspond with entry types. I'll see you there.

Back to the top