Basic Site Building With Drupal 7

By: Roald R. Umandal

To learn how to create a basic website using drupal

To extend the power of drupal To learn how to create content types and

views To learn how to add contents in drupal

website

Objective

Views Views UI Ctools CKEditor Colorbox Module Filter Pathauto Token Libraries

Modules to be installed

CKEditor Colorbox

Libraries to be installed

Installed modules should not be placed in core modules it should be placed in sites/all/modules, so that when you update your website it will not override your configuration in your modules

Installed themes should also placed in sites/all/themes, so that when you update your website it will not override your current theme

Rules in Drupal

1. Your modules should be in this path “sites/all/modules”2. Best practice is to create a separate folder for contributed

modules and custom module. You should name the two folder contrib and custom and it should be inside your sites/all/modules

3. Enable the modules that we installed

1. Create a libraries folder in “sites/all” make sure that youtype it in lower case, because it is case sensitive 2. Put all libraries or plugins in libraries folder

Make sure you always check the reports > status reports, you can see here if you have problem in your installed module or libraries

Congratulations your now ready!

Basic Site Building Drupal 7

Creating Content Type

Basic Site Building Drupal 7

Select structure > Content types > Add content type

1. Set the content type name to “News”2. Uncheck the Promoted to front page in “publishing option”3. Set the Comment settings to closed (optional)

1. Add new field for image2. Edit and append the name of the content type in front of machine

name3. Set the field type to image4. Set the widget to image

1. Set the number of values to unlimited2. You can set your Default image3. Then click the save button

1. Click the manage display tab2. Change the label to hidden and set the image style to

medium3. In custom display settings check the Full Content4. Then click save

Hover the content and select add content then click the News content type that we created before

1. Set the title of your news2. Set your content in news body, you can also add image in

your content by dragging it inside.3. Upload your image

1. Uncheck the “Promoted to front page”2. Click Save3. Now that we have a content type for news, we can now create

a views for news

Creating Views PageBasic Site Building Drupal 7

Hover to structure, select Views and add new view

1. Create a views name “News” for the news content type2. Select News in “Show Content of type”3. Check the create page and create a menu link4. Click continue and edit

1. Change the format, set the “show” to field. After changing the format you should now be able to see the add button at right side of “Fields”

2. Add the following fields Content: Title, Image, Body, Nid and Global: Custom Text

1. Configure your global: custom text write on the text box “Read More”2. Scroll down and set the Rewrite Results check the Output this field as a link3. Configure the link path and click save

You must see now the content that we have been created before at the bottom of the page

After creating a page for news you should now be able to see your page like this

Creating a Gallery Page

Basic Site Building Drupal 7

1. Create a content type for the gallery2. Click manage field add image field, edit the machine name and

append the title of the content type in front of the machine name 3. Select field type to image and widget image4. Delete the body field because we are not going to use it. Then click

save

Change the number of values to unlimited then save

Set the title of your gallery

1. Set the title of your gallery2. Choose your image and upload3. Click save

1. Create view page for gallery2. Check the “create a menu link”3. Click “continue and edit”

1. Change the format to Grid and Show change it to field2. Add Content: Image in Fields

1. Uncheck the create label2. Select Colorbox in formatter and select Medium in content imageStyle, Click Apply (all displays)3. Click save

After creating the view page for gallery you should be able to see your page like this

If colorbox doesn’t work properly check the reports > status reports and you will see the reason why your colorbox is not working properly

The EndBasic Site Building Drupal 7