Introduction to the Admin Interface

jason — Sun, 19 Feb 2012 08:00:00 +0000

This is the first in a series of introductory tutorials created to provide a guide to learning about the basics of the Drupal administrative interface. This tutorial will provide an overview of the following topics:

Drupal introduction
Admin login
Creation of new content
Find and edit existing content

Drupal Introduction

Terminology

Before diving in to the steps required to interact with Drupal interface, here are a few terms that you will hear and might wonder exactly they mean.

Field: A field is a single item of information that the administrator can enter to be displayed on the website. Each field will have a form item that depends on the type of field. For example a text field would have a blank text box. An image field would have an upload button. A long text field would have its own WYSIWYG editor for entering a large amount of custom-formatted text. There are many different types of fields that can be used depending on the type of information that needs to be stored and displayed.
Node: the information that you want to display on your website is stored as collections of fields. Each pre-defined collection of fields is referred to as the node. Usually one node refers to one "page" on your site, but often you will have a "page" that combines many nodes and only displays specific fields from those nodes. An easy example of this is a blog list page. Generally this page will list a bunch of individual blog posts by displaying a few fields from each post (or node). Lets say it displays the node title, maybe a thumbnail image, and a summary snippet of the blog body text. Clicking on the title will then take you to the full node where you will view the blog post in its entirety.
Content Type: The developer of the site will create a collection of different types of nodes that will be custom built based on the exact information structure for the various nodes of your site. Each content type allows the administrator to create a node with its very own set of fields. For example, the "blog post" content type listed above would consist of a title field, an image field, and a body text field. Lets say for example your website has a portfolio section where each project in the portfolio would need a title, a slideshow, and a link to an external website. This would mean the developer would create a new content type that has the title field, a set of image fields large enough for your slideshow to have the number of slides that you require, and a link field that will accept a valid website URL.

Now that you know the main structural elements, lets take a look at how these are actually used within the admin interface to allow you to create the content for your website.

Administrator Login

Many websites will include a link to the login page as part of the design. If so, you only need to click on that link to access the login form. If not, you will need to remember the following url to access the login form:

yourwebsite.com/user

Now you will need to submit the login username and password provided to you by your developer to login to the system.

Once logged in you will have access to the administrator toolbar across the top of your website (as well as a few additional admin links throughout your site, depending on the activated options). The toolbar is broken into two levels. The top level (black bar) is the main navigation of the administration tasks. The second level (grey bar) is the list of customizable shortcut links. These should be pre-set to the common tasks by the developer, so hopefully you can simply rely on these links alone.

Creation of New Content

To add a new node to your site simply click on the "add content" link in the shortcut bar, shown above.

Now you should see an overlay page that lists the available content types to chose which type of content you would like to add. Clicking on the content type will open a new page with the available fields associated with that specific content type. Thus, each of these will be slightly different and unique to your website. For an example, lets look at the blog post type for this website.

As you can see, my blog posts are defined by the following fields: title, category, body, and tags. The title field is required for all nodes in Drupal so you will always see this field. The category field is a set of predefined checkboxes that you can activate for each node. The body field is the large text area with WYSIWYG editor, and the tags are a list of auto-complete words that can be used to reuse existing tags or add new ones on the fly. Below these fields are the Meta tag fields and some additional options for more advanced customization of this node. To add a new blog post, simply fill out this form and submit it using the "Save" button. The blog post will be automatically added to the blog listing page.

Find and Edit Existing Content

To find a content node that has already been created on your site (so that you can update it or remove it), first click on the "Find content" link in the shortcut bar.

This overlay page gives you a list of all existing nodes within your website. At the beginning of development this list will be short and easy to look through and find your content listed by the node title. Once your website has been grown after a few dozen blog posts, it gets a little more difficult to find that needle in the haystack you are trying to update. Luckily, you are provided a few options to help locate the desired node. First, you can use the filter options at the top of the page to limit the list by published status and/or by content type. Using these options to display only "blog posts" that are currently unpublished is a common filter that I use. The other utility is the sorting by column options provided on the node list. You can select the column heading to resort the node list by that column. The default is by updated date so the most recently edited content is at the top. Usually this is helpful, but if you know the exact node title you are looking for, sorting by title will organize them alphabetically, which might save you some searching.

Once you locate the content you want to update, click on the "edit" link under the operations column on the right of the page. Clicking on the content title will actually take you to view that node directly, which is useful too, if you are just looking to find a certain page on your site to view it as a site visitor would.

This example is for a project node titled "Aiko". As you can see, it looks very similar to the blog post node type, but with a different set of field options available. This node is already fully defined since I am only editing it from it's current status, so updating something is as simple as finding the field that needs to be updated, and either replacing the necessary text or image as needed.

Click "Save" at the bottom of the form when you are done, and voila!

Drupal SolutionsIntroTutorials

Wysiwhat?! Learning to speak web lingo...

jason — Wed, 04 Jan 2012 18:00:00 +0000

No matter how tech savvy you may be, there is often a language barrier when discussing internet technology. Sometimes it stems from a brand new technology that no one has really heard of. Other times it can be a simple issue of "How do you pronounce that word anyways?". Lets take "Wysiwyg" for example. I find myself using that word pretty often when trying to explain to a potential customer how they will be able to change/add content on their own without coding knowledge. The problem is, even though I know what a "Wizzywig" is, more often than not, they have no idea. In response I have started building a list of common jargon that needs a little explanation, so that I can have a readily accessible answer when the inevitable questions come up.

Wysiwyg (Wizzywig): Acronym for "What you see is what you get". A plugin that converts webpage text input areas into mini word processors, with a very similar style and function as Microsoft Word. This allows more flexible content customization and layout without needing to know any HTML coding techniques, since the wysiwyg editor takes care of all of the coding for you. We recommend CKEditor.

Clearing your browser cache: Depending on your browser settings, various parts of any webpage that you visit are saved to your hard drive so that if you visit that page again, it does not need to re-dowload the files. This is a great way to speed up page load times, but it has the unfortunate side effect of making the page display out of date information if there has been a very recent update to the website. This does not cause a problem once a website has been completed, since any changes would be minor. But during development, there will often be large chunks of information that have been updated and viewing the older "cached" versions will make the page look broken or incomplete. During development, it is important to clear your browser cache any time you want to make sure you are seeing the website in it's fully up-to-date form. See how to clear your browser cache.

Favicon: The little 16x16 pixel icon graphic displayed in the browser next to the URL for a website. It also appears on the tab and in the list of your favorites for some browsers. Although small, this extra detail really helps create a well rounded theme for any website and can be used to give a personal touch to a site.

Page Title: Not to be confused with the title text displayed on the page as the heading for the content, this title is used mostly by the browser and search engines. This is the text that appears on the top of the browser window (or tab if you are using tabbed browsing). It is also what is used as the title of the page anytime this page is shown as a search result on google or Bing.

Modal pop-up: A modal pop up is what you call that overlay of content that appears within a webpage covering up the existing content (usually with a translucent grey background). These are becoming more and more common as they allow an easy way to integrate more detailed content to a page without adding clutter or forcing the user to click through to a new page.

Lessons LearnedTutorialsIntro