Learn the Basics on How to Install Drupal

When I first started using Drupal, I wanted to give up after about 5 minutes. If it weren’t for one of my colleagues showing me through the process, I probably would have. Drupal is a great CMS and I’ve come to love it but the learning curve can really stray people from digging into its full capabilities.

In this post, I want to walk you through how to install Drupal 7 and configure a website that will allow you to post content and media.

First – Download Drupal 7 from Drupal.org.

The easiest way to set up a Drupal site is using MAMP (for Mac) and WAMP (for Windows). Here’s a GREAT tutorial on how to install Drupal using MAMP (this tutorial uses Drupal 6 but the setup is almost identical to 7) or if you prefer to read – https://www.drupal.org/node/66187. If you have a web server, it’s a similar process.

Once you have your site setup, you’ll notice that it doesn’t do much. Unlike WordPress, you don’t get much out of the box when it comes to Drupal. Let’s go over some simple terms that will help you understand how Drupal works.

1) Node – All content on a Drupal website is stored and treated as “nodes”. A node is any piece of content, such as a page, poll, article, forum topic, or blog entry.
2) Content Type – Content Types are part of the structure of Drupal and layout how you define how pieces of content will be organized throughout the site. For example, blog posts, videos, status reports, etc. can all be defined as content types on your site. Each node belongs to a content type.
3) Module – modules are a way of extending Drupal’s functionality. Think of it as little add-ons that that improve the flexibility of the site, however you only install what you need. This is both a burden and a curse. On one side, it can become very tedious to install every module you need each time you set up a site. On the other hand, it keeps your site very lean and keeps you from having extra stuff that will slow your site down.
4) Views – views are a way of aggregating content types or specific fields of a content type. For example, say I have a general “Post” content type that includes the fields a) Name b) Time c) Header d) Image e) Body. Say I have 100 separate “Posts” and want a way to build a preview like page that gives users a snippet of what each post is about. Using Views I can tell Drupal – show only fields A, C and D. And when they click on any of these fields, it will take the user to the actual node and show all the fields. Views also allows you to set a path and a page but we’ll get into that later.
5) Block – Blocks can be static content, an extension of a module, a view, etc. They are used to display content on certain sections of a page. For example, if you wanted to show the most recent comments that were posted on you site in the top right of the page. You could create a view that is a block that would display on every page of your site in that spot.
6) Region – Drupal’s layout is defined by regions. For example, header, footer, content top etc. You can define regions in your theme.

7) Theme – themes allow you to change the look and feel of your site.

Step 1 – Install all the modules you will need.

Now that we have some Drupal theory out of the way, navigate to your Drupal install on your local machine to your-site-name/sites/all. There should be a modules and themes folder there (In Drupal 6 you have to create these).

Next we’re going to download the modules that we will be using.

Go to drupal.org -> Download & Extend -> Modules. Here is the list of the modules we’ll be working with. Make sure to download the correct versions of the modules that correlate with your Drupal install. Since we’re using Drupal 7 ONLY DOWNLOAD DRUPAL 7 MODULES, otherwise your shit will break!

1) Media
2) Media Youtube
3) Ctools
4) Views

Once you’ve downloaded these files, unzip them and place them in the “modules” folder. Then on your Drupal site, navigate Modules section on the main nav. There you will see check boxes next to a bunch of module names. You’ll notice that some modules require other modules. Make sure to always check for these dependencies, otherwise you won’t be able to enable these modules or enable them.

Things to enable:
1) Ctools (This is packaged with other sub-modules, but you DO NOT need to enable these, just the main Ctools module).
2) Media
3) Media Youtube
4) Media Internet Resources
5) File Entity (included with Media)
6) Views
7) Views UI (this is the interface that you will use to create views)

Whenever installing a module make sure you Read the Documentation or the Readme.txt file that is included in the module which will give you instructions on how to install and configure it. Next, click save at the bottom of the screen.

Now you have all the modules you’ll need to create a website. **Note there are thousands of modules available for accomplishing all sorts of tasks. You can even write your own and contribute it to the Drupal community.

Step 2 – defining our content types

Our next task is to create content types that we will be using. So if we’re making a blog about music we’ll want to include certain fields in our pages. Click on Structure-> Content Types->Add Content Type. Here is where we’ll define our custom type to include the fields that we want. You’ll see that Drupal by default supplies you with “Basic Page” and “Article”. The first field is the “name” which is what we’ll see in administrative menu. Let’s call it Music Post. When defining a content type, the Name can include spaces and uppercase but the machine name must be all lower case with no spaces. In Drupal 7, it automatically generates machine names (A very nice new feature). And under description we’ll say “A place to post music news, videos and images. Click “Save Content Type”.

Now we need to define our fields. . After clicking save, you should be at the content type settings page, if not navigate there. Now let’s add a field to upload images associated with our music pots. Under the Operations row, you’ll see “manage fields” for the Music Post content type. Once you click here it will prompt an admin interface which will allow you to add fields. . You see “Add new field” on the left. In the label textbox type “Artist Image” in the filed name, type “artist_image”, under type of data to store choose “Image” and in Form element select box, choose “Image”. Next we will be prompted to an admin screen to set the specifications for our field. Let’s leave it alone for now but feel free to mess around with this later. Save field settings.

Now let’s create a text field that allows us to create a headline. In the label text box put “Headline”, in the field textbox put “headline”, under type of data to store choose “text” and then choose “text field” under the second dropdown. Let’s set the maximum length of the textfield to 150 characters. Click save field settings.

Let’s add a video field. Before we add the video field, we have to enable the youtube player. Navigate to Configuration->File Types->Video->Manage File Display and check the “Youtube” checkbox. Save.

Now go back to your content Following the same instructions as before.
– Label = Video
– Field name = video
– Type of data to store = Multimedia Asset
– Form element to edit the data = Media file selector

Click save and an admin settings screen will prompt. Under allowed media types, enable video. Under allowed URI schemes enable YouTube. Everything looks good for now but feel free to change the display settings for the height and width of the Video in the future.

Once saved, make sure the display settings for the video field and the image field are set. Click the “Manage Fields” tab and make sure the video field’s format is set to Media. For the Artist Image field, you’ll see an icon to the right of “Image style: none (original image)”. Click the icon and choose medium. This setting automatically crops the image so that they all look consistent throughout the site. You can create a setting by defining a height and width using Image Styles in the site Configuration.

Almost there! Let’s rearrange how these fields are displayed. If you hover over the left of the label a 4 point symbol will prompt. Let ‘s click and drag the “Headline” and move it right underneath the title. Next lets move the “Image” right above the “Body” field. And finally let’s move the “Video” field right below the “Body” field. This will just change the way the post is displayed.

Let’s create our first post! In the sub-menu, you’ll see Add Content and select Music Post. For the Title field choose whatever you want. Since mine is about music I’m going to put “Rusko – Somebody to Love”. Under Headline I’ll put – “This is Rusko’s new single which features a great music video with live clips”. Under Image, lets select a file to include with the post. In the Body, just type in some text. In the Video field, go to the Youtube video page and click on Share, copy that link and then place it in the Video field. Click save and we just created our first piece of content!

Now create a bunch more posts (say 10) so that we have some content to play around with.

Step 3 – Creating a View

So now that we have all this content, let’s present it to the user in a better way. Most of the posts are going to take up a whole computer screen. But we want our users to be able to skim posts and click to “Read More”, almost like a news feed. Let’s use Views to accomplish this.

As mentioned before Views are a powerful way to aggregate information. So for our home page, I think we should only show the node “Title”, “Headline” and the “Image”. So navigate to Structure -> Views -> Add. New View
– View name => Home Page
– Description => A list of Music Posts that displays the Title, Headline and Image
– Show => Content of type Music Post sorted by Newest first
– Create Page => Make sure this is enabled.
– Display Format => Unformatted list of fields
– Items to display => 10 (make it whatever you want)
– User pager => enabled (allows for pagination)
– Click Continue & Edit

Now we’re at the admin interface of our view. So where to begin. It’s always up to the user but I usually tend to start with the “Filters”. This does exactly what the title suggests, it filters information based on parameters we set. To backtrack (refer to the 3rd bullet point above) and explain how we got here, we only want Music Posts content types to display on this page. You can set as many filters as you want but we’ll leave it for now. Simply click the “add” button to add a new filter.

Now lets choose the fields that we want to show. Based on the three we’ve decided on let’s start with the Title (which should already be enabled, so we’ll do headline and image). Go to the Fields section and click the “add” button. Navigate to “Content: Headline” select it and click “Apply (all displays)”. Then a settings screen will prompt. We don’t want our Field to have a label (which Drupal usually creates automatically) so uncheck that. Some fields will give you the option to “link this field to its node”. Meaning it automatically makes that field a link that takes you to the full node. The Title field is already enabled this way. Everything else looks good so click apply.

Now Lets add the image. Click the “add” button and navigate to “Content: Artist Image (field_artist_image). Let’s uncheck the label option. For the “Image Style” property, I have mine set to “thumbnail” so that its not so overpowering. However, feel free to choose whatever you like and remember you can always create your own prefixed image settings in the Configuration section of the website under Format choose Image. And we have all our fileds. Finally lets link the image to the actual node. So under “link image to” select “content”.

Now the question is where does this page exist? You might have caught this in the previous step when we were setting up our views. But in case you didn’t you can always modify the url path underneath “Page Settings” in the Views admin interface.

Since this is our home page, we’ll want to make it a menu item. Underneath the path you’ll see a menu settings, click it. Now make sure it’s a Normal Menu Entry, choose your Title, i.e. Home Page, Menu = Main Menu and then click Apply.

Make sure you click Save in the upper right. Its good to periodically do this when working on your Views!

Congratulations we now have our first view! Alright let’s create one more. Let’s make a Videos page and displays all of our Videos and their Titles. Go to Structure->Views->Add View. Set the filter up the same way as the previous example. Now under fields we only want the Title and the Video (Title will already be enabled). Then lets’ choose “Content: Video”. Let’s set the label to none and click apply and then save.

Now make this page accessible by adding a url and a menu just like we did before.

Step 4 – Getting rid of all the loose ends

Well now that we have our pages, I think we should change our home page to the “Home Page” view. So navigate to Configuration -> Site information. Under default front page at the very bottom, type in home-page. And now your home page will be set to this view.

To edit your menu, go to Structure->Menus. Then choose Main Menu and list links. Here you can set which menu items are enabled and change the order of the display.

Step 5 – Installing a theme

Drupal used to look pretty ugly out of the box with version 6. D7 is a huge improvement. We’ll need a place in your file directory to put the theme. In D6 you used to have to create this folder but with D7 it should already be created. Navigate to sites/all/themes.

Next go to drupal.org -> Download & Extend -> Themes. A lot of drupal themes are bare bones, which allows for easier customization but we’re not on that level yet so we’ll save Drupal theming for another lesson. Some good starter themes are Danland, Blue Masters, Corporate Clean, etc. There’s tons so just choose one, download and unzip it. Now place that unzipped folder in your themes directory. **Note that some themes depend on other themes (just like modules), so be careful and read the documentation.

Now once it is in your themes directory, navigate to Appearance and find your theme. Click “Enable and Set as default”. Find the theme that you downloaded, enable it and set it as the default theme by clicking the checkbox. Click “Save Configuration” and voila, your site looks completely different.

In this article I barely skimmed the surface of what Drupal is capable of. I didn’t even touch on many key features that are essential. So now that you’ve got a good base, keep reading and experimenting with your Drupal site. There are thousands of modules that do awesome things that I don’t’ have time to go over. And who knows, if you stick with Drupal, you may be able to write a module of your own and contribute to vast community that helped build this powerful CMS.

Always remember don’t hack the core (if you don’t know what that means, Google it).