Drupal Theme: 
UQ Base Template
Learning Objectives: 

In this session, you will learn how to build and modify a homepage using the Inception module. The exercises will step through how to add some common homepage elements like a banner that displays featured content, and a list of promoted content.

Unit 2.1: Inception

Inception is a content type that allows you to easily drag and drop other content like blocks, views or HTML code together in a variety of layouts.

Sandbox sites come with an Inception homepage and some default introductory content. The yellow boxes are the areas where you can drop blocks of content in. DO NOT DELETE the default homepage. If you don't like the work you have done, remove the element or drag it to scratch. If you delete your page, you will have to configure a new one to be the homepage. This configuration access is only available to Site Administrators.

Firstly let's clear the default sandbox content and populate it with our own homepage.

  1. Navigate to the homepage.
  2. Drag the top introduction block into the “scratch” zone at the top right.

    The scratch is a bucket to temporarily hold blocks that you aren’t using on the page. Blocks in scratch are not visible to the public.
  3. Click on scratch, you will see your block has been moved there.
  4. Click save at the bottom of the page to apply the change. That block will now reside in scratch unless you move it out again.
  5. Now, move you mouse to “Getting Started” and click the trash can icon.
    1. Click “Remove element” to confirm you want to delete this.
    2. This will permanently remove this text block from the page. Notice that it does not appear in scratch.
    3. Drag “Take a Guide” into scratch and save.
    4. The homepage is now empty and ready for you to build your own.

Unit 2.2: Banners

Let's add a banner. Banners nodes that are 'Promoted to frontpage' AND 'Featured'.

  1. Click "Add Element" in the top most yellow region and select “View”.
  2. In the View drop down choose “(Starter banners) Tall banner with passive buttons
  3. Click Add view
  4. If the banner doesn’t appear immediately it is because the system may require a few seconds to generate the correctly sized images.

The banners look for any basic page or article content which is "Featured" AND "Promoted to front page".

Different banner styles

Now, let’s create a different style banner.

It is critical you remove the first banner before creating a second banner. Please ensure you complete the first step.

  1. Firstly, remove the existing banner – drag the banner into scratch and save OR click the bin icon that appears when you hover over the banner.
  2. Select Add Element for the same top yellow region and choose “View”.
  3. Select “(Starter Banners) Tall Banner”, then “Add view”.

Your new banner should be showing; this time without the coloured buttons and fading through each of the three items you've created.


Unit 2.3: List with lead

Add a list with lead showing your promoted content. List with lead displays Basic Pages that are 'Promoted to frontpage' but NOT 'Featured'.

  1. In the same top most yellow region, add a new “view” element.
  2. Select “(List with lead) Title, Summary, Image”.
  3. Add view.
  4. The following block should appear with your four basic promoted pages in the listing. 
    REMINDER: Promoted to front page must be checked in the "publishing options" or it will not show in the listing.

We now need to adjust some things. The text under each heading is pulled from the body of the basic pages. If you want it displaying something better, you will need to edit the summary for each page.

Let’s adjust the default text in the left column and change the number of items displayed to 3:

  1. Click on the cog icon in the grey bar above the element.
  2. Click on “Custom View Options”.
  3. Add a welcome message into “Custom header”, give it a H2 title and some body text.
  4. Scroll down and in the "Max number of items" field set the max number of items = 3.
  5. Save changes.

TIP: Most of these views will always generate the more recently published first. If you wish to specify order, try manipulating the "Authoring information".


Your completed block should look like this:


Unit 2.4: Add text block

Now let's add a plain text block to one of these regions.

  1. Choose a region and click Add Element > HTML Code
  2. Add a heading “About this site” and set it as <h3>.
  3. Add a short body under the heading.
  4. Click Add html.
  5. Drag your text block so that it appears under the banner and above the list with lead. Click Save.
  6. Click the Preview button at the top right corner of your homepage to see your homepage without the yellow regions.
  7. Click the Edit mode button at the top right corner to return back into edit mode.

 

NEXT: Session 3: News