St Andrew’s, Marks Tey Church Website User Manual A step by step guide to using your new Drupal 7 church website Richard Morgan, 2011 St Andrew’s, Marks Tey : Church Website User Manual © Richard Morgan, 2011 ISBN 978-1-4709-4031-7 Contact To contact Richard, use: Revd Richard Morgan [email protected] www.revrichardmorgan.org or at: www.good-samaritan.org For information about Drupal: www.drupal.org and especially: www.drupal.org/documentation Acknowledgements This document is inspired by the Drupal 6 end user manual template at: http://drupal.org/node/936846 by Andrew Tuline. Visual Quickstart Guides from Peachpit Press are great publications and provide the blueprint for the page layout of this document. This publication is in no way meant to be comparing itself to that series in any other way than taking inspiration for the page design. This document has been printed by www.lulu.com [unless you are reading an electronic copy]. This offers reasonably priced printing which makes distributing a 100 page document a much better experience in printed manual form than a collection of loose leafs stuck into a binder. More copies can be ordered from www.lulu.com by searching by author and title. Copyright This document has been created for the users of the St Andrew’s Marks Tey church website at www.marksteychurch.org.uk. It is © Richard Morgan, 2011 and is released under the Creative Commons Attribution-ShareAlike licensing [you can do what you like with it, but do re-distribute similarly freely] as found at: http://creativecommons.org/licenses/by-sa/3.0/ ‘Whatever you do, whether in word or deed, do it all in the name of the Lord Jesus Christ, giving thanks to God the Father through him.’ Colossians 3:17, NIV Table of Contents Introduction: Chapter One: Chapter Two: Chapter Three: Chapter Four: Chapter Five: Introduction 1 Why a Church Website? Content Types People, comments & tags How Drupal builds a page Administration pages 2 4 5 6 7 Users 9 Registering for a User Account User Account options Managing Users User Roles 10 11 12 14 Creating a Basic Page 17 Create a basic page Menu Settings Revisions URLs Scheduling Publishing Options 18 19 20 21 22 23 Managing the Main Menu 25 Re-ordering the menu Editing menu items 26 28 Articles (Blog posts) 31 Create an Article Tags Image Summary Text Formats Comments Authoring Information Publishing Options 32 34 36 38 40 41 42 43 Events 45 Create an Event 46 i Chapter Six: Chapter Seven: Chapter Eight: Chapter Nine: ii Date Image & Description Options 47 48 49 Sermons 51 Create a Sermon Event Description Uploading Audio Files to Download Speaker and Series Bible Reference Sermon Description 52 53 54 56 57 58 59 Rotating Images 61 Create a Rotating Image The Image Linking to Content Text Overlay Managing Rotating Images 62 63 64 65 66 The Text Editor 69 Styles Other Formatting Links Media, Tables & Special Characters Pasting Content Teaser Breaks Other options 70 71 72 76 77 78 79 Media 81 Inserting Media Images Video Files Audio 82 83 88 89 90 Chapter Ten: Chapter Eleven: Managing Content 93 Editing Content Finding Content Filtering by Status and Type Bulk Operations Searching for Content 94 95 96 97 98 Term Descriptions Where you see Term Descriptions Editing the Descriptions Description URLs Chapter Twelve: Blocks What is a block? How blocks are displayed Understanding the Context Editing blocks Adding a new block Chapter Thirteen: Views What is a view? View Titles Number of View Items Chapter Fourteen: Backing Up Why Back Up? How to back up How to restore from a backup Why and how to test a backup Chapter Fifteen: Emails Site email when people register Setting up email addresses A new email address A new email forward 101 102 103 104 107 108 109 112 114 115 117 118 120 121 123 124 125 126 127 129 130 131 132 133 iii Appendix One: Modules Modules – Core and Contributed Core Modules in Use Contributed Modules in Use Libraries Upgrading Modules Upgrading Drupal core Appendix Two: Theme Theme settings Logo and favicon How a theme is structured Page Template Styling (css files and images) Custom code (template.php) Appendix Three: Hosting Hosting and Domain Name Hosting cPanel Cron Jobs Subdomains Addon Domains FTP Appendix Four: A clean installation Why install a clean website? How? Appendix Five: Drupal Resources Online Resources Books Appendix Six: Images for the Web Image size and compression settings Image editors Using Layers Good sources of Images iv 137 137 138 138 142 142 143 145 145 145 146 147 147 147 149 149 150 150 150 150 151 153 153 153 155 155 156 159 159 160 160 160 Appendix Seven: Appendix Eight: Audio for the Web 163 163 164 Writing for the Web 167 Page length Writing style Appendix Nine: Appendix Ten: 163 Audio file size Audacity Settings for sermon audio 167 167 Feeding Facebook 169 Setting up TwitterFeed 169 Training Users Exercise Sheets 171 171 v i Introduction In This Chapter Why a Church Website? Content Types People, comments & tags How Drupal builds a page Administration pages 2 4 5 6 7 This manual introduces you to using your new church website. You will learn how to create and manage the content that makes up the site. Each chapter will take you through the basics of the various tasks involved in this role. This introductory chapter will introduce you to some of the principles involved in managing the website. You will find understanding some of these basic concepts helpful in learning the specific tasks you will be responsible for. 1 Introduction Why a Church Website? Before you start adding content to a church website, it’s worth taking a moment to think of who it is there for and what it ought to achieve. There are two broad categories of visitors to your website – those who are members of the church already and those who are not members. Their needs are different, but a website that is catering well for existing church members will also communicate to someone checking out the church online that the community is thriving and active. Conversely, a website that is making the effort to communicate information about the church clearly and effectively to nonmembers will avoid pitfalls like advertising: ‘next Alpha course starts on Tuesday’ without explaining what an ‘Alpha Course’ actually is. This means that it will also be communicating well with members. There are at least the following reasons why people will visit your website: People visiting a church for the first time visit its website first. They need to know where you are and what time to turn up. They will want to get some kind of impression about what the worship service will be like and what kind of community of people you are. They may well be interested in what the church provides for their children. Some people will visit the website looking for specific information. Can I get married here? What is the Rector’s phone number / email? How do I arrange for my child to be baptised? I’ve seen the national Alpha advertising; are you running a course here? 2 Church members will want to listen to a sermon again, or catch up on one they have missed. Members will want to check up on information that they have forgotten (What were the dates of the holiday bible club?). Members will visit if they’ve been told that there is information there that they are interested in. [‘I’ve posted my notes from the annual general meeting online…’, ‘There’s a new newsletter from Nepal online…’] (These are some of the reasons. It would be a good exercise to get out a piece of paper and write out a list of other reasons people might be visiting.) Your role will be to make sure that the needs of these different types of visitor are well catered for. First of all, the church website must be a good brochure for the church. Think about the content you write and the images you post carefully – does the impression they create accurately and effectively describe the church? You should anticipate the kind of information that people may be looking for and make sure that you provide it clearly and make it easy to find. Events, news and sermons should be posted regularly and kept up to date. Content Management To meet the needs of the various visitors to your website, you will need to post various different types of content and make sure they are kept up to date. The content needs to be displayed in the right place and removed when it is no longer relevant (it Introduction looks bad when you visit a church website that is still advertising its Christmas services at the beginning of January). The task of managing this content is made much easier by a ‘content management system’. A well-known example of a system that manages content is Facebook. You type in a message, add a link or upload a photo and Facebook takes care of the rest. It chooses where and how (and to whom) those items are displayed. The system that manages the church website (called ‘Drupal’) is a bit like this – you add the content and Drupal will take care of how and where it appears on the website. If you can add and delete posts and images from a Facebook page you will be able to use your new church website. Your website has been customised for you. Its appearance and functionality were decided in the process of creating a theme (a set of templates) choosing modules (a set of functionality) and configuring the various available options. As you use the website, you are responsible for creating and updating the content. Drupal will take care of how that is laid out in a page and make a lot of decisions about what is presented and where. If you create an article it will display it at the top of the list of articles as the most recent one; if you add a sermon it will show that by date order; if you create an event Drupal will automatically stop displaying it once the event has happened. What is Drupal? Your website is powered by a ‘content management system’ called Drupal. Drupal powers literally millions of websites. Among countless others, it is the system used to power the websites of Amnesty International and the White House. Many churches use Drupal – in the UK a few examples would be Holy Trinity Brompton Church in London (www.htb.org.uk), Woodlands Church in Bristol (www.woodlandschurch.net) and St Paul’s Church, Salisbury (www.stpaulssalisbury.org). If you look at those websites you will see that Drupal is completely customisable. It’s customised with templates that define the appearance of the pages, and modules that add different functionality (like that rotating banner image on the front page). No two Drupal websites need look or feel like one another. 3 Introduction Content Types When you add content to the site, you have to choose a type of content to add. There are five choices: Basic Page Pages of information about the church. These should go in the ‘About’ section of the website. Don’t use basic pages for news or for listing events – there are different content types for that. Article This is for news items or ‘blog’ entries [from ‘web log’]. All ‘Articles’ will be displayed in the ‘Blog’ section by date published. The most recent will be also be shown on the front page. Figure i.1 The ‘add content’ screen in Drupal. You simply click on the content type that you want to add. Event Events coming up. These are displayed in the ‘Events’ section in date order and disappear once the event has happened. The next events that are happening are also displayed on the front page. Rotating Image The front page has a rotating image banner at the top. This creates some visual interest, and is a great place to put a few slides which will advertise the church effectively, as well as promote anything about to happen. Sermon Details of sermons which you can attach audio and text files to. These can be sorted by preacher or by Sermon Series. 4 Figure i.2 The front page of the website is compiled from the most relevant content of each type. The welcome text is in the ‘Basic Page’ type; there is a ‘Rotating Banner’ top right; underneath this items are the most relevant ‘Articles’, ‘Events’ and ‘Sermon’ content. Note, especially with sermons that you don’t have to separately enter ‘Sermons coming up’ from ‘Most recent sermons’ – Drupal knows what the date is today and can intelligently display both these things from one set of data. Introduction People, comments & tags Tags Drupal stores the content that you enter in a database. As well as storing the piece of content, it also remembers the person who created the content, comments made about the content and tags that label and help to categorise the content. Drupal provides a rich system for categorising your content. If you ‘tag’ an article with a word of phrase (‘children’ for example), then that tag appears beneath the article. Clicking on the tag will bring up a list of all articles that share that tag. You can see that you will want to keep tags fairly general in scope so that they can be of used to tag several articles (how many articles will you really publish which will all be tagged ‘New Wine Summer 2011’? On the other hand the tag ‘New Wine’ might apply to a number of articles). People & roles Every piece of content has an author. In order to create content you must be registered and ‘logged on’ to the website and have been given a role which allows you to publish content. Once a user has registered and been authorised they can comment on existing articles. In order to create content themselves they must be given the role of an ‘editor’. To be able to allocate user roles, or to carry out a number of other functions you must have the role of ‘administrator’. Comments This classification system (or ‘taxonomy’) is broader than just tags for articles. Several ‘vocabularies’ have been set up just for the Sermons content type – to tag sermons according to Speaker and Series, and also by type of event (i.e. Communion, All Age Worship, Service of the Word). This makes it easy for the website visitor to quickly find a list of all sermons by a particular preacher, or all the sermons in a particular series. Every piece of content can, in principle, have comments attached to it. In reality this is switched off for everything apart from articles. To prevent spam on the site every person who wishes to comment must be registered. Every registration must be approved by an administrator. It’s also possible to set the permissions so that every comment must be approved before it is visible on the website; but if the comments are restricted to registered users it is unlikely that you will want to exercise that degree of censorship. Editors and administrators can in any event remove other people’s comments if something was posted that was inappropriate. 5 Introduction How Drupal builds a page Drupal builds all of its pages from a single page template that defines the layout of every page on the site. This page template consists of a number of regions where content can be shown – a header, the main content area, a sidebar, a banner area & three panels (only used on the front page) and a footer with two regions (on the left and right). Regions, Content and Blocks The main content of each page is displayed in the main content region in the middle of the page. This will either be a single ‘node’ [an event, sermon, page or article] or a list of ‘nodes’ – for example, the list on the main ‘blog’ page. The webpage address (or ‘url’) defines what is displayed in this main content region. Figure i.3 The home page consists of a header (where the logo and the main navigation is), a main content region (on the front page just the small space with the welcome text) and a number of regions holding various blocks of content. The banner region holds the banner image block, the three panel regions hold blocks displaying recent blog items, events coming up and information about sermons. Notice how in the third panel region there are two separate blocks – the ‘Next Service’ block and the ‘Most Recent Sermon’ block. At the bottom of the page (not visible in this illustration) is the footer and the blocks of content that belong there. The other regions of the page can contain a variety of different ‘blocks’ of content. These ‘blocks’ are displayed according to context. The basic sections of the site (home page, about, blog, events and sermons) are each a different context. Drupal knows what the context is and displays relevant blocks accordingly. For example, the ‘services coming up’ block displays in the sermons context and the events context, but not in the blog context. You won’t usually need to think about what content goes in the blocks – Drupal organises this for you. Your task is to supply the site with the right content. Drupal takes care of how it is displayed. 6 Figure i.4 The ‘Popular Tags’ and ‘Recent Article’ blocks are shown in the Sidebar region of the list of articles page and every individual article page in the Blog context. Introduction Administration Pages Figure i.5 Admin pages are displayed as an overlay on top of the website. Notice the two menu bars at the very top of the page that appear when you are logged in as an administrator or editor. Figure i.6 Content can be edited simply by clicking on the ‘Edit’ link that appears once you are logged in. The editing is then done in an overlaid window like the one above. Figure i.7 Blocks of content, and content items in lists can be edited by hovering over the gear icon and choosing ‘Edit’. The number of different things that you are able to edit this way will depend on the role you have been given and the editing permissions allocated to that role. Once you are logged in you will be able to access various administration pages. These contain forms that allow you to add and manage content, comments, users and taxonomy (classification / tags). If you have administrator privileges you will also be able to configure many different options on the site, such as which blocks appear where, or what options appear on the rich text editor for editing text content. If you do have the administrator privileges that allow you to alter much of the functionality of the site can I strongly suggest that you exercise caution before changing something that you then cannot remember how to change back. The admin pages usually display as an overlay on top of the website. You can access them from the menu that appears at the top of the website when you are logged in with the right permissions. The content editing pages can also be accessed from the content itself – either as a tab above the content, or by hovering over the ‘gear’ icon which appears when you hover over a piece of content. 7 1 Users In This Chapter Registering for a User Account User Account options Managing Users User Roles 10 11 12 14 Before you can edit the website you need to be registered and have the necessary permission to create and manage content. This chapter will talk you through that process and also explain about the different roles and permissions that users of the website can have. If you have administrator privileges you will also be able to approve registrations and assign roles and permissions to users. Skip this part of the chapter if you know that you will only be using the ‘editor’ role on the website. 9 Chapter One Registering for a User Account To register for an account: 1. Click the login link (at the bottom centre of the footer). 2. Choose the ‘Create new account’ tab. Figure 1.1 The ‘Log In’ link is at the bottom of the footer in the center. 3. Choose a Username and an email and submit the form (press the ‘Create new account’ button). 4. Check your email – if the site is set up to require an administrator to approve every account it will let you know this; ask someone who has administrator privileges to get on and authorise your account. 5. Once your account is approved, you receive an email with a log in link. Once you access this link you must set a password for your account. Figure 1.2 You arrive at the ‘Log In’ page for an existing account. If you don’t have an account, you need to select the ‘Create new account; tab at the top left. Tips Your user name will be the name that is displayed underneath articles that you post. You are strongly advised to use your real name (Firstname Lastname) as your username. If you forget your password, you can get the system to email you another one to the email address you gave. (The ‘request new password’ tab on the log in page.) 10 Figure 1.3 Your Username is going to appear underneath any articles that you post. Please choose a sensible username (real names are best). Users User Account Options Everyone can edit their own user account, and administrators can edit any account. The most important account option is for users to keep their email addresses up to date. Figure 1.4 Once you are logged in there is a new menu at the top right of the header – which allows you access to your account settings and to logging out. To change email or password: 1. Choose the link from the top right of the main administration toolbar which says: ‘Hello {your name}’. 2. Choose the edit tab. 3. Change your password and email address as required. 4. Submit the form. (Press the ‘Save’ button Figure 1.5 Once you have editor or administrator privileges you also see a top black admin toolbar (and a grey shortcut toolbar beneath it). The link to your account (and the log out link) are also here. at the bottom.) Tips From this point on the manual assumes that you have at least the ‘editor’ role on the site. If not, you won’t see the top administration menu bars on the website. Get someone to authorise you as an editor or an administrator. Figure 1.6 Your account page has two tabs – ‘View’ which you arrive at, and the ‘Edit’ tab. It’s possible to have the site display a user picture next to each article or comment. You upload these here. Leave the administrative overlay and locale settings where they are. Note that the ‘view’ and ‘edit’ tabs look different in the administrative overlay from the normal web view. They are the same links though. Figure 1.7 The edit tab brings up an overlaid form where you can change your details. 11 Chapter One Managing Users If you have the ‘administrator’ role you will be able to enable (or block) user accounts and give users ‘editor’ or ‘adminstrator’ roles. To edit a user’s account: Figure 1.8 The administration and editing options are accessible from the top black toolbar. The more commonly used options are also all in the grey shortcut bar beneath it. ‘People’ brings up a list of people. 1. Choose ‘people’ from the top admin bar – or from the ‘shortcut’ bar beneath it (they are the same link). 2. Choose ‘edit’ for the person that you want to manage. Tips Figure 1.9 The ‘People’ administration page (displayed as an overlay on top of the website). You can also authorise and assign roles to users directly from the list page by ticking the users you want to manage and using the ‘Update Options’ drop down. You can create a user here using the ‘+ Add User’ button at the top of the page. You can then create an account for a new user and ask the system will send them an email with their details. Figure 1.10 The far right column present an ‘edit’ link for each user. Here you can set the role for each user. You can get straight to a user with a url (‘Uniform Resource Locator’ i.e. the address of the webpage) in the form ‘users/{username}’ where {username} is the name of the user in lowercase with spaces replaced by the ‘-‘ character. To get straight to the edit page, add ‘/edit’. So to get to the edit page for Joe Bloggs, type the url ‘users/joebloggs/edit’ into the address bar. Figure 1.11 If you check some of the users (here ‘Revd Richard Morgan’) you can perform any of the available ‘Update Options on all the accounts that you have checked. 12 Users Figure 1.12 The user edit page. Beneath the username and password details are ‘Status’ and ‘Roles’ options. If the website is set to require an administrator to approve new user accounts, an administrator will need to approve each account that someone signs up for. The website will send an email to the email address that is set up for the website [at: ‘admin/config/system/siteinformation’] to let you know that a user has signed up and would like to be authorised. To authorise an account: 1. Go to the edit page of the person you want ot authorise. 2. Under ‘Status’ select ‘Active’ rather than ‘Blocked’ 3. Save (at the bottom of the page). Tips Figure 1.13 If the user has not been authorised ‘Status’ will be ‘Blocked’. It won’t matter which roles have been allocated – the user will not be able to log in. If you want to allow users to register without requiring approval you can change this option at the url: ‘admin/config/people/accounts’ or by choosing ‘Configuration’ from the admin bar, then ‘Account Settings’ in the ‘People’ section. This is also where you change the text of the emails that get sent when users register or apply for a new password. Make sure that the email at ‘admin/config/system/site-information’ [or: choose ‘Configuration’, then ‘Site information’ from the ‘System’ section] belongs to someone who is generally available and willing to respond to administration requests for the site. 13 Chapter One User Roles Every visitor to the website is allocated a role (or roles). Before a user logs in they are given the role ‘anonymous’. Once they have logged in they are given the role ‘authenticated’ and any other roles that they have been allocated. The Drupal permissions system allocates permissions for each role, which define what each role is able to do. The church website has been set up with the following roles: Figure 1.14 The Admin and shortcut toolbars for an editor. Editors will not be able to edit user or configure any of the options on the website. They have very wide ranging permissions for editing content. The ‘authenticated’ user doesn’t have either of these toolbars at all – but they will be able to comment on articles. The anonymous visitor can view all of the available content. The authenticated user can comment on blog articles and change their own email and password The editor can create, edit and delete all of the content on the site. That’s a pretty powerful role. They can’t manage users or edit blocks (the regions of the page other than the main content region). The administrator can do everything that the editor can and also is able to manage users and edit blocks. They can also change virtually every aspect of the site configuration. You need to decide who should be editors and administrators. One way to distribute these roles would be to make everyone who has been on a full day’s training an administrator, and everyone else you’d like to manage content on the website an editor. 14 Figure 1.15 The Admin toolbar for an administrator has a lot more options – allowing any aspect of the site whatsoever to be configured. While it is worth making sure that anyone who is given the ‘administrator’ role is properly trained and reliable (they can really mess things up); it is also worth noting that while editors have many fewer permissions they can still delete every piece of content on the site should they press a few wrong buttons. The real advantage of restricting people to the ‘editor’ role is that you don’t overwhelm them with options. Users To allocate roles: 1. Go to the edit page of the person you want to allocate a role to. 2. Under ‘Roles’ tick the role you want to allocate. 3. Save the change (bottom of the page). Tips Figure 1.16 Assigning people roles is as easy as putting a check in front of the role in the list. The ‘authenticated user’ role can not be unchecked. If you want to remove the ability of someone to comment on the site, don’t try to remove this role – simply mark them ‘Blocked’ in the status section. Figure 1.17 The ‘Permissions’ tab of the People page. Permissions are not granted to individuals but to roles. If you want to let one or two individuals have slightly more permissions that a standard editor, you need to create a new role (in the roles sub menu item) and then assign the permissions to that role, and that role to the people you want to give the permissions to. Administrators don’t also need the editor role, because they already have all the editor permissions allocated to them. However, if you set up more roles with finer-grained permissions you can give people a mixture of permissions by allocating them a mixture of roles (for instance ‘blogger’ and ‘sermon uploader’ could be new roles which would only permit those specific tasks). The permissions tab of the ‘People’ page is where you set which permissions each role has and create new roles. The permissions for ‘editor’ and ‘administrator’ have been set when the site was set up and should not need to be changed. If you wanted to create a new role, (say people who can upload audio, but are not allowed to edit content) then create it here, and under the permissions tab add only the permissions that role needs. 15 Creating a Basic Page In This Chapter Create a basic page Menu Settings Revisions URLs Scheduling Publishing Options 18 19 20 21 22 23 2 The bulk of this manual will talk you through creating various types of content. Each content type is created and edited in much the same way, so future chapters will build on the basic knowledge presented in this chapter. We’re going to learn how to create a very basic page. We’ll also allocate it a menu item which will link to it and place it in the ‘About’ section of the website. We’ll learn how to re-order the menu items in the next chapter. Creating pages with richer content (links, headings, lists, bold, italic etc…) will be explained in Chapter 8 (‘The Text Editor’). Inserting Images, Video and other media into the text is explained in Chapter Nine (‘Media’). If you can’t wait, do skip ahead once you have read this chapter to learn about this functionality. Otherwise we will go through the different content types one at a time before covering the text editor options. 17 Chapter Two Create a basic page Creating content couldn’t be simpler. All content must have a title, but that’s all. To create our first page we’ll do just that – create a page with only a title. To create a page: 1. Choose ‘Add content’ from the shortcut bar. [Or, you can choose ‘Content’ from the main admin bar, and then ‘+ Add Content’ from the top of that page.] Figure 2.1 The ‘Add content’ page from where you choose which type of content you would like to add. This chapter takes you through creating a ‘Basic page’ – the first of these options. 2. Choose ‘Basic page’ 3. Type a title (say ‘Trial Page’) into the title field. 4. Save That’s all there is to it. You now see the new page (with just a title), and an address has been created for it (in the address bar, something like: ‘sitename/about/trial-page’). We want to have more content that just a title on the page, so next we’ll edit it. To edit a page: 1. Choose the edit tab. 2. Make some changes. (i.e. enter some content in the ‘Body’ field) 3. Save To delete a page: Choose delete at the bottom of the edit page. 18 Figure 2.2 Once you are logged in with the right permissions each main piece of comment will have ‘View’ and ‘Edit’ tabs above it. Choose ‘Edit’ to edit any piece on content on the site. Creating a Basic Page Menu Settings The page you have just created has a URL (address). This means that you can now view it from anywhere in the world that is attached to the internet just by typing that URL into a web browser. Figure 2.3 At the bottom of the content editing page are a section of horizontal tabs which control a variety of options. The first of these is ‘Menu settings’. Once ‘Provide a menu link’ is checked, the rest of the options slide down. It’s a bit useless on the website, though, unless it appears as a link somewhere –so we’re going to give it a menu link. Basic pages should be used for the ‘About’ section of the website, so for this example we’ll put it there. To add a menu link: 1. Edit the page 2. Underneath the body field is the ‘Menu settings’ option. Check the ‘Provide a menu link box’ and more options appear. 3. Alter the title if required (the text displayed as the menu link) and add a description if you would like to. 4. The ‘Parent item’ is the most important field here – choose ‘About’ 5. Save You might now like to click on the ‘About’ section of the website to see your new menu item in the sidebar. Tips You can safely ignore the ‘weight’ option – it’s easier and more reliable to order the menu items in the way you’ll learn in the next chapter. 19 Chapter Two Revisions If you update a page you may want to keep track of the old version of the page so that you can keep a record of changes and revert to the old version at a later point if required. To create a revision of the page: Figure 2.4 The next tab down is the ‘Revision information’ tab. To create a new revision just check the check box here before hitting ‘Save’ at the bottom of the page. 1. In the edit page, choose ‘Revision information’. 2. Check ‘Create new revision’ 3. Save You are now working on a revision of the webpage, and there is a new tab marked ‘revisions’. You can only ever edit the current revision, but you can view the old revisions by clicking on the revision date in the list on the revisions tab. Figure 2.5 Once a revision has been created, a new tab appears – ‘Revisions’. To revert to a previous revision: 1. Choose the ‘Revisions’ tab 2. Click ‘revert’ for the revision you want to go back to. Tips ‘revert’ actually creates a new revision that is a copy of the revision you are going back to. You don’t need to worry about losing the original once you start making changes to it. 20 Figure 2.6 The revisions tab lists the revisions and gives you the option to revert to a previous version. When you revert to a previous version, what you actually do is create a brand new revision that is a clone of the one you are ‘reverting’ to. This means that once you create a revision you retain a permanent record of the previous revisions unless you choose to delete them. Creating a Basic Page URLs Figure 2.7 The next tab – ‘URL path settings’. The module ‘pathauto’ will create automatic URLs for you. When ‘Automatic alias’ is checked, the URL alias field is greyed out. To override the automatic alias just uncheck ‘Automatic alias’ and you will be able to enter whatever you like the ‘URL alias’ field. Good URLs look good in the address bar and are also helpful for advertising information on the site. [For instance, in a parish noticesheet: ‘Go to www.marksteychurch.org.uk/alpha for more information’.] They can also help locate the user within the site [i.e. all sermons have the address /sermons/{title}]. Drupal will create a sensible URL for you. The page you just created was given the URL: ‘about/{page-title}’. Often that will do just fine. Sometimes, however, you will want to override what Drupal chooses (for instance to have ‘/alpha’ rather than ‘about/alpha’. To override the default URL: 1. Edit the Page 2. Choose URL path settings 3. Uncheck ‘Automatic alias’ 4. Fill in the URL alias you want 5. Save Tips If you use short URLs be very careful not to use something that is already in use. The URL you enter is always an ‘alias’. The real URLs in Drupal are something more like ‘?q=node/134’. The systems translates your ‘alias’ into something Drupal can understand behind the scenes. 21 Chapter Two Scheduling By default pages are published as soon as you hit save and they remain published until you change that. Sometimes you might want to delay a page’s publication, or have it automatically unpublished. You use the scheduling options to do this. Figure 2.8 The ‘Scheduling options’ tab. (We will consider the ‘Comment settings’ tab in chapter 4 – on Articles). You can set a time to publish and/or a time to unpublish. To schedule (un)publishing: 1. Edit the page 2. Choose ‘Scheduling options’ 3. Set the date and time for publishing or unpublishing (or both). You must fill in both the date and the time in the format described on the form. Use a time of 00:00:00 if you want it to start at the beginning of the day 4. Save Tips You can also schedule rotating banner images. This is especially useful if you use those for promoting events. The site updates itself by running an updating script periodically (called ‘cron’). The (un)publishing will not occur at the exact time you schedule it, but at the first time cron is run after the time you specify. (Cron has been set up for you to run once an hour – see appendix 3 for more details.) 22 Figure 2.9 In the ‘Content’ page (admin bar at the top – or ‘Find Content’ in the shortcut bar) there is a tab for ‘Scheduled’ items. This will show you a list of content which has been scheduled and its publish and unpublish dates. Creating a Basic Page Publishing options As well as scheduling a page to (un)publish automatically, you can (un)publish it manually using the ‘Publishing options’ section. Unpublishing a page will also remove any menu links from the menu (they will automatically reappear when you re-publish the page). Figure 2.10 The last available tab is ‘Publishing options’. Pages are published by default. If you uncheck ‘published’ then you will need to be logged in to see the page, and it will no longer appear in the menu, if you have set a menu item. ‘Promoted to front page’ and ‘Sticky at top of lists’ will have no effect on basic pages. To unpublish a page: 1. Edit the page and choose ‘Publishing options’. 2. Uncheck ‘Published’ 3. Save Tips This is a good way to work on drafts of a page before publishing it on the website. Other editors who are logged in will be able to visit the URL of the page you have created but it will not be visible in the menu, or at all to non logged in visitors. If you want to circulate a draft to people without a log on, you can simply leave the page published, but uncheck the menu link option in Menu settings. A non logged in visitor can see the page, but there is no link to it from the website. The ‘Promoted to front page’ and ‘Sticky at top of lists’ options have no effect on Basic Pages. 23 Managing the Main Menu In This Chapter Re-ordering the menu Editing menu items 26 28 3 The top level items of the main menu are the section headings: ‘About’, ‘Blog’, ‘Events’, ‘Sermons’. The ‘Home’ page is reached by clicking on the logo. You can also switch the ‘Home’ page menu item back on so that the sections read ‘Home’, ‘About’… In the ‘About’ section there is also a menu block on the left which shows menu items beneath the ‘About’ section heading. If these second level menu items have items beneath them, they have a little arrow to the left of the menu item to indicate that the menu item has sub-items. They can either be expanded by default, or will expand when that menu item is chosen. The currently active menu item in the menu block is underlined to indicate where the user is within the section. You can re-arrange the menu items however you like, and use the same menu editing page to edit the individual menu items (for convenience - rather than editing them from within the page that they belong to). 25 Chapter Three Re-ordering the menu We learned how to create menu items within the form for creating and editing pages. What if you want to re-arrange the order in which these menu links are shown? To re-order items in the menu: 1. Click on ‘Manage main menu in the shortcuts menu bar. 2. Drag the menu item you want to move. Drop it in the place in the menu you’d like it moved to. 3. Save Figure 3.1 The ‘Main menu’ admin page that you get to from the ‘Manage main menu’ link. To drag menu items up and down, click and drag on the little cross shaped icon to the left of the menu item names. Remember that once you have rearranged them you must press ‘Save’ at the bottom of the form. Tips You can also access this admin page from the contextual link when you hover over the menu block. Choose ‘list links’ not ‘edit menu’. Different levels of the menu are show by indentation. If you drag ‘About’ (which has many sub items) you drag all the sub-items with it. Play around with dragging menu items, but remember not to press ‘save’ (you can get back to where you started just by reloading the page). You can also drag menu items left and right to change the level at which the item appears in the menu. Again, this is best discovered by playing with it. Make sure not to save your changes! 26 Figure 3.2 When you hover over the sidebar menu a little gear icon appears – this is the ‘contextual link’ icon. Click on the gear and the contextual links appear in a drop down (as in this image). Choose ‘List links’ to rearrange the menu items. The item ‘Edit menu’ will allow you to change the menu’s name – which is not what you want to do. Managing the Main Menu Figure 3.3 You can see that ‘Bek’s Group’ and ‘Water’s group’ are indented from ‘Networks’ and ‘Children’s Church to indicate that these third level menu items. They will not be displayed by default, unless ‘Networks’ is in the active menu trail (i.e. either ‘Networks’ or one of its sub pages is the current page). Figure 3.4 You can see that when ‘Children’s Church’ is the active item, the sub-items of ‘Networks’ are hidden. The little arrow to the left of ‘Networks’ now shows horizontally, indicating that there are sub menu items, but that they are not displayed. ‘Second level’ menu items are the ones that appear in the ‘About’ Menu block. ‘Third level’ links appear as sub-links (‘children’) to these items, and are not displayed by default unless their parent item is selected. As long as the user is in this parent’s part of the menu (i.e. the parent is in the ‘active-trail’) these sub links will show. You can change this behaviour to show them always expanded (see the following page). ‘Fourth level’ items are not displayed at all. They will however place a page within this section of the site and so ensure that the menu is shown on the left hand side, and their ‘parents’ in the active trail will be expanded. If you want a page to be in the ‘About’ section but not to show in the menu, you should still put it in the menu, but disable it (see how on the following page). If you don’t, ‘About’ won’t be in the active trail and the menu block on the left hand side will not be displayed. [If it’s naturally a 4th level link, there is no need to disable it – the user won’t see it in any case.] Second level links are only set up to be displayed within the ‘About’ section. To change this behaviour, you would need to add the ‘menu-block’ block to the sections in which you want to display this block. This is a reasonably advanced topic, and is covered briefly in chapter 12. 27 Chapter Three Editing menu items From the same menu admin page, you can also edit the individual menu links by clicking on the edit link. This is mostly the same as editing the menu item from the content editing page, with the exception that you can also choose whether to ‘show as expanded’. If you check this, the third level ‘children’ items will always be shown expanded. To edit a menu item: 1. Choose ‘Manage main menu’ from the shortcut admin bar. 2. Choose edit for the item you want to edit. 3. Change the title and description to suit. 4. Save Tips The title should be short but descriptive. The ‘description’ is text that will be shown when the user hovers their mouse over the menu item. Keep these short, but use them to provide a little more information about where the link will take the user. You don’t need to enable and disable menu items from this screen – you can do it from the main menu admin screen. Similarly, it’s much quicker to change ‘parent item’ and ‘weight’ by the drag and drop method of the previous page. 28 Figure 3.5 The ‘Edit menu link’ page. The options are the same as with the Menu link tab in the content editing page, except that you can choose ‘Show as expanded’ to force sub items to be shown even when their parent is not in the active menu trail. Managing the Main Menu When you disable a menu item, the menu item will disappear. The page is still there, though, and accessible to the user from the address bar (by typing in the URL). If you look on the main menu admin page, the ‘Home’ link is disabled. [The home page is obviously still there though – and accessible through clicking on the logo.] Try enabling this to see the effect on the main admin menu. Figure 3.6 The easiest place to enable and disable menu items is from the checkboxes on the main menu page. Remember that once you have checked or unchecked your options, these are not effective until you press ‘Save’ at the bottom of the page. To enable / disable menu items: 1. Choose ‘manage main menu’ 2. Check or uncheck to item you want to enable or disable. 3. Save Tips You can also delete menu items from this page. This will not delete the content – just the menu link that points to it. You will usually want to disable a link rather than delete it. Links can be added from this screen (the ‘+ Add link’ at the top). You would use this to add external links to the menu. It is very strongly advised not to do this, as users will expect links within your menu system to take them to pages within your site. Instead, if you want to add links to other websites, create a ‘links’ page, and list them there. 29 Articles (Blog posts) In This Chapter Create an Article Tags Image Summary Text Formats Comments Authoring Information Publishing Options 32 34 36 38 40 41 42 43 4 A blog (from ‘web log’) provides a stream of posts listed in reverse date order of publication. Your ‘wall’ on Facebook is just this. In fact it is very easy to set up a service to automatically ‘cross-post’ every article posted on the church website to a church facebook page (see Appendix 9 – ‘Feeding Facebook’). If you’re going to have a ‘Blog’ section on the website you must contribute ‘articles’ to it regularly. [Otherwise – switch it off, which is most easily accomplished by simply disabling the ‘Blog’ menu link.] Think about whether this is something you want to commit to. Don’t be distracted by the name ‘Article’ for this content type. You could post: Just a link to something you read online or a YouTube video you saw. Upload a file and provide a link to it i.e. minutes of a meeting. News from mission partners. A set of photos from an event. A leading article from the parish newsletter. A good thought you had today. Absolutely anything else you’d like to that keeps people up to date. 31 Chapter Four Create an Article You create an article just the same way as a regular page. To create an article: 1. Choose ‘Add content’ and then ‘Article’ 2. Fill out the Create Article form 3. Save Articles are very like basic pages, but have a couple of new fields – ‘Tags’ and ‘Image’ and are displayed in lists on the site rather than requiring a menu to find the article. Tags allow users to search for other articles where the content is related. The ‘image’ field allows a large image to be shown at the top of an article, while a smaller version of the same image is shown on the list of articles (‘blog’) page. Figure 4.1 Articles are shown in a list on the ‘Blog’ page of the website. You get to the main article page by clicking on the title. If the article is too long to be shown in full in the list, there is also a ‘Read More’ link which takes you to the full article. Articles are displayed in a list on the ‘Blog’ page, but the most recent articles are also displayed on the home page. You can control whether articles will show up on the front page or not. Articles are also displayed with information about their author and when they were published. The author name is the website username for that author – which is why people should use their full names when they create user accounts. The rest of this chapter talks you through these options. 32 Figure 4.2 Clicking on a ‘tag’ – either beneath an article, or in the list of popular tags in the side bar produces a page with a list of articles which share that tag. Articles (Blog posts) Editing Articles You edit (or delete) articles the same way as pages; you can also get to their edit page from the contextual links within a list of articles. Figure 4.3 In list view, you can go straight to the article editing page, by using the contextual link (hover over the article and then click on the gear that appears and choose ‘Edit’). The rest of the chapter will assume that you are within the ‘create article’ or ‘edit article’ form. To edit articles (like pages): 1. Find the article in the list on the ‘blog’ page. 2. Click on the title of the article you Figure 4.4 From the full article page, you choose the ‘Edit’ tab just as you would do for basic pages. want to go to the main article page. 3. Click on the ‘edit’ tab To edit articles (quicker): 1. Hover over the article and click on the contextual links gear widget. 2. Choose ‘Edit’ 33 Chapter Four Tags Tags are displayed under articles and if you click on them they bring up a list of all articles with that tag. The most popular tags are also displayed in a block on the right hand side of the blog pages. By tagging articles sensibly, you allow visitors to quickly find related content. You can have as many tags as you like attached to one article and tags can be one word (‘children’) or more (‘children’s work’). You should aim to keep them short. To use the tag field: 1. Write the first two or three letters of the tag you want to use in the tag field. 2. The autocomplete widget will look for all tags containing those letters. Select the tag you want from this list. 3. If the tag you want to use doesn’t exist yet, autocomplete will not find it. Just type the tag in. It will be available to autocomplete the next time you want it. Tips Keep tags general – the purpose is to categorise lots of posts together, not to describe the unique properties of one post. [‘2011 AGM minutes’ is very bad. ‘Minutes of Meetings’ much better.] 34 Figure 4.5 In the ‘Tags’ field once I have typed the ‘we’ of ‘website’, the dropdown provides me with a list of all tags including ‘we’. Selecting from this drop down ensures that you are choosing exactly the right spelling.You can see that this is separate from the ‘children’s work’ tag because of the comma after ‘children’s work’. You can have as many tags as you like for one article. Articles (Blog posts) Let the autocomplete widget do its work – don’t type the tag unless you have to. The tags: ‘Children’s Work’, ‘children’s work’, ‘Childrens Work’ and ‘Chidren’s Work’ are all different – you need them to be the same and the autocomplete widget guarantees that for you. If you want to have several tags you separate them with a comma (which means that a comma can’t be part of a tag). Once you’ve typed the comma, the autocomplete widget works again on whatever you type after the comma. 35 Chapter Four Image The image field allows you to upload an image to the article. This will be displayed as a large image in the middle of the page underneath the title and before the main body of the article. On the list pages, it will be displayed on the left and in a much smaller size. You can insert images into the main body of the article (we’ll learn about that in chapter nine), but they won’t be resized automatically by Drupal when it is displaying a list view rather than the main article. So it’s much better to use this image field (at least for the main image that accompanies the article). Drupal is very adept at handling images. You can upload an image of whatever size you like and Drupal will resize it for you. (There is more information about preparing images in Appendix 6.) The large image (for the main article) will be scaled down to a maximum of the full width of the article column and a maximum of the same height. It will usually look better to choose a wide (landscape) picture rather than a tall (portrait) one. 36 Figure 4.6 In the main article page, the image field of the post fills the full width of the content column. Figure 4.7 In the list view of articles, the same image is shown, but much smaller, and floated to the left hand side of the page, with text wrapping around it. Articles (Blog posts) To use the image field: 1. (First find a decent image for your article, and get it onto your computer.) Figure 4.8 To use the image field first of all choose a file. Once you have chosen the file from your file system you must then press ‘Upload’. 2. In the ‘Image’ field, press ‘Choose File’. This will bring up your own computer’s dialog for opening a file. 3. Find the image you want within your computer’s file system and press ‘Open’ or double click, or do whatever your computer requires for you to say ‘this one, please’. Figure 4.9 Once the image is uploaded you will see a thumbnail of it and have the opportunity to fill in the ‘Alternative text’ which will be used by screen readers. Remember that even at this stage the image is not yet attached to your article – you must still press ‘save’ at the bottom of the edit page to save your changes. 4. Back in the Article form, press ‘Upload’, and wait. When it is uploaded you will see a thumbnail version of the image appear in the form. 5. A new text field – ‘Alternate text’ has appeared. Enter a short description of the image here. 6. Save. Tips You must save the form. It’s easy to think that once photo has successfully uploaded you are done. You have uploaded the photo, but you’ve not attached it to this particular article until you press ‘Save’ at the bottom of the form. The image file must be either a .jpg, a .png or a .gif. If you’re uploading a photo it will almost certainly be a .jpg (or .jpeg). There are other formats, though, and if your file is in a different format you will need to convert it. 37 Chapter Four Summary If you look at the list of articles on the ‘Blog’ page you will see some of the article (a ‘teaser’) but not the full text (unless the article is very short). You get to read the whole article by clicking on the article title, or on the ‘Read More’ link at the bottom of the teaser. The text for this ‘teaser’ for the article is automatically created from the first few sentences of your article. You can override the default break point, though, and set the ‘teaser break’ at the exact point you choose. Do let the system create the teaser for you, but if it gives you something you’re not happy with then set this break point manually. The other thing that you can do is to override the teaser altogether and write your own ‘summary’ of the article. When people look at the list of articles, they only see the ‘teaser’ and if the first few sentences don’t work well as a ‘teaser’ for the whole article, it may be worth creating a separate ‘summary’ to describe it. The block on the home page is created from the first 360 characters of your article (trimmed to the nearest whole word). There is nothing you can do to change this behaviour on a per article basis. 38 Figure 4.10 The ‘Read more’ link indicates that in the list view you have only been shown a ‘teaser’ for the full article. By default this teaser is the first part of the article, but you can set a different summary altogether. Articles (Blog posts) To set the teaser break point: 1. In the main body of the article, place the cursor at the point where you want the break. Figure 4.11 In the toolbar of the text editor there is a little icon showing a dotted red line. This will insert a ‘teaser break’ in the article – shown by the double red lines in the body of the article. These double red lines don’t show when you are viewing the post. 2. Press the teaser break button in the text editor toolbar (the icon with black lines interrupted by a red dotted line). To write your own article summary: 1. In the body field, after the title, click on ‘Edit Summary’. A whole new text box appears. 2. Type the summary in this box. Figure 4.12 Next to the ‘Body’ field title is a link to ‘Edit summary’. Use this if you want the teaser text to be entirely different from the body text of the article. Tips Most of the time the system will create a perfectly acceptable ‘teaser view’ of the article for you. Don’t worry about the rest of the text editor options yet – we’ll cover these in chapters 8 & 9. Figure 4.13 Once you have clicked on ‘Edit summary’ you will see a new text editor window above the body window – this is the text that will form your ‘teaser’ and be shown in the article list view. If it is empty, the system reverts to using a trimmed version of the body text (either automatic or using the teaser break you have set). From this point on, I’ve stopped telling you that you must ‘Save’ the form as the final instruction. You do still need to press ‘Save’ for anything to be saved. 39 Chapter Four Text Formats For the sake of completeness, we’re going to cover all the options on the content editing form. After the ‘body’ field is the options to switch to ‘plain text editor’ – you could do this if you only want to type plain text and don’t want to see the rich text editor options. Beneath that is a ‘text format’ drop down – set by default to ‘Full HTML’. Drupal runs filters on the content before displaying it on a webpage. This is especially important to prevent attacks on the website. So it checks (for instance) that there isn’t any executable code in the content before it sends it to the web browser. This is generally a good idea. Editors and Administrators can use ‘Full HTML’, but people who are just logged in as ‘Authenticated’ can only use ‘Filtered HTML’ (they won’t be able to post YouTube videos for instance). Text formats and their permissions are fully customisable (‘Configuration’ – then ‘Text Formats’ in the Content Authoring box) but you should really forget all about them now they are set and be glad of a certain level of protection that is provided for you. As part of this filtering it is useful to note that any email addresses you publish on the site are protected from being spammed (see the description of the ‘SpamSpan’ module in Appendix 1). 40 Figure 4.14 Underneath the body field is an option to choose ‘text format’. Leave the format set to ‘Full HTML’. Text formats filter the text as it’s displayed to the website visitor. Articles (Blog posts) Comments Figure 4.15 Comments are open by default on articles. Once you mark them ‘closed’ people will be able to see the existing comments, but not add any more. If you were to choose ‘hidden’ then none of the comments for the post would be visible. Logged in users can add comments to articles. These display in a list after the article. Every content type can allow comments – only the ‘Article’ content type is set to do so. Also by default, every comment is immediately published (you can set the system to require administrator approval of every comment, but that seems a bit over-controlling). You can choose to ‘close’ comments for a particular article – either when you publish it (so there will be no comments), or after the comment thread has been open for a couple of weeks or so and you don’t want any further comments. Figure 4.16 In list view, the number of comments for a post is displayed underneath the post. If you click on ‘2 comments’ it takes you straight to the comments for the post. To close comments on an article: 1. Choose ‘Comment settings’ from the tabs at the bottom of the form. 2. Select the ‘Closed’ button. Tips If someone posts an inappropriate comment, then you should remove it. There’s a delete link immediately under each comment. Figure 4.17 Underneath the individual comments are links to delete, edit or reply to the comment. This is where you would come to delete comments that were inappropriate if that should prove necessary. 41 Chapter Four Authoring Information Underneath the article title is the author and date of publication. Usually this information will be right, but if you have published an article on someone else’s behalf you might want to change the authorship to their name. Similarly, the date of publication will usually be right, but if you created the article on the website and worked on it for a week or so (while leaving it ‘unpublished’ – so it wasn’t visible) you might want to update the publication date to the date when you published it, rather than when you first ‘created’ it. To change author and publication date: 1. Choose the ‘Authoring information’ tab 2. For the author, you must choose a user who is registered on the site. Let the autocomplete widget do its job – type in a couple of letters of the name and let the widget find your author. 3. For the date and time field, you must enter the date in exactly the format described. Tips You only need to enter the date part of the date and time (but be careful with the format). 42 Figure 4.18 The last of the horizontal tabs on the content editing pages that we will look at. The author must already be a registered user on the website so the autocomplete widget will find the author you are looking for. If you want to post an article by someone who is not yet a user on the website create the user first (‘+ Add user’ at the top of the ‘People’ page). Articles (Blog posts) Publishing Options Just like you learned in chapter two when we created a basic page, you can publish and unpublish an article using the ‘Publishing options’ tab. Articles are published by default, but you might want to uncheck ‘Published’ when you create an article if you want to work on a draft before letting it go ‘live’ on the site. There are two other options that we didn’t cover in chapter two: Promoted to front page Figure 4.19 The ‘From the Blog’ block on the front page shows the most recent two articles which have ‘Promoted to front page’ checked under the publishing options tab in their content editing page. Articles are ‘promoted to front page’ by default so you will want to deliberately uncheck this option for less important articles. This is checked by default for articles. It affects the behaviour of the front page. The front page will trailer the most recent two articles which have ‘Promoted to front page’ checked. If you post an article that you don’t want advertised on the front page, uncheck this option. Sticky at top of lists This is another flag that all content types have. It is meant for forums where you can keep certain posts ‘stuck’ to the top of a list. It has no effect on any content type within the church website. 43 5 Events What is coming up that you want people to know about? In This Chapter Create an Event Date Image & Description Options 46 47 48 49 A trip to a conference like New Wine? The beginning of a series of sermons? A special service (Harvest or Remembrance, Christmas or Easter?) A concert or other special event? An open meeting – or some parish wide gathering? Anything that has a date attached to it, and is coming up in the future can be entered as an ‘event’. Just as with articles, make sure that if you use this section of the website, you keep it well stocked with events. On the other hand, don’t list too many events. Save them for significant items that people will want to be reminded of or have bought to their attention. Listing every Thursday evening housegroup, or every Sunday service will be too much. 45 Chapter Five Create an Event Events are displayed on the ‘Events’ page in reverse date order (i.e. the next event coming up is shown first). The three next events are also shown on the front page. To create an event: 1. Choose ‘Add content’ from the shortcut bar. 2. Choose ‘Event’. The event form should be very familiar by now. It must have a title, and there is a body field and some options in tabs at the bottom of the form. Like ‘Articles’ you can add an image, which will be displayed both in the list view and on the full page for the Event. Like the Article ‘Image’ field Drupal will take care of resizing images to an appropriate size. Once you’ve uploaded an image make sure that it looks right both in the list and the page view. Figure 5.1 Events are displayed in a list by reverse chronological order of the start date on the ‘Events’ page. There are two new options: Event Location – to describe where the event will be. EVENT DATE – to describe when the event is happening. Location is a simple text field. You do not have to enter a location – in fact ask yourself whether you really need to. The ‘EVENT DATE’ fieldset is described on the facing page. 46 Figure 5.2 The next three events are also shown in a block on the front page. Events Date Events will be displayed up until the ‘Start date’ of the event. Once the event has begun it will not be displayed in the list of events coming up. You have two basic choices in the ‘EVENT DATE’ fieldset: Figure 5.3 The ‘EVENT DATE’ fieldset allows you to have a start date, an optional end date and optionally remove the time field by marking an event ‘All Day’. For a multi day event, mark the event ‘all day’ but choose different start and end days. Figure 5.4 While the event dates are entered in quite a non user friendly format in the event date fields (see fig. 5.3), Drupal takes care of displaying them in a much more user friendly fashion in the event listing. The ‘All Day’ check box. Is the event ‘All Day’ or does it have a particular start time? If you check ‘All Day’ it will remove the time field(s) and a single all day event will be displayed with ‘(all day)’ written after the date. All day is often better for multi-day events (like a holiday club – where you list it as 10th – 14th July) with the times for each day added to the description of the event. The ‘Show End Date’ check box. If you check this, new fields appear to show the end date and time. You will often want to display a date like ‘7pm – 9pm, August 3rd, 2011’. This requires you to have an end date – in this case the same date as the start date, but a later time. To enter a date: 1. Choose ‘All Day’ and ‘Show End Date’ as appropriate. 2. Click in the Date field. A date picker will pop up – use this to select the date. 3. Add the time in 24-hour clock form with two digits for the hour (‘09’ not ‘9’) and a colon separating the hour and minutes. 47 Chapter Five Image & Description The image and description (body) fields are familiar from the Article content type. Image Images are good. Do add one to events. You can find loads of images on Google or Flickr. Think creatively. The image field resizes images on the event list page and on the event page itself to a ‘medium’ image – the same as the articles list page. Landscape images will tend to look better. You can upload images bigger than 280x220 pixels (so take the rubric with a pinch of salt) but that is the largest size that will be stored on the server – it automatically shrinks it if you upload a bigger one. Event Description The principle description should be the event title. Feel free to leave the ‘Event Description’ field empty. The summary and teaser break option work just the same as they did for Articles. If there is a lot of information to explain about an event (parent registration forms, external website links, programme details) then think seriously about a separate ‘summary’ for this list page which will tell the visitor what will be included in the full listing. 48 Figure 5.5 The image for events is displayed in the same ‘medium’ image format in the full image post as in the list view (unlike the handling of the article image). Events Options The options in the tabs at the bottom of the page are all ones that we have already covered in considering pages and articles. Tips Figure 5.6 On the ‘Content’ page you can filter by ‘type’ to show only ‘Events’. From time to time you should come here so that you can delete the events which are no longer being displayed on the site because we have passed their start dates. From ‘Update Options’ it is possible to choose ‘delete’ and so delete every event you have checked in one go. Think carefully about the ‘Promoted to front page’ option within ‘Publishing options’. If the event is not especially important, or is something you are advertising for an outside agency you might not want it to appear in the list of the next three upcoming events. Unchecking this will stop it appearing on the front page. The ‘URL’ setting will automatically pick up the title and provide a URL in the form ‘/events/{title}’. If you are advertising the details in a newsletter you might want to customise the URL. The event is not deleted once it has begun – it’s just not shown on a list on the website. It is still available from its URL. For this reason and for the sake of tidiness, you should periodically delete events that have already occurred. You can find then by filtering on the ‘Event’ type from the ‘Find Content’ link in the shortcut bar. 49 6 Sermons In This Chapter Create a Sermon Event Description Uploading Audio Files to Download Speaker and Series Bible Reference Sermon Description 52 53 54 56 57 58 59 When I first started uploading recordings of sermons to the Marks Tey church website I was amazed that people actually listened to sermons on the web. But they did. People appreciated being able to listen again to a sermon that had made them think, or to catch up on part of a series that they had missed. People also listened to a sermon or two before deciding whether to visit the church. It’s important to have a system in place to upload sermons quickly after they have been preached. The sermon details (title, date, type of service) can be created a long way ahead of time, though. In fact it is a good idea to do this – not only to save time for the person uploading the audio on a Sunday, but also because the website will then be able to display information about the ‘Next Service’ on the front page of the website, and ‘Services coming up’ details in the Sermons section. Who will be responsible for publishing the details of all the sermons coming up? 51 Chapter Six Create a Sermon Sermons that are from today or before are listed on the ‘Sermons’ page in reverse date order (most recent first). The next three sermons that are coming up are listed in the right hand sidebar as ‘Service Coming Up’. The most recent sermon that has audio uploaded, and the next sermon listed as coming up are also displayed on the front page. If you click on a series or on a speaker you get a list of all sermons in that series or by that speaker. Figure 6.1 Sermons are displayed in a list on the ‘Sermons’ page. Clicking on a ‘Speaker’ or on a ‘Sermon Series’ will bring up a list of the the talks by that speaker or in that series. You can create a sermon as soon as you have a title and a date. To create a sermon: 1. Choose ‘Add content’ from the shortcut bar. 2. Choose ‘Sermon’. 3. Fill out at least the title and the date fields. Again, the form is familiar but there are one or two new options. There are tag fields for ‘event description’, the ‘speaker’ and the ‘series’; there are upload fields for the sermon audio and any accompanying files (these work very much like the upload an image field); and there is a ‘bible reference’ field. 52 Figure 6.2 The next service coming up and the most recent sermon are also shown in two blocks on the front page. These are both views of the same content type, which gives you an idea of the effectiveness of a separation of content and presentation. Sermons Event Description Figure 6.3 The ‘Event Description’ field is shown here as ‘Holy Communion’. Especially for the views of services coming up, this is a good way to show people what to expect. After the title and date fields (which work just like these fields in ‘Event’ – but there is no ‘To Date’ option) is the ‘Event Description’. This should typically be something like ‘Holy Communion’, ‘Morning Worship’ or ‘All Age Service’. It’s useful information for people looking to see what kind of service is coming up on Sunday. Because these will usually be the same names repeated, the field is a tag field. (They behave like the Article tags, but are in a different ‘Vocabulary’ – you won’t see Article tags offered by the autocomplete widget as possible options.) The tags aren’t displayed in a list anywhere, so just use the convenience of the autocomplete to save you having to type much. To enter an Event Description: 1. Type the first two or three letters of the description. 2. Allow auto-complete a chance to find it. Select it from the autocomplete drop-down. 3. If it’s not in the drop down then type the event description in. 53 Chapter Six Uploading Audio Audio uploads are much the same as an image uploads. Audio files are bigger than images though, so you have to wait longer. Once you’ve uploaded the audio do remember to press ‘Save’ at the bottom of the form. To upload audio: 1. Find the sermon, and go to the sermon editing page (click the ‘edit’ tab once you are logged in.) 2. Under ‘Sermon Audio’ press Choose File. 3. Select the mp3 file you are uploading from within your computer’s file system and double click or press ‘Open’ to select it. 4. Choose ‘Upload’ in the sermon editing form to upload the file. 5. Wait. Possibly a very long time if you have a large file or a slow connection. Drupal will not tell you how much is uploaded, but your web browser might (in Chrome for instance, there is a progress indicator at the bottom). 6. When the audio has been uploaded you will see an mp3 icon and the file name replacing the upload dialog. Do remember that although you have uploaded the audio, it’s not attached to this particular sermon until you press ‘Save’ at the bottom of the form. 54 Figure 6.4 The sermon audio field works just like the image uploading fields you have already seen. Choose the file you want from your local file system and press ‘Upload’. Sermons Tips Figure 6.5 In the page view for a particular sermon you will see the audio file you have uploaded displayed in and audio player, and with a ‘Download mp3 file of this talk’ link beneath it. You upload the audio; Drupal takes care of displaying it for you with an audio player and download link. There is a maximum file size of 10MB. If you try and upload a file bigger than this it will not be saved by the server (so you will have waited a long time for nothing.) 10MB is big enough for an hour of spoken audio at fairly good quality, so should be more than enough. The audio must be saved as an mp3 file. If your file is bigger than 10MB, you probably have not saved it in an appropriate format for the web. [A stereo recording from a professional field recorder at its highest fidelity setting would hit 10MB after about 20 seconds and a highest quality stereo mp3 file for playing on a decent hi-fi system might hit 10MB after about 4 minutes.] You can learn more about preparing audio for the web in appendix 7. If the sermons have already been ‘created’ then these are all the instructions required to upload the audio once it has been saved and formatted correctly for the web. Make sure that your Sunday sound people know how to: i. Save Audio on the church laptop. ii. Edit it, and save it as an appropriately compressed mp3. iii. Log into the website, and upload it to the appropriate sermon. 55 Chapter Six Files to Download As well as the audio file for the sermon (which has its own download link provided), you can attach as many other files to the sermon as you like. This is useful if there are sermon notes, or discussion notes for groups that week related to the sermon, or power point slides for a sermon. To upload files: 1. In the ‘FILES TO DOWNLOAD’ fieldset underneath the label ‘Add a new file’ press the ‘Choose File’ button. Figure 6.6 The ‘FILES TO DOWNLOAD’ fieldset. Files already uploaded are shown in the ‘FILE INFORMATION’ table. The link to the file will be the file name, unless you fill out the ‘description’ field in which case this value will be used instead. New files are added in the ‘Add a new file’ section which works just the same as image uploading or audio uploading have done in previous examples. The drag handles to the left of the existing file names allow you to rearrange the order in which these files are displayed (just as you did with menu items). 2. Select the file to upload from your file system. 3. Press Upload. Once it’s uploaded the file appears, along with the name of the file, and a new text field titled ‘Description’. 4. Type in a ‘Description’. This will be the text of the link to the file. Tips If you’ve uploaded more than one file you can use the drag handles (same as for dragging menu items) to re-order the files. To change the allowed file extensions go to ‘Structure’ in the main admin bar, then ‘Content types’, then under Sermons ‘manage fields’, then ‘edit’ the ‘Files to Download’ field. 56 Figure 6.7 Files to download are displayed immediately after the sermon audio player in both list and individual page views. Sermons Speaker and Series The ‘Speaker’ and ‘Sermon Series’ fields are like ‘Tags’ for articles. Each sermon lists the speaker and the series it is part of and these become clickable links which take you to a list of all sermons by that speaker or in that series. Figure 6.8 The speaker and sermon series are displayed in the list and full views of the sermons. The speaker is also listed in coming up services and the blocks on the front page. All of these act as links to a list of sermons that contain that particular term (just like tags work with articles). As with other tags, the important thing is to let the autocomplete widget do it’s work. To add a speaker or series: 1. Type two or three letters of the speaker or series. 2. Wait for the auto-complete widget to do its work and choose the option you want from the drop down list. 3. If the option you want doesn’t appear then type it in. 57 Chapter Six Bible Reference If there is a particular bible reference for a passage then add it in the ‘Bible Reference’ field. Keep quite strictly to the format described on the form. This will allow the display formatter to create a link to Bible Gateway for the passage listed. Figure 6.9 Bible Gateway provides a freely accessible online bible. 58 Sermons Sermon Description You can use the sermon description field for a description of the sermon or for a transcript of the sermon if someone has typed their sermon out and you have a copy of it. The summary and teaser break functions for this field work just the same as they do for Articles and Events. Options Figure 6.10 If you have a transcript of the sermon, consider copying and pasting it to the sermon description field as well as uploading the transcript as a file to download. People would generally like to be able to view something in situ before considering whether to download it. You will not want to change any of the options in the tabs at the bottom of the form. The ‘promoted to front page’ checkbox is not taken into consideration when deciding which sermons to display on the front page. 59 Rotating Images In This Chapter Create a Rotating Image The Image Linking to Content Text Overlay Managing Rotating Images 62 63 64 65 66 7 Many websites have a banner on the front page that rotates around a number of images. It’s a good place to promote aspects of the church’s life, or new content or a particular event or course that is coming up. 61 Chapter Seven Create a Rotating Image Rotating Images display in the banner on the front page. They can have text laid over the top of them, and they can link to other content on the website. To create a Rotating Image: 1. Choose ‘Add content’ from the shortcuts menu. Figure 7.1 The rotating banner on the front page is a great place to set the tone for the website; to communicate who you are as a church and to promote any special events or particular things that people should take note of. 2. Choose ‘Rotating Image’. 3. Add a title (which is just used administratively – you won’t see it). 4. Upload an image. 5. Optionally add a link and text overlay. You are very familiar with this form by now. The new element on this page is the ‘Link’ field. It will also help to keep to quite a strict rule about how to enter text for the ‘Text Overlay’ – the main body field for this content type. You will also learn how to change the order in which the Images are displayed in the slideshow. 62 Figure 7.2 The Rotating Image form is just the same as every other content editing form; but you should take especial care over the image that you upload, and any text that you include in the text overlay field to make sure that they meet the size and style conventions that are expected. Rotating Images The Image The image field is the same as the other image upload fields that we have come across. Figure 7.3 When you hover over the image, the title text will be displayed. Only set the title text for images which link to content. To upload the image: 1. Under ‘Image’ select ‘Choose File’. 2. Choose the image you want from your file system. 3. Press ‘Upload’. 4. It will invite you to add a title to the image. This text will appear as a tooltip when the visitor hovers over the picture. Tips Figure 7.4 In whatever image editing software you have, make sure that the image size is set to 600x300 pixels – so that you make sure that you get exactly the image you want displayed on the site. Otherwise the site will scale and crop the image you upload for you – which is easy, but doesn’t give you the level of control that you ought to be exercising for really important images. Do not add a title to the image unless you are going to set a link. If you’re setting a link, then use the title to describe where the link will take you (i.e. ‘Find out more about…’). If the image you upload is bigger than 960x400 pixels it will upload, but the system will resize it down to 960x400 before it is saved by the system. The final image will be displayed at 600x300 pixels. It is worth creating an image at exactly 600x300 pixels, or at least with a 2:1 aspect ratio before uploading it. See appendix 6 for more information on preparing images for the web. 63 Chapter Seven Linking to Content The image can be a link to other content on the website (or indeed a link to anywhere on an external website – but internal links are better). Especially if the image describes a part of the church’s ministry or a particular event, the image should link to that content. If you’re also setting a text overlay, you might choose to use that to explain to the visitor that they can click for more information. Since the text overlay is inside the image, you can use the text ‘click here for more information’ (or something like it) entirely safely – it won’t in fact matter where they click. To set the link: 1. Type the link in the link field Tips Assuming it’s an internal link, you only need the address after the main website address – i.e. you can link to ‘about’ – you don’t have to type in the full ‘http://www.marksteychurch.org/abo ut’. Don’t including a ‘/’ at the beginning or end. I add links by opening the page I want to link to in a separate tab of my browser and copying and pasting the contents of the address bar into the link field I’m updating. 64 Figure 7.5 The link field can contain either a full address (http://www… etc…) or just the internal link to another page within the website. You often want to use the short form of an internal link. Note that there is no ‘/’ at the beginning of the link address. Rotating Images Text Overlay If the text overlay field is blank you will just see your image. If there is text in the field, though, it will be placed over the top of the image with an opaque background. Figure 7.6 If you are going to use a text overlay, you should style the first line of the overlay as a ‘Heading 2’. Highlight the text and pull down ‘Heading 2’ from the style dropdown. If you use the text overlays it’s a good idea to have a clear style standard for how the text should be presented. If you add a text overlay, you should have a second level heading (‘heading 2’) for the text title, and then some descriptive text in the normal paragraph font. We’ll learn more about styling text in the next chapter, but, for now, here are the blow by blow instructions. Figure 7.7 The text is overlaid on top of the image with an opaque background. If there is no text in the ‘text overlay’ field, then no text and no overlay will be displayed – you will get just the image. To add a text overlay: In the Text Overlay box type a title and then press the ‘Enter’ key (the key for a standard paragraph return). In the second paragraph type a short description. Highlight the title with your mouse. Go to the styles drop-down in the text editor editing bar (which will be reading ‘paragraph’) and choose ‘Heading 2’ Tips When you’re expert at preparing images, you can incorporate text within the image and then stop using overlays altogether. 65 Chapter Seven Managing Rotating Images You can re-order the rotating images from within the ‘Manage Rotating Images’ link that comes up on the shortcut menu bar. This will allow you to quickly see which images are currently published, what their text overlay is and where they link to. From this admin page you can re-order the images and go to their main pages to edit the individual images and overlays. To re-order images: 1. Go to ‘Manage Rotating Images’. 2. Drag the images into the order you want. 3. Remember the order is not changed until you press ‘Save’ at the bottom of the form. To edit images: 1. Go to ‘Manage Rotating Images’ 2. Click on the title of the image to select its main page. 3. Click on the ‘edit’ tab to edit the image. 66 Figure 7.8 The ‘Manage Rotating Images’ link in the shortcut menu takes you to the ‘Rotating Images’ page as an overlay. This is a view of all your rotating images, published or not. The drag handles reorder the images, which will be displayed in the order they appear on this page. Rotating Images Tips When you re-order images remember to take into account any images that are scheduled to be published, and also put these in the appropriate place in the order. Figure 7.9 Clicking on a title in the managing images page gets you to the page view for the image (which the website visitor will never see). From here you choose the ‘Edit’ tab to edit the link or overlay for the image. Figure 7.10 Take full advantage of the ‘scheduling options’ to control when different rotating images appear. It’s worth having a set of at least three ‘standard’ images – say something about worship, children and networks. If there’s nothing else of note going on, then have these three published. If there are several other events and new content that you are promoting, then unpublish these. They will still be visible in the ‘Manage Rotating Images’ page and you can quickly see which are published. When you want to retire the special images, just set the standard ones back to ‘Published’. (In the ‘Publishing options’ tab of the content editing page.) Take full advantage of scheduling images. You can prepare an image to advertise Christmas in July – but schedule it not to appear until the beginning of November, and then to unpublish itself on December the 26th. If you use this option it might be worth scheduling something else to appear on the 26th to take the place of the image that you are removing. 67 The Text Editor In This Chapter Styles Other Formatting Links Media, Tables & Special Characters Pasting Content Teaser Breaks Other options 70 71 72 76 77 78 79 8 We’ve now covered all the content types, but you will have noticed that we skipped over the text editor options for the main body field of each content type (except that we briefly covered teaser breaks and second level headings). This is fine as long as all you want is plain text in that body field. What if you’d like to make something bold, or italic? Or maybe you’d like to make a heading bigger, or put things in a list – or a table? maybe you’d like to create a link, or insert an image or a video? This chapter will cover most of the text editor options, and chapter nine will fill in more detail about inserting media (i.e. images or video). 69 Chapter Eight Styles If you use a word processor like Microsoft’s ‘Word’ you will be aware that you can choose fonts and text sizes at will. It’s a better discipline in Word to set up a certain number of ‘Styles’ for your document and use those consistently throughout the document. In the text editor for the web site the font and font size options have been disabled, which means that you are forced to use ‘Styles’ to make larger bolder text for headings. The styles drop down in the text editor toolbar (the only drop down menu) allows 4 different levels of headings as well as selecting regular paragraph text. To Style text: Figure 8.1 The Style drop down allows you to apply styles (here – normal paragraph or various heading levels) to whatever text that you have highlighted. 1. Select the text. 2. Choose the style from the drop down. Tips Don’t use the ‘Heading 1’ style. The heading of your article or page will already be styled as a ‘Heading 1’, so further heading on the page should be sub-headings beneath that. When an image is selected, there are styles for the image – left, right or centred. More information in the next chapter on inserting images. 70 Figure 8.2 If you have selected an image rather than regular text, you are also presented with some appropriate styles for objects. The Text Editor Other Formatting Figure 8.3 Bold and italic formatting is available from the ‘B’ and ‘I’ icons. The rubber icon will clear existing formatting from the selected text. The other common formatting options that are available are to make text bold or italic. You can choose these from the editor toolbar. Sometimes there is formatting in the text you want to get rid of (you pasted it from another application without cleaning it first, or you have applied formatting and you can’t remember what you did). You can use the ‘rubber’ icon to clean formatting from the text. To apply formatting: 1. Highlight the text you want to format. 2. Press the ‘B’ button for bold, the ‘I’ for italic, or the rubber to clear the formatting. Tips You can use the shortcut keys that you are used to from other applications on your computer. Ctrl-B for bold, Ctrl-I for italic. You can also use Ctrl-U for underline, even though it doesn’t appear in the toolbar. The ‘enter’ key gives you a new paragraph. Sometimes you just want a new line. Use Shift-Enter for this. (Also works in Word etc…) 71 Chapter Eight Links You will often want to link to other content – either content on other pages of the website or pages on external websites. Figure 8.4 The link, unlink and anchor icons. To create a link: 1. Highlight the text that you want to become the link. 2. Click on the ‘link’ icon. 3. Type the address in the URL field. 4. Click ‘OK’ Tips If you click on the link icon without selecting some text first it will insert the address of the link as the linkable text. Figure 8.5 When you highlight some text and click on the link icon, a dialog box appears for you to fill in the link details. The default link type will be a URL of a webpage. Internal links don’t need the full address (see the section on links for rotating images). However, to use just an internal link (i.e. ‘about’) you need to choose ‘Other’ as the ‘protocol’ rather than ‘http://’. I find highlighting the address bar of the page I am trying to link to and copying (Ctrl-C) and pasting (Ctrl-V) the address into the link field the easiest way to create links. If you paste the whole link in (including http:) the editor dialog will take care of the ‘protocol’ for you – i.e. adapting to http: or https: or ftp: as required. 72 Figure 8.6 An internal link – here to the ‘About’ page, doesn’t need to start with ‘http://’ – to remove this, use the protocol ‘<other>’. The Text Editor Email Links You use the same link icon to create a link to an email address. To create a link to an email: Figure 8.7 If you choose ‘E-mail’ as the link type, you will get options for Email address, Message Subject and Message Body. You must fill out the email address for the link; you may fill out the message subject; you should avoid pre-filling the message body. 1. Highlight the text you’d like to become a link (i.e. ‘email me’), or just click where you’d like the link inserted (which will insert the full email address as this link). 2. Press the ‘Link’ icon. 3. Under ‘Link Type’ choose ‘Email’. 4. Fill out the email address. 5. If you’d like to pre-fill the subject line of the email do so. Do not fill out the message body (it will break the display of the email that is created by the antispam filter module). 6. Click ‘OK’ to create the link. Tips The module ‘SpamSpan’ protects emails on the website by converting them to a form that can’t be read by spam harvesters and then using javascript to reassemble the email inside the browser. You get to see the unreassembled version inside the text editor when you edit a post (this is not ideal). The only fix is to switch off the SpanSpam module (go to ‘Modules’ in the main admin bar, uncheck ‘SpanSpam’ and save at the bottom of the page). It still looks right when you view the post. 73 Chapter Eight Links to Anchors As well as linking to other pages you can also link to ‘anchors’ within the current page. This can be useful, for instance, for a page of FAQs where the questions are listed first, and each question links to the answer further down the page. Figure 8.8 The anchor dialog box. All you need is some text to become the anchor, and a name. To link to an anchor, you first have to create some anchors. To create an anchor: 1. Highlight the text you’d like to be the anchor . Figure 8.9 Once you have created an anchor the text editor shows an anchor icon to the left of the anchor text. This does not appear in the actual view of the page. 2. Click on the Anchor icon (the flag next to the link and unlink icons.) 3. Type in a name for the anchor. 4. Press ‘OK’ To link to an anchor: 1. Highlight text to link as before and press the link icon. 2. Under ‘Link Type’ choose ‘Link to anchor in the text’. 3. Select the anchor by Anchor Name 4. Press ‘OK’ Tips You must have text for the anchor – don’t try and create an anchor that doesn’t incorporate some text). 74 Figure 8.10 When you choose ‘Link to anchor in the text’ as your link type you get to select anchors by name or Element Id. Always choose to select them by name – a list of all the anchors you have created in the page appears in the drop down. The Text Editor To edit a link: 1. Right click the link you want to edit. 2. Choose ‘Edit Link’ To delete a link: Figure 8.11 If you right click an existing link, you can alter the link properties by choosing ‘Edit Link’. 1. Click anywhere in the link, or highlight any part of the link text 2. Click the ‘Unlink’ icon To have a link open in a new window: 1. Create a link (or edit a current one) 2. Choose the ‘Target’ tab 3. Choose ‘New Window’ 4. Press ‘OK’ Figure 8.12 The ‘Target’ tab of the Link dialog allows you to choose where the link will appear. By default (<not set>) browsers will open a link in the existing window. You will usually want to change the Target if you are linking to external websites which you would like to open in a new tab (‘New Window (_blank)’). Tips Links to new windows are sometimes useful when you’re linking to an external website. Internal links should never open a new window. You can essentially ignore the other ‘Targets’ – ‘not set’ is the default. Sometimes a ‘pop-up’ window, which allows you to set the size and properties of the new browser window, can be useful. You can ignore the ‘Advanced’ tab of the link dialog entirely. 75 Chapter Eight Media, Tables and Special Characters You can use the text editor toolbar to insert special content into your page. The three options are media, tables and special characters. We’ll cover media in the next chapter, but the basic process for inserting any of these things is the same. Figure 8.13 The media, table and special character icons. To insert special content: 1. Click on the media, table, or special character icon. 2. Fill out the dialog. 3. Press ‘OK’ Tables There are some things that you might like to present in tables. They are quite difficult to handle, and not fully explained here, so trial and error might be required. Tables are in rows and columns – so choose these in the dialog. Once you’ve created the table you can right click it to add rows or columns (or edit the properties), so don’t worry too much to begin with. Figure 8.14 The ‘table’ dialog. Consider setting the width to 620px. Tables properties can also be altered by right clicking the table to bring up the options. The main column of the website is 620 pixels wide, so it might help to set this as the width. Special Characters Just pick the character you want from the list in the dialog. 76 Figure 8.15 Simply click on the character you want and it is inserted into the text. The Text Editor Pasting Content Figure 8.16 The ‘Paste from Word’ icon. Figure 8.17 Paste your content inside the dialog window and hit ‘OK’. Often you will want to paste content from something else you’ve written (or perhaps an email someone has sent you for publishing on the web etc…). It would also be sensible if you were working on a long article to create it in a word processing programme and then cut and paste it to the article form on the website. There is no ‘autosave’ on the website. It’s important when we paste content from elsewhere that we only paste the content, and not the font choices – otherwise we lose the consistency of style across the website. For this reason the paste button on the website asks you to paste your content inside a dialog box, and then press ‘OK’ – so that it can clean out the formatting before adding it to the page. To paste content: 1. Press the ‘Paste from Word’ icon 2. Paste your content inside the dialog box (Ctrl-V) 3. Press OK Tips Ctrl-V is set up to perform the same procedure inside the editor. So skip the above steps altogether and use Ctrl-V directly instead. 77 Chapter Eight Teaser Breaks We covered the teaser break option in chapter 4 on Articles. For completeness they’re described here too. Content items are often presented in a page view – with just that item, or in a list view (a ‘teaser’ view) with lots of items in a list that link to their full page view. In the teaser view, only the first few sentences of the body field are displayed. Drupal chooses this break point for you. You can control it with the ‘Teaser Break’ icon. To insert a teaser break: 1. Place the cursor at the point where you want the break. 2. Press the ‘Teaser Break’icon. Tips If the Teaser Break is not at the beginning of a new paragraph, Drupal will create a new paragraph for you. 78 Figure 8.18 The teaser break icon. Figure 8.19 The teaser break is displayed in the editor as a double dotted red line. This doesn’t appear in the post on the site – it’s just shown to you as a guide. If you insert a teaser break mid paragraph it will end the existing paragraph and start a new one. The Text Editor Other Options We’ve covered most of the options in the text editor toolbar. From left to right, the remaining ones are: Source Figure 8.20 The source view can be essential for adding in objects like YouTube videos, and is helpful if you know a bit of html code. Don’t let it put you off – you generally will not want to use it. This gives you the HTML code view. You don’t usually want to see that so don’t press it. Spelling Auto spell check is on by default. You can disable it using the ‘ABC’ icon. If the spell check doesn’t recognise a word it will underline it with a red squiggly line. Right click the misspelled word to bring up suggestions as to what you might have meant. Undo / Redo Figure 8.21 You can switch the spell checker off or change its language option. Figure 8.22 The undo and redo icons. Undo / Redo. you can also use the standard Ctrl-Z and Ctrl-Y options for this. Lists Highlight a number of paragraphs and press either numbered or bulleted list to get the paragraphs presented as a list. Figure 8.23 You can choose numbered or bulleted lists. Full Screen The far right icon will allow you to edit in full screen mode. I don’t recommend this. Figure 8.24 The full screen icon. 79 9 Media In This Chapter Inserting Media Images Video Files Audio 82 83 88 89 90 Web pages would be pretty boring if they were just plain text (even with a few tables, lists and special characters thrown in!). An article or news story may get away with just the main article image to enliven the page, but the basic pages on the site will need some images to brighten them up and help you to communicate effectively. The insert media button inserts images for you. It will even help you with the image size, so that you can simply upload an image from your digital camera, choose an appropriate size to display it, and the Media module will take care of the rest. Getting video or audio or text files onto the website is a little more complicated. Hopefully by now you are sufficiently fluent in the regular workings of Drupal to take these slightly more advanced topics in your stride. 81 Chapter Nine Inserting Media When you want to insert an image in your post you choose the ‘insert Media’ icon from the toolbar. The Media dialog that appears lets you upload a file to the website. If this is an image file, it can then be immediately displayed in your post. If you change to the ‘Library’ tab you see a list of all the files that you have uploaded to the website. You can choose one of these rather than uploading a new file. You can also upload audio files or text files. Media will not display these in your post, but this chapter will talk you through the somewhat painful way in which you can achieve that, as well as explaining how to embed video files. Tips The Media module is new this year. It promises to be quite the best way of inserting media into Drupal sites. At the moment it is quite a long way off being as useful as it promises. It is worth watching for new versions of the module that will improve usability (the hope would be access to as many ‘image styles’ as you chose, automatic YouTube embedding and nicely formatted file links, and audio files having the audio player displayed with them). 82 Figure 9.1 The insert media dialog. You can upload a new file here, or switch to the ‘Library’ tab and pick a file from the library. Media Images The most basic procedure is to insert an image in your post. To insert an image: 1. Place the cursor where you would like Figure 9.2 Once you have uploaded an image, the options for embedding it appear. Choose the appropriate size and then press ‘Submit’. the image to be inserted. 2. Click the ‘Add Media’ icon. 3. Press ‘Choose File’ and select the image that you want to upload from your computer. 4. Press ‘Submit’ to upload the file. Once the file is uploaded a new dialog box will appear. 5. Choose the ‘format’ you want to display the picture in – if you want your original image to be displayed just as you uploaded it, choose ‘Original’. 6. ‘Description’ – ignore this; it doesn’t in fact do anything. 7. Press ‘Submit’ and the image will be displayed in your post. Tips Rather than uploading an image, you can switch to the ‘Library’ tab and choose an image that you have already uploaded. 83 Chapter Nine Image Sizes One of the current ‘clunky’ aspects of the Media module, is that the format options don’t directly correspond to the image styles that have been set up on the site. However, the various options that have been set up to work like this: Large Large (the default option) maps to the ‘Large’ image style – this scales the image to the full width of the main column (620 pixels) if it’s a landscape image, or that height if it’s a portrait image. Original Insert the picture just as you uploaded it. It’s definitely worth working out how to resize your images to the size you really want in the post before you upload them (see Appendix 6 for more help). Preview Preview maps to the ‘medium’ image style. This scales to 220 pixels on the largest dimension. This will be the most useful setting if you have not resized your image before uploading it. Link Link maps to the ‘thumbnail’ image style and produces a small image (max. dimension is 100 pixels) that is appropriate for using as a link. Tokens Please ignore 84 Figure 9.3 The format options for the image you are inserting. The default is ‘Large’, but if you have prepared your image right before uploading it, you will want to choose ‘Original’. Media Image Layout Figure 9.4 When the image is first inserted it will appear inline with the text on the page. Usually you will now want to choose for the image to go left or right with text flowing round it, or centred with the text above and beneath. By default, the image is inserted into the post ‘inline’. This means that it behaves just like a character of text and will take its place among other text characters. This is very rarely how you want it to behave (occasionally for very small images this is just what you want). More often you will want the text to flow around it, or you’ll want the image displayed in it’s own space with text above and beneath it. To change the layout of the image: 1. Click on image in your post to select it. 2. From the styles dropdown in the text Figure 9.5 With the image highlighted select an image style from the style drop down. editor pick ‘image on left’, ‘image on right’ or ‘image centred’. Tips ‘Image on left’ and ‘image on right’ flow text around the image. ‘Image centred’ centres the image, and puts text above and below it. Figure 9.6 Choosing ‘image on left’ has kept the image on the left, but now the text flows to the right of it. When you click on an image you see drag handles on the sides and corners. You can drag these to make the image larger or smaller (not in Chrome – works fine in Firefox). If you’re going to drag, then pick a corner so that you preserve the aspect ratio of the image. It is better to upload the right size of image in the first place, or use one of the predefined image sizes described on the facing page. (For why, see Appendix 6). 85 Chapter Nine Image Properties If you right click on an image in the editor window, you can choose the ‘Image Properties’ dialog. In the main tab (‘Image Info’), you have the following options: Figure 9.7 Right clicking the image allows you to choose the ‘Image Properties’ dialog. URL This is the address of the image. Don’t touch this. Alternative Text This is the ‘Description’ that you should have been able to add when you originally inserted the image. It is used for screen readers, and so it is recommended as good practice to include this. Width and Height If you press the ‘refresh’ icon to the right of these fields the current width and height will be filled in. You can change the width and height that the image is displayed here. The aspect ratio is locked (so if you change the width, the height will be changed to an appropriate height) and you can unlock this by pressing the padlock icon. This gives you more control over the image size than just dragging the image handles, but should also be avoided for the reasons described in Appendix 6. Border For a thin black border around your image enter ‘1’ in this field. ‘2’ will give you a strong border (the number you enter is simply the thickness of the border in pixels). 86 Figure 9.8 The image properties dialog allows you to set the alt text, and alter the width and height. You should not use the options here for setting alignment – do that by styling the image as described on the previous page. Media HSpace and VSpace This adds an equal amount of space to the left and right, or top and bottom of the image. This is not usually a good a way of controlling the image layout. Alignment This is an inferior way of aligning an image to left or right and flowing text around it. Use the style dropdown options in the main text editor instead. Figure 9.9 The ‘Link’ tab allows you to use the image as a link. The next tab (‘Link’) is much more likely to be useful to you. It’s here that you set a link for the image. This works in much the same way as the regular link dialog box for text links. URL The address that you link to. It’s not as sophisticated as the options in the ‘Link’ dialog, but the same tip applies – copy the address from the page you want to link to, and paste it in here. Target The default – ‘<not set>’ will open the link in the current window. To open the link in a new window, choose ‘New Window’. You should ignore the final tab (‘Advanced’). 87 Chapter Nine Video Video files are huge, and all but the very largest organisations use a service like YouTube (or other services like blip.tv and vimeo) to host their videos, and then ‘embed’ them into their website. To embed a YouTube video: 1. Find the YouTube video you want to embed. (On YouTube) 2. Press: ‘Share’ underneath the video and then ‘Embed’ to see the code you need to embed in your page. Figure 9.10 Underneath any video on YouTube, you can click ‘Share’ and then ‘Embed’ to pull up this embed code. You need to copy it and paste it into your post at the point where you want the video to appear. 3. Copy the embed code (Ctrl-C) 4. In the text editor for the page where you want the video, press ‘Source’ to get the code view of the page. 5. Paste the embed code where you want the video to appear. Tips If you set the Custom width to 620px, the video will be the full width of your text column. Don’t be afraid of the code view. It’s just the text on your page, plus a pile of formatting tags – (like <p> </p>). Try putting the video code after a closing </p> tag. Other video providers (blip.tv, vimeo) also provide embed code, and you follow the same principle as described for YouTube on this page. 88 Figure 9.11 You must embed the ‘embed code’ in the ‘Source’ view of the text editor. Don’t worry too much about the various items that you see here. Start a new line at what seems an appropriate place and paste the YouTube code. You will be able to see in the normal view if you’ve got it right. Media Files Sometimes you will want to post files to the website - a copy of some minutes or notes, or a sign up form for example. The best format for text files on the website is a pdf, because the reader is free in all operating systems and the file will look the same. If it’s a file you want people to be able to edit, either Microsoft Word’s ‘.doc’ format, or the ‘Rich Text format’ – ‘.rtf’ are useful. Be aware that not everyone will have Word though. Figure 9.12 Once you’ve uploaded a file don’t try to embed it – instead go to the library tab and right click the file name and use the options to ‘Copy Link Address’. You can use the ‘Add Media’ dialog to upload your file to the website, but you won’t be able to use it to insert the file. So we’ve got a two step process – upload the file, and copy the address which will link to it, then add a link to that file. To upload a file: 1. Press ’Add Media’. Figure 9.13 If you do choose ‘Submit’ and then choose the ‘preview’ format, Media will insert an image of a file icon for you (but you still need to insert the link manually). Here I’ve added the file name after the icon. 2. Upload your text file in the same way that you would an image. 3. (Don’t click ‘Submit’. It will just insert the file icon.) 4. Click on the file name to go to the Figure 9.14 Highlight the icon and the text, click on the link icon, and paste the link into the URL field. webpage for that file, and copy the address from the address bar. OR – (much easier) right click the file name and choose ‘Copy link address’. 5. Click ‘Cancel’ to return to the text editor. 6. Create a link (see chapter 8) and use Figure 9.15 You now have a nicely formatted file link, where clicking either the icon or the text will link you to the file. the address you copied in step 4 as the URL. 89 Chapter Nine Audio Audio on the site is well presented when you upload a sermon with a media player that will play the sermon on line as well as offering a download link. You can’t do this automatically inside the text editor, but you can do it manually. Figure 9.16 You might be happy to just link to the audio file – but with a little work it is also possible to include an audio player in your post. To insert an audio player: 1. Press the ‘Add media’ button, and upload an audio file (.mp3) from your computer. 2. (Don’t press ‘Submit’ to insert the file – Media will just insert the file icon.) 3. Click on the name of the file to take you to the web page of the audio file, and then copy the address of the file from the address bar. OR – right click the file name and choose ‘copy link location’. 4. Now press ‘cancel’ to get you back to the text editor. 5. Switch to ‘Source’ view. 6. At the point where you want the audio player, type the following: ‘<audio id=”audioplayer” src=”your_file.mp3”></audio>’ replacing ‘your_file.mp3’ with the address you copied in step 3. The text is all on one line, without the first and last apostrophe, and with a single space between ‘“audioplayer”’ and ‘src=’. 90 Figure 9.17 You need to create your own ‘embed code’ to put into the source view of the website (just like you did with the YouTube video – but you write the code). It’s as simple as copying the code on this page, and inserting the audio link address that we copied on the previous page inside the src attribute. Media To insert the download link: 1. Write the text for the link (i.e. ‘download mp3 file’ or something like that) in the editor. 2. Highlight that text and click the link button. 3. For the URL enter the address that you used inside the <audio> tags for the player. Tips If you are adding a link, and don’t have the URL in your clipboard, you can easily find it from the ‘Library’ tab of the ‘Add Media’ dialog. If you use the ‘Add Media’ dialog to select the file (choose ‘Submit’) and then choose ‘Preview’ for the file format, then press ‘Submit’ it will insert a file icon. This is also useful for other links to files, and is one instance when you do want the default inline display for images. The process for inserting video, file links and audio is quite complicated, but if you follow the step by step instructions you will find it easier than it looks. Embedding an audio player is exactly the same as embedding a video player, except that you have to write the embed code by hand rather than cutting and pasting it from YouTube. 91 Managing Content In This Chapter Editing Content Finding Content Filtering by Status and Type Bulk Operations Searching for Content 94 95 96 97 98 10 You have by now learned pretty much everything that you will do on a day to day basis to add content to your church website. You have already created and edited pages, articles, events, sermons and rotating images as well as learning about how to manage the menu in the ‘About’ section and all the formatting options provided by the text editor. This chapter broadens your knowledge of how you go about editing and looking after content that already exists. 93 Chapter Ten Editing Content You already know how to edit content that is currently displayed on the website: From the main page for the content choose the ‘edit’ tab. From the list view, click on the contextual options gear and choose ‘edit’. For rotating images choose ‘Manage Rotating Images’ and click on the title to bring up the full page for each item of Rotating Image content. What about events that are no longer displayed because they have passed? Or articles or pages that are not displayed because they are not published (either because they are scheduled not to be published yet, or you have manually set them to unpublished)? How about finding an article that was published some months ago? Do you have to trawl through pages of articles to find the one you are looking for? What if I want to permanently delete 17 expired events? Do I have to do them one at a time? Easy ways to handle all these questions that relate to managing the content on the site are covered in this chapter. 94 Managing Content Finding Content All of the content on the site is listed in the main ‘Content’ admin page (in the shortcut menu it’s listed as ‘Find Content’). It’s listed by reverse order in which it was last created or edited, so the items that you most want to look at are listed first. Figure 10.1 The ‘Find Content’ link takes you to the main Content page, which displays a list of all the content on the site. The tabs at the top allow you to view comments or Media on the site in the same way. The ‘Scheduled’ tab lists items that have publishing dates scheduled for them. You especially want to go here to look for content if it is not published (with the exception of rotating images, you won’t find it anywhere else). To find content: 1. Click on ‘Find Content’ from the shortcut bar. 2. Click on the title to go to the main page for that piece of content; click on ‘edit’ to edit the content; or click on ‘delete’ if you want to go straight to deleting it. Tips The tabs at the top of the page give you quick access to a list of all comments on the site, to media items uploaded to the site and to the list of items scheduled for publishing. These work in a very similar way to the main list of content items. 95 Chapter Ten Filtering by Status and Type If the item that you are looking for is not one of the most recently created or edited items, you might need to thin the list down a bit before you trawl through it. You can filter either by Status (most useful for looking only at unpublished content) and by Type (i.e. to see just pages, or just articles etc…). To filter the list of Content: 1. Choose status or type (or both) from the drop downs. 2. Press ‘Filter’ Tips Once you have applied a filter, Drupal will remember it (even next time you visit this page). Once a filter is set, you must press ‘Undo’ to clear it. 96 Figure 10.2 To filter by status or type, you choose the option you want from one of the two drop downs and then press ‘Filter’. Managing Content Bulk Operations While you can edit every item in the ‘Find Content’ list individually, sometimes you will want to do the same thing to several at the same time. Figure 10.3 Checking items on the content page allows you to perform a bulk operation on all the items you have checked. The most useful of these will be to allow you to delete several items of content at one time. The most common thing that you will want to do is to delete a group of items, but there are also options to bulk publish or unpublish, set ‘promote to front page’ preferences or to update the URL alias (useful if you have changed rules by which these are created). To perform a bulk operation: 1. Check every item you want to perform the action on. 2. Choose the action you want to perform from the ‘Update Options’ dropdown. 3. Press ‘Update’. Tips Figure 10.4 The media ‘Operations’ options don’t appear until you have selected at least one item. In the list of Media the bulk operation options do not appear until you have checked at least one item in the list. You can view media in either list view of thumbnail view (using the icons at the top right of the media page). The thumbnail view will probably be the most useful. 97 Chapter Ten Searching for Content You will not often need to search for content. Because you can find most of the content readily on the site, and easily see a list of unpublished content from the ‘Find Content’ link, you will usually have no problem getting straight to the content you want to view or edit. Sometimes there may be a piece of content that you cannot readily find, but you can remember a word or two from. There is no site-wide search form, but once you are logged in as an administrator or editor, there is one available to you in the dashboard. To search for content: 1. Choose ‘Dashboard’ from the top admin menu. 2. Type in your search term (one or more words) into the ‘Search Form’ box. 3. Press the ‘Search’ button. 4. A list of results comes up – click on the title to take you to the page for the relevant piece of content. 5. If you didn’t get the result you wanted you can search again from this page. Tips You can go straight to search from the URL ‘/search’ – this redirects to ‘search/node’ (node is the term for a piece of content in Drupal). 98 Figure 10.5 There is a search form at the top right of the ‘Dashboard’ page. Figure 10.6 A more advanced search option is shown at the URL ‘/search’. This is the page that the results from the dashboard search box are shown in, - so you will get here eventually in any case. Managing Content On the main search page, there is also an ‘advanced search’ option that allows you to only search in certain content types, and choose the rules by which you search for content. You need to click on ‘Advanced Search’ to make these options visible. Figure 10.7 If you press on the ‘Advanced Search’ link it will bring down some options for restricting the search to particular content, or using different combinations of words. There’s a tab at the top of the search page for ‘Users’. Once there are a lot of users on the site this is a good place to go to search for a particular user. You can go straight to it at the address ‘/search/user’. The dashboard also contains a list of your most recent content, and, for administrators, a management menu. Please use these options if they are helpful to you. 99 Term Descriptions In This Chapter Where you see Term Descriptions Editing the Descriptions Description URLs 102 103 104 11 We have already come across the ability to tag articles with whatever ‘terms’ we like. When you click on the tag (or ‘term’ to give it a generic word that will cover speakers and sermon series too) it will bring up a list of Articles with the heading: ‘Articles tagged: {your term name}’. The same works for sermon series and for speakers. If you click on the name of a sermon series, you get a list of all the sermons in that series with the title: ‘Sermons in the Series: {your series name}’. What you haven’t discovered yet is that for any of those terms – tags, series or speakers, you can also add a description. This gives you the opportunity, for instance, to provide a brief bio for a speaker, or to give a short introduction to a sermon series. 101 Chapter Eleven Where you see Term Descriptions You find term descriptions on the list page for the term, immediately under the page title, and before the list of content. If you are an administrator you can also go straight to a list of term for a particular vocabulary, and edit the terms and their descriptions directly from there. To list terms in a vocabulary: Figure 11.1 The ‘term page’ for the speaker ‘Ian Scott-Thomson’. Between the title (‘Sermons by: Ian Scott-Thompson’) and the list of sermons is a term description – here simply: ‘Ian is the Rector’. This term description can be as long as you like. 1. Go to ‘Structure’ in the main admin bar. 2. Choose ‘Taxonomy’. 3. Choose ‘list terms’ for the vocabulary that you want to see the terms for. 4. If you choose ‘edit’ for the term you want you will see the term description in it’s editing form. Tips On the first taxonomy page (which lists vocabularies) if you choose ‘edit vocabulary’ you will see the vocabulary title and a description. It’s the description that is used in the title of the list page (or ‘taxonomy term page’). Don’t change the titles of the vocabularies; but if you want to change the titles of the list pages, do feel free to edit the ‘description’ field. Figure 11.2 The ‘Structure’ options that are presented when you click on ‘Structure’ in the admin bar. Figure 11.3 Choosing ‘Taxonomy’ brings up this list of ‘Vocabularies’. 102 Term Descriptions Editing the Descriptions You edit a term description just like you edit any piece of content on the site. The easiest way is to simply click on the ‘edit’ tab above the title of the list page. Figure 11.4 Here I have chosen to ‘list terms’ for the ‘Speaker’ vocabulary. You see a list of every speaker that has been added as a term in the ‘speaker’ field of sermons. From here you can edit the term directly. To edit a description: 1. Go to the term page which lists items that belong to that term. (I.e. by clicking on that term wherever a post is tagged with it.) 2. Click on the edit tab at the top of the page. 3. Fill out the description (just as you would for a page or article). 4. Press ‘Save’ at the bottom of the form, as per usual. Tips Figure 11.5 Choosing to ‘edit’ Ian ScottThompson, I have brought up the term editing page, which looks remarkably similar to a regular content editing page. I can of course get here directly by choosing the ‘edit’ tab on the term page (see fig. 11.1). You can of course edit term descriptions straight from the list of terms page described opposite. You might want to take advantage of the ‘add terms’ option on the vocabulary page. Although you can add these in as you go, it might be worth adding in a list of speakers or a sermon series from this link, and then creating the descriptions there and then. 103 Chapter Eleven Description URLs Each of these list pages has a URL (so you can bookmark the page which lists the sermons of your favourite speaker…). These URLs are automatically generated and are generally things like ‘blog/{term-name}’. If you want to change them, you simply edit the URL in the same way that you did for basic pages. To edit the URL: 1. Go to the term description edit page. 2. Under ‘URL PATH SETTINGS’ uncheck ‘Automatic alias’. 3. Type in a new ‘URL alias’. Tips While you can change these, you are strongly advised not to. 104 Figure 11.6 The rest of the taxonomy term editing page does not have all the options that content editing pages have. It has a ‘Relations’ option (which we won’t use) and the ability to change the URL alias for the page (which works the same as with the URL alias for content items). Term Descriptions You have now reached the end of the topics which an editor of the website needs to be able to understand and have a good grasp of. Well done. Hopefully you are now sufficiently familiar with the editing tasks you will need to achieve in Drupal that you will only need to refer back to this manual occasionally as a reference. The remaining topics are for administrators only. 105 12 Blocks In This Chapter What is a block? How blocks are displayed Understanding the Context Editing blocks Adding a new block 108 109 112 114 115 So far we have spend the whole manual looking at managing the content which appears in the ‘main content area’. There are other elements on the page, though. The ‘List of Recent Articles’, or the ‘Sermons Coming Up’ list on the sermons page; the lists on the front page of recent articles, events coming up and sermons coming up. All of these things are ‘blocks’ of content, and this chapter explains what they are, how they are displayed and how you can control and edit them. 107 Chapter Twelve What is a block? A block is a reusable piece of content that can be displayed on a number of different pages on the site. For instance the footer text giving the address of the church is a ‘block’ of text which is reused on every page. Most blocks are just used on a few pages (or one page). The menu block is used on every page in the ‘About’ section. The front page blocks for the rotating images, recent articles, events coming up, next service and most recent sermon are only used on that page. Blocks can simply be static text (i.e. the two footer blocks) or they can be dynamic content (i.e. the menu block – which dynamically presents new items in the menu as you add them, and also responds to context by expanding only items in the ‘active trail’). Many blocks on the site provide a ‘View’ of different content items on the website (i.e. all the front page blocks). You’ll learn more about ‘views’ and how to edit them in the next chapter. While dynamic blocks (views and the menu block) need to be provided by modules, blocks of simple text can be written by you very easily, and using the principles in this chapter displayed on exactly the pages of the website that you choose. 108 Figure 12.1 In this sidebar region there are three ‘blocks’ one on top of the other. The first two are produced by the ‘Views’ module; the last one is a block of static content – with an image inserted into the text editor field which links to Facebook. Blocks How blocks are displayed Figure 12.2 The contextual link for this block allows you to go straight to editing the view, or to configure the block. Every page on the website is built from a template which pulls into the page the various pieces of content that the page is made up of. Each of the areas of the page where you can insert content is called a ‘region’ and any region can be assigned as many different ‘blocks’ as you like (including the main content for the page) in whatever order you choose. You clearly want to leave the ‘main content’ for the page in the ‘main content’ region – but you can add a ‘block’ before or after the main content, and add as many blocks to as many different regions on the page as you like. Figure 12.3 Choosing the ‘Configure Block’ option, we can see that the ‘Popular Tags’ block is not set to display in any region of our theme. Why can we see it on the website? It is being displayed by the ‘Context’ module, not by the ‘Blocks’ module. If you create a block that you want to be controlled by the Context module make sure that it is not also being set to be displayed by the Blocks module. The decision to display a block on a particular page (or not) is made by two completely separate modules – the core ‘Block’ module, and a contributed module called ‘Context’. If either module wants to display a block it will get displayed, but ‘Context’ has more powerful options for choosing groups of pages, so most blocks on the site are not assigned a region by the ‘Blocks’ module, but by the ‘Context’ module. If you choose ‘Configure Block’ as a contextual link, and see that the block is assigned to Region – ‘None’, then you know that it is being displayed by the Context module and not by the ‘Block Module’ – you will need to understand and edit the context to change the way that the block is displayed. 109 Chapter Twelve Regions The page regions that you should use on the website that appear on every page are the following: Content The main content region (main column) on each page. This is switched from the left hand to the right hand side of the page by the ‘About’ Context, but is the same region. Sidebar first This is the sidebar on the page and is probably the region that you will assign any new blocks you create to. Footer The left hand region in the footer (which contains the church address). Footer Second Region The right hand region in the footer (which contains contact details). The following regions are only in use on the front page. [They can be used on any page, but it is very strongly recommended not to do this.] Image Rotator This region is exactly the right size to hold the image rotator block and is positioned at the top right of the main area of the page. Panel First Region, Panel Second Region, Panel Third Region These three regions are three columns that are displayed side by side underneath the main content region. 110 Figure 12.4 Choosing ‘Demonstrate block regions’ from the top of the Blocks page shows you where all the active regions are on the page. Blocks The final regions are standard Drupal regions, and have been left in the church website theme for the sake of compatibility with modules that might assume they exist. None of these are used to display blocks on the site. Header This is output straight after the website logo. Figure 12.5 The Blocks displayed by the blocks module can be seen by choosing ‘Structure’ and then ‘Blocks’ to pull up the main Blocks page. Sidebar second This is placed immediately after sidebar first – so will simply extend the sidebar downwards. Highlighted and Help These two regions are output in the main column immediately before the main content tabs and title. Figure 12.6 Also in the ‘Structure’ options is ‘Context’. Context will determine when and where most of the blocks on the site are displayed. [Apart from these regions, the page template also outputs the logo on every page in the header, along with the main navigation menu and a secondary menu (which is at the top right of the header when you are logged in) and a ‘messages’ variable, which displays full width just underneath the header (to tell you that you have successfully saved changes for instance). The tabs for editing the main content and the page title are also directly output by the template. The image at the right of the header, and the coloured background of header and footer are part of the template itself.] 111 Chapter Twelve Understanding the Context Almost all the blocks are controlled by the ‘Context’ module. [The exception is the two blocks which are displayed in the footer region.] A ‘Context’ defines a particular set of pages within the site – i.e. each ‘Section’ of the site has been set up as a different ‘Context’. The ‘Context’ module allows us to define the conditions that create a certain context, and a set of reactions that will take place in that Context. The Context module is more powerful than just displaying blocks (it is responsible for switching the position of the main content and sidebar within the ‘About’ section), but controlling blocks is its most useful function, and the one we are concerned with here. Figure 12.7 The ‘Context’ page shows you a list of available ‘Contexts’ within the website. These are set up as a Context for every section of the website – i.e. each link from the main navigation bar. To add a block to a context: 1. Choose ‘Structure’ from the main admin bar. 2. Choose ‘Context’. 3. Choose ‘Edit’ for the context where you want to add the block. 4. Under ‘Reactions’ click on ‘Blocks’ – a list of regions and the blocks they contain appears on the right. 5. In the far right column there is a list of available blocks – check the one that you want to add. 6. In the Column of Regions press ‘+Add’ on the right of the Region you want to assign the block to. 112 Figure 12.8 Clicking on ‘Blocks’ under ‘Reactions’ at the bottom of the context page brings up a list of the regions with the block assigned to them by ‘Context’. These blocks will display whenever the context is active – i.e. when the conditions in the ‘Conditions’ section have been met. Blocks 7. If there’s more than one block in that region, use the drag handles to reorder the blocks as you want. 8. Remember to ‘Save’ the form at the bottom of the page. Figure 12.9 To add a block to a particular region first tick the block you want to add, then choose ‘+Add’ in the region you want to add it to. You can drag to reorder the blocks, and use ‘x’ to remove them. Tips To remove a block from a region you simply press the ‘x’ to the right of the block name in the region. To re-order blocks, you simply reorder the blocks and press ‘Save’ – no need to add or remove blocks if you don’t need to. If you wanted to display blocks that only logged in users could see, you could try cloning the Context, naming the clone something like – ‘About – logged in’, and then adding a ‘User’ condition that required users to be logged in. Then add blocks to that context that only logged in users should see. Context displays the regions of all the available themes – don’t let that confuse you – just make sure you only put blocks in the regions we’ve already described. 113 Chapter Twelve Editing Blocks Blocks provide a contextual link to ‘Configure Block’. For text blocks this provides an editing page where you can edit the content of the block. For the menu block it provides options about how the menu will be displayed. For blocks provided by ‘Views’ you should edit the view by choosing ‘edit view’ from the contextual menu. The ‘configure block’ option also always gives you options as when and where to display the block. If you are using ‘Context’ to set where the block displays you should make sure that the display in the ‘Configure Block’ form is set to ‘- None -’. To edit a block: 1. Hover over the block you want to edit. 2. Click on the contextual menu gear icon. 3. Choose ‘Configure Block’ to edit text blocks or menu blocks; or choose ‘Edit View’ to edit views blocks. Tips Some blocks will not provide any configuration options. All the available options will be found within the module configuration pages for that module. 114 Figure 12.10 Choosing ‘Configure Block’ for the ‘Find us on Facebook’ image brings up this editing page. The content of the block is simply the content of the text editor. If you go to this editing page and scroll down it, you can see that this block is not displayed anywhere in the ‘REGION SETTINGS’ fieldset. It is displayed instead by the Context module. Blocks Adding a new block Sometimes you may want to add a new text block. The ‘Facebook’ link on the blog pages is an example of just such a block. To add a new text block: 1. Choose ‘Structure’ from the admin Figure 12.11 The ‘+Add block’ link is at the top of the Blocks page. You can also choose to add a menu block here too. Blocks provided by other modules (like Views) are not controlled here, but within the relevant module administration pages. toolbar, and then ‘Blocks’. 2. Choose ‘+Add block’ from the top of the page. 3. Fill out the new block form. Tips If you want the block controlled by ‘Context’ make sure that you leave the ‘REGION SETTINGS’ with the region set to ‘none’. Once you have saved your block, go and add it to the context you want in the way described previously. 115 13 Views In This Chapter What is a view? View Titles Number of View Items 118 120 121 A ‘View’ is a customised list of content. The Views module provides a very powerful set of tools which allows lists of content to be provided according to almost whatever rules you conceive, and gives you complete control over how that view is displayed. For ‘powerful’ read complicated. This chapter will not teach you how views works nor is it safe to experiment – you run the danger of breaking something that you will not be able to mend. If you want to experiment with Views, then set up a clean website (with a different address to the church website) and experiment there. We will look at how you can edit just a couple of the views settings for a particular view. 117 Chapter Thirteen What is a view? We described a view as a customised list of content. In fact one view can provide several different lists of content (or ‘displays’). The options provided by views create complex database queries on your content, and rules for formatting the database fields that it retrieves. Let’s look at an example – so on the front page, hover over the ‘From the Blog’ block and choose ‘edit view’. Under ‘Displays’ are the various Displays that have been set up for this view – Page (the page view that you get when you go to ‘Blog’); ‘Front Page Block’ (on the front page), ‘Recent Articles Block’ (in the sidebar on every page in the Blog section); and ‘Feed’ (which provides an RSS feed at ‘/blog/feed’ – see appendix 9 on ‘Feeding Facebook’). You can see that it is the ‘Page’ display that we are on, not the ‘Front Page Block’ – even though that is where we came from. Click on ‘Front Page Block’ to get to the settings for the Front Page block that we came from. Figure 13.1 The front page has 5 different views displays on it, provided by 4 different views. The rotating image, ‘From the Blog’ and ‘Coming Up’ blocks are provided by their various ‘views’ settings. The ‘Next Service’ and ‘Most Recent Sermon’ are two displays provided by one ‘view’. Figure 13.2 The easiest way to see that view options is to choose ‘Edit view’ from the contextual links. The first column describes the elements that go into putting this display together: Title The block title. Format The ‘format’ option describes how the view will be displayed. [This block is just a list – the rotating images block is a slideshow.] The ‘show’ option allows us individual fields, or the whole node content. 118 Figure 13.3 The ‘Articles’ view settings that you see when you click ‘Edit view’ from the ‘From the Blog’ block on the front page. Notice that there are four different ‘displays’ – you are not taken to the display that you clicked the ‘Edit view’ link from. The display for the front page is called ‘Front Page Block’. If you create new displays do give them names that help you identify them easily. Views Fields We can choose all the fields that we want to be part of this view display, and how they will be formatted. Filter Criteria By default the view will list every piece on content on the site. We filter that here by asking for only content that is published and of type ‘Article’. Figure 13.4 We’ve switched to the ‘Front Page Block’ display. Each ‘display’ starts off with the default options that you set up when you created the view – but each one can be overridden. On our church website, we have set up one ‘view’ for each content type that we are wanting to display lists of, and then as many ‘displays’ as we want different ways of displaying that content type. Figure 13.5 The ‘BLOCK SETTINGS’ section will tell you the block name that this block is given when you look for it in the Blocks or Context pages. Sort Criteria What order do we want the list of items displayed in. Here, we have asked for reverse order of the posting date. The next column describes the basic layout of the whole view display and the number of items that will be displayed. Block Settings The ‘Block Name’ is the name that you will see in the Block or Context lists for adding blocks to regions. The ‘Access’ settings allow you to restrict who will be able to view this. Header and Footer Will add text before and/or after the view Pager The pager is displayed at the bottom of the page to break a long list of results up into various pages. It is also used to restrict the number of results that are shown. Here it is used to restrict the number of items to just two. If you have restricted the number of items returned you can set a ‘More Link’ – to link to a list of all the results. The third column is hidden until you press ‘Advanced’. Leave it hidden. 119 Chapter Thirteen View Titles The view title will be the title that is displayed either as the page title for a page view, or as the block title for block views. To change the view title: 1. Make sure that you have selected the display that you want to change the title of. 2. Under ‘TITLE’ click on the current title name. Figure 13.6 Clicking on any items in the views display will bring up the available options. Here we have clicked on the ‘Title’. You either set the property for this particular display (override), or you set it for every display in the view (all displays) – which will set the default option that is used by every block which has not chosen ‘override’ for that option. 3. Every display in the view will use the same settings unless you override them for a particular display. You will generally want titles to be specific to a particular display, so in the ‘For’ dropdown choose ‘This Block (override)’. 4. Write the new title in the title field. 5. Click ‘Apply (this display)’ (or ‘Apply (all displays)’ if you have chosen to edit the default title). 6. At the top right of the view form, you must now click ‘Save’ to save the changes you have made. Tips It is easy to think that once you have clicked ‘Apply’ you have saved your change. The changes you make to a view are not saved until you have then pressed ‘Save’. 120 Figure 13.7 Even after you have clicked ‘Apply’ for your particular option it is not applied to the view until you press ‘Save’ at the top right of the View page. Views Number of View Items Figure 13.8 In the ‘PAGER’ section you can see whether the view is set to display over a number of pages with a ‘pager’ at the bottom (i.e. - see the bottom of the main sermons page) or whether it is set to display a fixed number of items. Clicking ‘2 items’ allows you to change that number. The ‘More link’ provides the ‘All Articles’ link at the bottom of the ‘From the Blog…’ block and you can change that text here. A particular view display may have been set up to show a specific number of items (two articles and three upcoming events on the home page for instance). You may want to change how many items are displayed. To change the number of items: 1. Make sure you are in the right display. 2. Under ‘Pager’ there will be a link which simply reads ‘2 items’ (or however many items it is). Click this link. 3. Change the number of ‘Items to display’. 4. Click ‘Apply’. 5. Click ‘Save’ in the main view form. 121 14 Backing Up Backing things up always sounds very boring until you lose something, and then you kick yourself for not doing it. In This Chapter Why Back Up? How to back up How to restore from a backup Why and how to test a backup 124 125 126 127 Your hosting provider should provide backups to roll back to if something goes wrong, but you should do it yourself too. 123 Chapter Fourteen Why Back Up? Probably nothing will go wrong, but: Something horrible could happen to your hosting provider (not very likely, but possible). You could do something stupid (which I’m sure you won’t, but…). Some virus or malicious code could corrupt your web files or your database (also not likely, but possible). Especially it’s worth noting that there is no ‘undo’ when it comes to website editing. If you click the ‘select all’ box on the list of content, and then choose ‘Delete’ in the update actions drop down all the content is deleted. You cannot get it back – not any way, not ever. Not, that is, unless you backed it up earlier. 124 Backing Up How to back up We are going to back up the database – but this will not back up all the files (audio, images etc…) saved in the files directory of the website, so we will also back up all the files in the ‘public’ files directory. Figure 14.1 Backup and Migrate is in the ‘SYSTEM’ section of the ‘Configuration’ page. To back up: 1. Click on ‘Configuration’ in the admin toolbar. 2. Click on ‘Backup and Migrate’ in the ‘System’ section. Figure 14.2 Clicking ‘Backup now’ from this screen will provide a straightforward backup of the database to a backup directory on the website. You want to change the second drop down so that it reads ‘download’ and then repeat, changing the first dropdown to ‘Public files directory’ so that you download files too. 3. Click ‘Backup now’ to download a backup of the database. 4. Change the first drop down to ‘Public Files Directory’. 5. Click ‘Backup now’ to download a backup of the public files directory. Tips The files backup in particular will be huge – don’t keep them all forever. Have a schedule – you might keep fortnightly backups for two months and then delete them. The database (but not the files) is backed up on the webserver daily, and kept for a week. This should allow you to restore to any point in the last week if something goes wrong and the database becomes corrupted for any reason. You can change this routine on the ‘Schedules’ tab. 125 Chapter Fourteen How to restore from a backup If something has recently gone wrong, you should first try to restore from a recent database backup on the server. Be aware that this will eradicate any good changes that anyone has made since that backup. Figure 14.3 The ‘Restore’ tab will let you upload a backup file from your computer and restore from that. You need to restore both database and the public files. To restore from a backup on the server: 1. Go to ‘Configuration’, then ‘Backup and Migrate’. 2. Choose the ‘Destinations’ tab. 3. Choose ‘list files’ for the Scheduled Backups Directory. 4. Choose ‘restore’ for the date you want to restore back to. To restore from a backup on your computer: 1. Choose the ‘Restore’tab 2. In the first drop down select whether this is a database or public files restore 3. Choose a file to upload and upload it. 126 Figure 14.4 From the ‘Destinations’ tab you can list the contents of the ‘scheduled backups directory files’ – from this page you can roll the database back to previous states – each restore file is listed by date. Particularly if someone has really made a hash of some configuration options on the website this is the way to roll the website back to the day before it happened. Be aware that you will also lose any desirable changes since that point. Backing Up Why and how to test a backup Nothing worse than thinking that you have perfectly good backups and then discovering that they are corrupted and unusable. You should test your backups from time to time by installing them on a copy of the website set up just for this purpose. To test a backup: 1. Set up a clean installation of the website (see appendix 4). 2. Restore the database and public files of the backup that you are testing. Tips Once you have learned to set up a clean installation of the website, you will also have somewhere to play with Views, and new modules that you would like to test out. If you are upgrading modules on the website, back up before you upgrade (just the database would be fine). If you are upgrading the Drupal core, then especially backup (and the files too). 127 15 Emails In This Chapter Site email when people register Setting up email addresses A new email address A new email forward 130 131 132 133 The website will send out email when people register or reset their email – to them and also if approval is needed to a site administrator. You should choose an email address (in the church website’s domain) that will receive this email which will go to someone who will do something about it. Using a forwarder, you could forward this email (say ‘website@...’) to several people if there is not a single individual who will reliably be around to deal with requests to authorise accounts etc… Although setting up emails for individuals (rector@ , wardens@ etc…) is not a function of the website, but of your hosting account, this is covered here because it is something that you will need to be able to do. 129 Chapter Fifteen Site email when people register When people register, they receive an email from the website’s email address, and that address will get an email if the new user needs authorising. To set the site email: 1. Go to ‘Configuration’ and then ‘Site Information’ in the ‘System’ section. 2. Change the email address in the ‘SITE DETAILS’ section. Figure 15.1 The ‘Site Information’ page allows you to change the site email address – this is the email that notifications – like the fact that there is a user who has registered and is waiting to be authorised will be sent to. Tips You should set this email address to an address that belongs to the website’s domain. Set up the address as a forward to the email account(s) you’d like the email to eventually get to. You can customise the email that the site sends out by going to: ‘Configuration’, then ‘Account settings’ in the ‘People’ section. The email settings are most of the way down this page. 130 Figure 15.2 ‘Account Settings’ in the ‘PEOPLE’ section of the ‘Configuration’ page will allow you to customise every email that is sent out from the site when people register etc… Emails Setting up email addresses Figure 15.3 The ‘cPanel’ allows you to configure all the hosting options you have available. The email options are all in the ‘Mail’ section. You can access your hosting account options (their ‘cpanel’) very easily from the URL ‘/cpanel’ without having to leave the website. You will need log in credentials, which you will need to work out where to keep securely. From the cpanel you can control lots of options within your account – you should leave most of them alone. To log into the cpanel: 1. From the website, type ‘/cpanel’ after the website name in the address bar, and hit enter. 2. Enter your credentials and log in. In the cPanel the mail options are all displayed in the section with the title ‘Mail’. There are two basic forms of email you will set up – one is a straight forward email address, which you access from the ‘Email Accounts’ link; the other is a ‘Forwarder’ – which you access from the ‘Forwarders’ link. An email set up on the site will store mail in your webspace, and allow access to it via webmail or an email client using POP3 or IMAP. A forwarder will simply forward email to your own email account. I recommend that you set up all forwarders if possible, and no actual email accounts. 131 Chapter Fifteen A new email address You set up a new email address using the ‘Email Accounts’ link. This email address will then need to be set up in the user’s email client (Outlook Express etc…) by the user. To set up a new address: 1. Click ‘Email Accounts’ in the cPanel. 2. Enter an email and password. 3. Set the Mailbox Quota 4. Click ‘Create Account’ To get the account set up details: 1. To the right of the account you’re setting up click on the ‘More’ drop down and choose ‘Configure Email Client’. 2. If you are on the users computer choose an auto-configure option if there is an appropriate one. 3. Otherwise copy the Manual Settings and mail them to the user to set up their own email client. 132 Figure 15.4 The email accounts page allows you to easily set up a new email account. The details that you need to configure an email client can easily be found by choosing ‘Configure Email Client’ from the ‘More’ drop down to the right of the account you want to configure. Emails A new email forward Use forwarders where possible. Everyone already has an email account – forward their mail to that. To set up an email forward: Figure 15.5 The Forwarder page has a link underneath the list of existing forwards: ‘Add Forwarder’. Choose this link to create a new forward. Forwards are really useful, and won’t take up any of your available webspace in storing people’s emails. 1. Click ‘Forwarders’ in the cPanel. 2. Click ‘Add Forwarder’ after the list of Email Account forwards. 3. Type the address to forward (you are essentially creating the new email address here). 4. Type the destination to forward to (i.e. the user’s existing email). 5. Click ‘Add Forwarder’ Tips You can set one email address to forward to several different accounts – you just need to set up a separate forwarder for each account that you want to receive the mail. 133 Appendices A1 – Modules Modules – Core and Contributed The Drupal system is extended by modules. Some of these modules come with the ‘core’ distribution – and handle such fundamental functions as saving content. These most fundamental modules are required by Drupal and cannot be switched off, but it gives you an idea of how deep the modular architecture goes. As well as core modules that are required there are plenty of optional core modules – many of which are required by the church website. ‘Comments’ is an example of one of these - switch it off, and there are no comments on the site. All the core modules are in the ‘modules’ folder inside the root folder of the website. The extensibility of Drupal really comes into its own with the possibility of adding contributed modules. ‘Views’ is a contributed module which the website couldn’t exist without for instance. At drupal.org/download are links to lists of modules. There are currently more than 9,000 modules freely available for download – so you might like to start with the ‘Most Popular’ list. Contributed modules are not stored in the ‘/modules’ folder, but in ‘sites/all/modules’. The /sites folder contains all the files that are specific to your site (apart from some customisation of the .htaccess file in the root folder), so it makes it easy to update Drupal core – you simply update every single file and folder in the root folder with the new version of Drupal, but leave the .htaccess file and the /sites folder alone. Modules can be installed fairly automatically. On the Drupal module page, you need to copy the address of the link to the module download. From the top of the ‘Module’ page you choose ‘+ Install new module’ and then paste the address and click install. You will then need to go to the module page again and place a check before the module name to install it. Contributed modules can also be automatically updated from the update page (unless you are using development versions). Some modules require 3rd party ‘libraries’ to function – the text editor is an example of this. These libraries must be downloaded and then manually uploaded to the ‘/sites/all/libraries’ folder. 137 Appendix One Core Modules in Use These are the core modules which should be switched on for the site to function properly. They are all in the top ‘Core’ section of the Modules list: Block, Comment, Contextual links, Dashboard, Database logging, Field, Field SQL storage, Field UI, File, Filter, Help, Image, Menu, Node, Number, Overlay, Path, Search, Shortcut, System, Taxonomy, Text, Toolbar, Update manager, User All of these are part of the Drupal core distribution, which is currently at Drupal 7.9. There are a few other Core modules enabled (they’re enabled by default when you install Drupal) which are not in use – don’t worry about them – if you’re really into optimising performance you might switch them off. Contributed Modules in Use There are various areas of functionality that require contributed modules. Often one module will require another one, or have a couple of modules that extend its functionality. All of the modules are available for downloading at drupal.org/project/{project-name}. Modules that handle URLs The following modules are responsible for creating good looking URLs automatically: Pathauto (/project/pathauto – 7.x-1.0-rc2) This is the module that provides automatic path aliases (so that new article has the address ‘/blog/{article-name}’ rather than something incomprehensible like ‘node/1348’. The configuration options for Pathauto can be found in ‘Configuration’ in ‘URL aliases’ in the ‘Search and Metadata’ section. (along with sub path options). Token (/project/token – 7.x-1.0-beta6) Required by pathauto. Sub-pathauto (Sub-path URL Aliases) (/project/subpathauto – 7.x-1.1) Extends the path aliases to the subpaths (i.e. /about can be edited at /about/edit). Global Redirect (/project/globalredirect - 7.x-1.3) When a path is aliased, the old path remains. This module provides a redirect from old to new which is better for search engine performance. You should not need to change the default configuration options at ‘Configuration’ then ‘Global Redirect’ in the ‘System’ section. 138 Modules Modules that provide views of content on the website The views module is quite powerful on its own, but there are many other modules which extend it; we use a couple of these to extend views on the church website. Views (/project/views - 7.x-3.0-rc1) Views can be created or edited at ‘Structure’ then ‘Views’. We have only considered views of content, but views can also provide views of files or users among other things. This also provides the Views UI module, which must be enabled for views to be edited. Chaos Tools Suite (ctools) (/project/ctools - 7.x-1.0-rc1) Required by views. This provides a suite of modules – you only need to have the ‘Chaos tools’ module itself enabled; you can ignore the rest. Views Slideshow (/project/views_slideshow - 7.x-3.0) Provides the slideshow view on the front page of the website. Both ‘Views Slideshow’ and ‘Views Slideshow Cycle’ must be enabled in the modules list. The slideshow requires a javascript library – which requires the next module (libraries) and the library itself being added to /sites/all/libraries/ (see more about this in the libraries section of this appendix). The module provides and extra ‘Format’ option for views, and the settings of views slideshow are accessed from the view display page under ‘FORMAT’ in the ‘settings’ link that appears next to ‘Format: Slideshow’. Libraries API (/project/libraries - 7.x-1.0) Allows Views Slideshow (and other modules) to look for its required javascript library inside /sites/all/libraries. DraggableViews (/project/draggableviews - 7.x-1.x-dev) Provides drag handles for reordering views lists. Used on the website for reordering rotating images. Also provides a test module (DraggableViews Tests) which does not need to be enabled. Provides a ‘Draggable Table’ format to views, and its settings are reached from the setting link for the format in the views display (like with views slideshow). Modules that provide rich text editing There is no rich text editing out of the box with Drupal. If you want rich text (i.e. a ‘Word like’, ‘WYSIWYG - what you see is what you get’ editor, you must choose one. CKEditor – WYSIWYG HTML editor (/project/ckeditor - 7.x-1.3) CKEditor is module which allows Drupal to use the CKEditor javascript library. The library itself must be downloaded from ckeditor.com/download and added to /sites/all/libraries. CkEditor can be configured to provide a whole pile of different options at ‘Configuration’ then ‘CKEditor’ within the ‘Content Authoring’ section. The files ckeditor.config.js and ckeditor.styles.js have been copied into the theme folder for the website and then customised there. Some options (setting the width of the editor content to 620 pixels – set in the config file, and the 139 Appendix One styles dropdown choices – set in the styles file) can only be set by hardcoding these files. More documentation at the ckeditor project page, and from ckeditor.com. Media (/project/media - 7.x-1.0-rc2) Provides media uploading from the ‘Media’ tab in the main ‘Content’ page; and a method for uploading and inserting images within CKEditor. It is worth looking out for a stable 7.x-2.0 version of the module to be released. At that point it would also be worth trying Media Internet Sources and the YouTube module. Media options are configured from various options in the ‘Media’ section of the ‘Configuration’ page. File entity (fieldable files) (/project/file_entity - 7.x-1.0-rc2) Required by Media. Modules that extend the basic content handling Drupal core provides a number of different field types, display formats and ‘input filters’ for controlling how content types can be put together and displayed. Contributed modules can extend the core options for content types - adding field types, display formatters, publishing options and filters. Date (/project/date - 7.x-2.0-alpha4) Provides a date field for content types. Date provides a whole bundle of modules – ‘Date API and ‘Date’ get the basic functionality for content types. ‘Date Popup’ gives you the popup date picker and ‘Date Views’ allows Views to use date fields in its sorting etc… Most of the date setting are to do with setting up new content types – at ‘Structure’ then ‘Content Types’; the pop up options are given at ‘Configuration’ then ‘Date Popup’ within the ‘Content Authoring’ section. SpamSpan filter (/project/spamspan - 7.x-1.1-beta1) This filter ‘obfuscates’ email addresses that you publish in your content. This means that they cannot be harvested by spam robots. It may cause issues, especially with creating email links from the rich text editor. Turn it off if it’s a pain. You can configure it’s options at the bottom of the text format form on a per text format basis (go to ‘Configure’ then ‘Text Formats’ within the ‘Content Authoring’ section; then click ‘configure' for a particular text format). Scheduler (/project/scheduler - 7.x-1.0) Allows scheduled publishing of content on a per content type basis. Global options at ‘Configuration’ then ‘Scheduler module settings’ within the ‘Content Authoring’ section. Content type options for switching scheduler on or off are on a per content type basis – and can be found on the content type editing pages – ‘Structure’, then ‘Content types’, then choose ‘edit’ for the particular content type. MediaElement.js (/project/mediaelement - 7.x-1.1) MediaElement is a module that provides an interface for using the MediaElement.js html5 player as a display formatter for mp3 files. It needs the javascript library from mediaelementjs.com to be placed in /sites/all/libraries/. It seems generally reliable, but 140 Modules currently has trouble in Chrome on Mac – this is an issue with the library, not the module – so check for newer versions of the library from time to time. Configuration is at: ‘Configuration’ then ‘MediaElement.js’ within the ‘Media’ section. Choosing ‘Enable MediaElement.js site wide’ will make it available whenever there is an <audio> or <video> html5 tag – so this should be set if you want to use this tag to place your own audio players inside text areas where the player is not already set as a display formatter within that content type. Other Modules Context (/project/context - 7.x-3.0-beta2) We have covered the Context options in chapter 12 (Blocks) in the section ‘Understanding the Context’. As well as the ‘Context’ module you should also enable the included ‘Context UI’ if you want to be able to edit contexts. ‘Context layouts’ need not be enabled. Menu block (/project/menu_block - 7.x-2.2) Provides a configurable menu block. We covered lots of the options for this in Chapter 2. New Menu Blocks can be created from ‘Structure’ then ‘Blocks’ then choose ‘+ Add menu block’ at the top of the page. Global configuration is at ‘Configuration’ then ‘Menu block’ in the ‘User Interface’ section. Menu block also includes the ‘Menu Block Export’ module which does not need to be enabled. Features (/project/features - 7.x-1.0-beta4) Features allows you to save a whole pile of site configuration options – views settings, menu settings, ckeditor settings etc…. It is used in the setting up of a clean site from scratch to quickly configure all these site options. It can safely be left switched off, but if it is switched on will provide a way to revert views settings etc… to their ‘out of the box’ set up for a church website as described in this manual. The included ‘Date Migration Example’ module should be switched off. Backup and Migrate (/project/backup_migrate - 7.x-2.2) Module for backing up the database. Options covered in chapter 14 – Backing Up. Backup and Migrate Files (/project/backup_migrate_files - 7.x-1.x-dev) A plug-in module for Backup and Migrate to include the ability to back up files from the site. Needs the server to be set up right for compressing files – detail on the Project page. Libraries Some of the modules rely on external javascript libraries. These are not uploaded automatically when you install the module through the Drupal install module form, but must be uploaded manually, using an ftp client. You need an ftp client (fireftp is a free plugin for the firefox browser and works well for this) and the ftp credentials for the website. More information at the end of appendix 3. 141 Appendix One mediaelement (current version: 2.2.5) You should download and unzip the latest from mediaelementjs.com, then rename it ‘mediaelement’ and upload the folder to /sites/all/libraries. ckeditor (current version: 3.6.2) As above – download the lastest, from ckeditor.com, make sure the folder is called ‘ckeditor’ and upload the latest to /sites/all/libraries. jquery.cycle (current version: 2.9997) You get the jQuery file from: jquery.malsup.com/cycle – follow the download link and choose the full cycle plugin. It is single file called jquery.cycle.all.js – you need to rename this to jquery.cycle.all.min.js (there used to be a file called this to download – a compressed version of the original, and that is what views slideshow will look for). Put it in a folder that you name ‘jquery.cycle’ and upload to /sites/all/libraries. Upgrading Modules If you go to ‘Reports’ and the ‘Available updates’, you will see a list of the Drupal Core version you are running, and all the modues that you are running including their version number and the most recent version available. Newer versions of modules will provide fixes for some bugs and possible minor improvements. Unless the update is a ‘security update’ there is no need to update if everything is running fine. Modules have version names like 7.x-2.2. The 7.x means that the module is for Drupal 7 (so you always need that at the beginning of a module name). The first ‘2’ tells you that it is the second major version of that module, and the ‘2’ after the dot tells you that it is the third release of that version of the module (the first was 7.x-2.0). Don’t upgrade modules to a different major version number unless you’re confident in what you’re doing, and prepared to put things back the way you found them if it doesn’t work out. You can safely upgrade the minor versions. The other naming conventions are added to the end of the version number with an ‘x’ as the point release. These are –dev on the end (i.e. 7.x-2.x-dev) which means that it is a development version (these contain the latest bug fixes but haven’t necessarily been widely tested); alpha and beta numbers (alpha means not really ready and beta means nearly ready – some people’s modules never get out of beta); and a release candidate number on the end (like 7.x-2.x-rc3 – for release candidate 3). A proper version number feels safer, but isn’t always so. If there are available updates, there will be a notice at the top of the main module page telling you so and offering you a link to the updates page. To update a module: 1. Go to the modules page. 2. Click on the ‘Update’ tab. 3. Check the modules you’d like to update 142 Modules 4. Click ‘Download these updates. Tips Don’t engage in upgrading modules unless you have time to test everything thoroughly. If the newer version of the module is causing problems, you will need to go back to the previous version. Go to the module project page on drupal.org. The file that you want to download has been superceded, and it is the newer version listed on the project page that is causing problems and is showing in the ‘downloads section’. You can always get a copy of the older release by clicking on ‘View all releases’ at the bottom of the project page. To downgrade a module (if you have problems) disable it by unchecking the module on the module list. Go to the uninstall tab of the modules page and uninstall it (if that’s an option). Then you must physically remove the module folder from your website (via ftp) – it will be a folder in sites/all/modules/. Then install the older version of the module in the normal way. Upgrading Drupal Core Drupal core must be upgraded ‘manually’. This means that you have to download the files from drupal.org and then replace the existing files on your webserver with the new ones. This is clearly not for the faint hearted, and you might well want to test this out on a clean version of the website (see appendix 4, before doing it ‘for real’. You cannot upgrade from 7.x distributions to an 8.x one, but you should be prepared to upgrade through the minor version numbers, especially if there is a ‘security update’. There are full instructions for upgrading Drupal core at drupal.org/node/1223018. If you are going to upgrade the core, please review this page fully as well as the notes here. To upgrade Drupal Core: 1. Perform a full backup including files. 2. Test the backup in a different space on your webserver (i.e. somewhere like backuptest.{websitename}). 3. Do not proceed unless you now have a fully working version of the website in a different webspace. 4. Download the new version of Drupal core, and uncompress it on your local computer. Use this to replace sites/default/default.settings.php with the newer version of the file. 5. Now delete the sites folder from the local copy of Drupal. 143 Appendix One 6. Either update the .htaccess file in root folder of your local copy of Drupal to reflect customisations in the old .htaccess file or simply delete it. 7. Delete everything in your webserver’s root folder for the website, except the .htaccess file (if you’re not updating it) and the /sites folder. 8. Upload the new files to this space. 9. Go to you website and type /update.php after the website name in the address bar to go to the update.php page, which you need to visit in order to update the database. 144 A2 – Theme The appearance of your website is controlled by the theme. Just by switching theme you can make your website look completely different but with all the same content. The theme controls how a page is laid out, and colour and typography choices. Along with modules and libraries, themes are the final way in which a drupal installation is customised for a particular user. Unlike modules, the theme has been created specifically for you, will not be updated and therefore will never appear as an ‘available update’ on the updates page. Broadly speaking, you should not change it, and should therefore not require any of the information in this appendix. If there are some aspects of the layout of the site that you really do want to change, then keep reading. You can change the website logo, or the ‘favicon’ (the little icon that appears next to the website name in the browser tab or in favourites); you can change the layout of the page – so that different regions are in different places; and you can change colours, font-sizes and other typography choices. These things are reasonably easy to tweak. Do keep a record of your changes, though, so you can put things back if needed. Theme settings The theme is set by going to ‘Appearance’. The default Drupal theme is ‘Bartik’ and the default administration theme is ‘Seven’. If you want to see ‘themes’ at work, then enable Bartik and then set it as the default – the website will look completely different. The settings for a particular theme can be accessed by clicking ‘settings’ next to the theme name. The options are self-explanatory. Logo and favicon The logo and favicon can be changed simply by uploading new ones from the theme settings form. The logo should be a .png with a transparent background to display properly over the coloured header background, and the favicon must be a .ico file – there are various webpages which can make these for you – run a Google search. 145 Appendix Two How a theme is structured The theme itself is a folder inside /sites/all/themes. The ‘core’ themes are in /themes inside the root folder, but just as with contributed modules, contributed themes should go in the sites folder, so that you all the non core files are in one place for when you come to upgrade. The theme folder must contain a .info file – which tells Drupal about the theme. It also contains a screenshot.png file, which provides a visual preview of the theme in the ‘Appearance’ page. The logo.png and favicon.ico files for the theme are also here (but can be overridden in the theme settings). An .info file would be enough – the Drupal system contains templates for all the html on the page, and css to style various elements. The rest of the files in the theme folder are responsible for overriding the Drupal defaults. css and images css files must be listed in the .info file, and are then called as the last css files that Drupal loads (which means that they will override the defaults). Any images that the css files use for backgrounds should also be included in the theme folder. templates Drupal builds pages from various template files (there are many – but the basic ones are the html.tpl.php file, which is filled with the page.tpl.php file, which is filled with content that is based on the node.tpl.php template, and blocks which are based on the block.tpl.php template. All these can be overridden, or you can just use css to style the defaults. By having a page.tpl.php file in our template we ensure that drupal uses this, rather than the default file (which lives in /modules/system/page.tpl.php). template.php The template.php file contains custom code, which can override default Drupal theme functions. In the church website theme, this file overrides the way in which the author and date credits for a post are presented and the way in which the titles of taxonomy term pages are written. Other files Customised versions of the ckeditor styles and configuration files can be kept in the theme, as can javascript files which you want to run on every page in your site (these need to be listed in the .info file). 146 Theme Page Template The page.tpl.php file is responsible for most of the things that appear between the <body> tags of the completed html page. It is pure html, mixed with content that is provided to the page template as variables, and which is either directly printed by php code, or printed using drupal’s ‘render’ function. As long as you make sure that all the required elements are printed, you may structure the html however you like. Styling (css files and images) The style.css file contains all the css that the theme uses, and the images that it uses as backgrounds are in an ‘images’ folder. Using Firefox’s firebug plugin, or the ‘Inspect Element’ functions of other browsers you can see what css rules are currently in play for any item on the page, and preview changes in situ. The appearance of the website can be entirely altered simply by applying changes to the this css file. Custom Code (template.php) Templates are provided variables to display. These variables are provided by the various modules on the site, and finally run through preprocess and process functions. The ‘preprocess’ and ‘process’ functions in template.php are fed the array of variables ($variables) by reference (by adding an ampersand before the array name: &$variables) so are able to make any changes to the variables array without having to explicitly return the whole array at the end of the function. Any variable mentioned in the page or node templates could in principle be altered by the two functions in our theme’s template.php file. Building new themes requires much more information than is available in this appendix, but reasonably straightforward tweaks to the existing content should not prove difficult. For more information - a book on theming, or a trawl of the drupal.org website would be helpful (see appendix 5). 147 A3 – Hosting You are responsible for maintaining your web hosting account. You need to pay regularly for the web space you use, and also pay for the domain name that you use. Keep all the account details and log in names and passwords safe and accessible. The details you need are all on a separate piece of paper to this manual for security, and because you can change them, which would render a static piece of information misleading. Hosting and Domain Name Hosting You need two things – physical space on a webserver and a name that will point to it. Many web hosts bundle these two things together, but it is not necessary to do so. I like to keep the domain name with one company and point it to space somewhere else. This makes changing hosts easy – you just set the website up elsewhere and change the ‘nameservers’ to point to that new host. I currently favour lcn.com for purchasing and renewing domains. Make sure that they have current card details and email accounts, so that you can be informed and billed for the domain name renewal. Hosting demands for Drupal are quite tough – apart from the fact that you need a reasonably current version of PHP (the language that Drupal is coded in) and MySQL (the most common database type that Drupal is able to use), you also need very generous memory allowances and a fair amount of hard disk space for all those images and audio files that you are going to upload. You can find some details at drupal.org/requirements. I would add that the 32MB minimum PHP memory_limit for Drupal 7 is nowhere near adequate, you must be able to set the PHP memory limit to at least the 64MB that the article recommends. From time to time Drupal wants a lot of memory (not often) and I’d happily set the memory limit to 192MB (where I’ve never had any problems). My host of choice (at the time of writing – always worth shopping around) is tsohost.co.uk. The standard package allows you a reasonable amount of webspace; to override the php options (to set the memory limit high); and to run ‘cron jobs’ – and is reasonably priced at £35 a year. You must make sure that you have a current email registered with your tsohost account, and that they have your card details to bill you regularly for your webspace. Account log in is at the top right of their home page. 149 Appendix Three cPanel You can access the settings for your hosting in the ‘cPanel’. Once a website is registered with the cPanel, you can reach it at {website-name}/cpanel. You need log in credentials. From the cPanel, you can set up emails (see chapter 15) and email forwards, but also control all the other aspects of your hosting – domains, databases etc… Cron Jobs One of the things that you can set up is commands that the host will run periodically on your behalf – these are ‘Cron Jobs’ – accessed from the ‘Advanced’ panel at the bottom of the cPanel page. Drupal has a ‘cron’ system of it’s own – that will run when anyone logs into the website, and it has not been run for a specified period of time, but it is better to set up one that will call Drupal’s cron.php file at regular intervals regardless of whether anyone is visiting the site. This takes care of publishing articles to schedules, as well as various tidying up routines that the Drupal system runs. Instructions about setting cron up can be found at drupal.org/node/23714. Subdomains You can set up as many subdomains as you like. These are in the form {subdomainname}.{websiteaddress} – i.e. www.demo.standrewsmarkstey.org.uk. It makes sense to use subdomains to create trial websites, or spaces to create tests for backups etc… The subdomains can be set up in the cPanel under ‘domains’ by choosing ‘Subdomains’. Addon Domains As well as subdomains you can also ‘addon’ more domains (the standard tsohost package allows you a total of 4 domains). These can be controlled from ‘Addon Domains’ in the cPanel. The other feature of domains worth mentioning is ‘Redirects’ – this allows you to own separate domains (say .org and .org.uk) and have one simply point to the other. FTP You can view the files on your webspace from the ‘File Manager’ within the ‘Files’ section of the cPanel. You can upload and download files to your webspace from this page, but it’s much easier to set up an FTP client (FTP = ‘file transfer protocol’). A good free ftp client is the 150 Hosting FireFTP plug in for Mozilla’s Firefox browser. It’s worth installing Firefox as a browser in any case (it’s very standards compliant and Drupal works very nicely with it). You can set up FTP accounts in the cPanel under files at ‘FTP Accounts’. The configuration details are available next to each account (like for emails). You can set up ftp accounts to only have access to directories under a certain home directory. (So, you might give someone access to the webspace for an addon domain without letting them have access to the main website space.) 151 A4 – A clean installation Why install a clean website? You will hopefully never have to install the church website as a clean installation, but if the worst happened and tsohost exploded, you might just have to set up a clean website and then restore the backups that you have carefully kept to it. More likely, you will want to install clean versions of the website in order to test backups that you have already created, or to test new modules or just to play on a trial version of the website. If you want one of these clean websites, try setting up a subdomain, and installing it there. How? To set up a clean website: 1. Set up a subdomain to use within your existing hosting. 2. Install Drupal – either follow the instructions on the Drupal website, or run ‘Fantastico’ – a one click installer that will give an immediate copy of Drupal set up and ready to go – you can find it at the bottom of the cPanel. 3. Install all the modules mentioned in the modules appendix. Either go through the list, or if you want to do this a few times, download all the modules locally, and ftp the lot to sites/all/modules. 4. Install the required libraries by copying the required folders to sites/all/libraries. 5. Install and enable the theme. You should keep a copy, but you can find it at: churchwebsite.org.uk. You can do this from the ‘Appearance’ link in the admin bar. 6. Install the churchwebsite feature from churchwebsite.org.uk. You install this just like an ordinary module, and it uses the Features module to set up a pile of default settings and views for the website. Enable the feature on the main modules page. 153 A5 – Drupal Resources There are countless Drupal resources, so these are just a few recommendations for ones that I have found helpful. These are where you should look if you want to take your Drupal knowledge beyond the scope of this user manual – say to start developing Drupal features or websites for yourself. Online Resources Your best friend for help with Drupal is the internet. If you Google any problem, you are quite likely to find the answer there. There are also a number of websites that provide great Drupal help and instructions. From a vast list, easily the two most helpful websites are (in this order): drupal.org Everything that you want to know about Drupal is described on drupal.org. Somewhere. It can be hard to find your way to the piece of information you want, but a good starting place is drupal.org/documentation. The other place to look is at the individual module project pages – they often have links to documentation or tutorials. If you’re going to be developing themes or trying to find out which functions and variable you need to override, then you should install the devel module from drupal.org/project/devel. Drupal functions are documented at api.drupal.org, and module apis at drupalcontrib.org. mustardseedmedia.com Bob at MustardSeedMedia is dedicated to providing decent and affordable Drupal websites for churches and ministries. If you needed paid support or development for the church website, this would be my first stop. He has also provided a whole raft of video podcasts covering a wide range of topics. He is immensely skilled at communicating a topic simply and effectively. 155 Appendix Five Books If you want to develop a drupal website, then having a good book to talk you through the basic steps involved is essential. If you want to be able to develop websites in Drupal (rather than just to tweak the one you have) you will need to understand the various technologies that Drupal is built on top of. These recommendations are for a small web development library, with Drupal as the final goal. HTML5 & CSS: Visual Quickstart Guide Elizabeth Castro and Bruce Hyslop; Peachpit Press, 2011 The code that is sent to the web browser is called ‘HTML’ (hypertext markup language) and it is styled with ‘CSS’ (cascading style sheets). These are both very easy to understand (although css can be hard to get to work consistently across the various browsers). Visual Quickstart guides are easy to understand, have pictures and are the format that this manual is modelled on. You cannot do anything unless you have some understanding of what you are trying to send to the browser. If you already know your way around html and css a bit don’t bother with this book. If you don’t, then this is a great introduction. CSS Pocket Reference Eric Mayer; O’Reilly Media, 2011 If you’re going to work on css, this is an invaluable pocket guide; it’s a handy reference to css properties and the values they take. There are many other good css guides which you might also like to look at, but this one will be the one that sits on your desk when you’re actually working on stylesheets. PHP and MySQL Web Development for Dummies Janet Valade, Tricia Ballad, Bill Ballad; John Wiley & Sons, 2008 It’s seriously questionable whether PHP and MySQL can really be ‘for Dummies’, but this is the cheapest introduction available on Amazon.com. I haven’t read it, though. (I can personally recommend the Wrox and Apress programming guides, but they’re expensive and I don’t recommend the Visual Quickstart guide.) The ‘For Dummies’ book is cheap and well reviewed and I’m sure will provide the basic knowledge required to start working in Drupal. PHP is the language Drupal is written in, and if you want to change things at a template.php level or in writing your own modules, you should have a basic grasp of PHP. The online resources at php.net are an excellent reference for all the available php functions. Pro Drupal 7 Development 3rd Edition Todd Tomlinson and John K. VanDyk; Apress, 2010 156 Drupal Resources This is the book for developing in Drupal. It’s well written and clear to understand. It relates to the development of, not the use of Drupal and will rely on a fair understanding of html and PHP. It doesn’t cover contributed modules – and is not a ‘how to guide’ for setting up a Drupal site. It is a concise and effective guide that will allow you to develop whatever application you like within Drupal as a framework. There are other Drupal guides; many by Packt publishing. They are all helpful. There are none of these that I’ve come across that are unmissable. Learning jQuery third edition Jonathan Chaffer and Karl Swedberg; PACKT publishing, 2011 Drupal ships with jQuery, which is a reliably cross-browser javascript library. jQuery in Drupal is responsible for draggable content, visual effects – like sliding some hidden content down, and AJAX tricks - like the ‘autocomplete’ taxonomy field. If you want to create modules that take advantage of this library, then this book is a good guide to what jQuery can do. 157 A6 – Images for the Web Your website needs images, and you need to provide them. While you can just upload a photo straight from your digital camera, it’s worth developing a little skill in processing your images before you use them. Image size and compression settings An image straight from a digital camera might be several megabytes. To serve an image from the web, you want that image to be may be 40 kilobytes (or a 25 th of a MB). When you edit your images from your digital camera there are two things that will radically reduce the size of the image – one is the size of the image and the other the compression settings. Image Size Drupal will resize your image to a maximum setting when you upload it, but you don’t usually want large images on your web pages. The main content column is only 620 pixels wide – so make that a maximum for your images. The media module will take care of resizing that to a smaller 220pixels on the maximum dimension if you use the preview setting, or 100 pixels for the thumbnail setting. What if you want 340 pixels? Or 420? The way to get these sizes is to set this size in your image editor, upload it like that and use the ‘original image’ size when you insert it. What about resizing in the text editor? You can of course insert a 620 pixel wide image and then resize it down with the text editor. The problem is that the visitor’s web browser will still download the large 620px wide image – it will just resize it to display it. This means a file size several times larger than is needed and slow page loading times. Work out what size you need your images to be and resize them to that before you upload them. Compression When you save your image in your editor (usually as a jpeg for photos) you will have access to a compression setting. The more compressed the file, the more ‘compression artifacts’ will be visible. But it is worth experimenting to see how much compression you can get way with using before the image looks bad. It’s a trade between perfect image quality and fast loading pages for the visitor. 159 Appendix Six Image Editors You could do with a good image editor. The ‘GIMP’ is a free image editor that is powerful but not necessarily so easy to use. Adobe’s ‘Photoshop Elements’ is a leader in the field; they also have a free online editor at photoshop.com under ‘Online Tools’. Corel’s ‘Paintshop’ program is excellent and sometimes an older version is available for free on magazine covers. For Mac, iPhoto does a good basic job with photos. If you want a proper editing program, Pixelmator does a good job. At least get GIMP, if you don’t already have an image editor. Using Layers Once you have your image editor, learn to use layers. If you are creating images with several elements (like some text laid over the top of a photo) you want to be able to keep these separate elements separate. This will be very useful if you are creating images for the rotating banner on the front page. Using layers, the text you put on top of the base image will not be stuck there forever. As long as it is in a layer you can move it, change it or remove it without affecting what it underneath. Layers also mean that you can apply effects over the top of an image without altering the original image underneath. Good Sources of Images Your digital camera might provide every image that you need, but there are lots of images on the web that you can use. Be aware of copyright issues, but there are lots of images which are copyright free, and can readily spice up that event description etc… Some places to look: Google Images There are plenty of images on Google. Be aware of the copyright issues. Flickr Flickr has lots of images that are copyright free. In the ‘Advanced Search’ option you can ask to only be shown images that are licensed under ‘Creative Commons’ – this will mean that the right to reuse them has been explicitly granted. It also tend to filter better Flickr images, because only more serious photographers bother to set this – Jo Blog’s holiday snaps will not appear. There are different versions of the Creative Commons license – so check in the sidebar next to the image what exactly you are allowed to do with the image you’re looking at. 160 Images for the Web sxc.hu sxc.hu is a free stock photography site. It will constantly try to direct you to ‘Premium results’ which you need to pay for, but within the free images is plenty of good and usable stuff. 161 A7 – Audio for the Web Like images, you also need to take care of the file size of audio that you record. You must upload audio in the mp3 format, and you must get the file size under 10MB to be able to upload it. Audio file size Audio file size is determined first of all by how many samples per second are recorded at how many bits per sample, and how many channels are used. The cd standard is 44100 samples at 16bits per sample in two channels (stereo). CDs files have huge file sizes, and for distributing on the web, a compressed file format (mp3) was developed. Like jpegs for photos you can choose how compressed the mp3 should be and also like jpegs the more compressed you get, the more you suffer a loss of quality. An mp3 setting of 128kbps (kilobits per second) produces good quality stereo music without producing too large file sizes. Especially if you are using speech on the web, you should think about getting the audio file size down before you compress it to mp3. Speech certainly doesn’t need stereo sound – so if it’s been recorded in stereo lose one of those channels. It also doesn’t need 44.1 kHz – 11kHz will sound just fine, and you will have just removed ¾ of all the samples and hence reduced the file size to a ¼ of what you started with. Audacity Audacity is a free and very capable audio recorder and editor. You can download it from audacity.sourceforge.net. The latest stable version is currently 1.2.6 and this is what you should use. Audacity is easy to use, but there are good help files available at the audacity.sourceforge.net website. If you want to get audio into your computer, you will profit from a reasonable soundcard that you connect your church mixer to. The built in audio (probably a mic input on a 3.5mm jack) will do a perfectly fine job to be getting on with. 163 Appendix Seven Settings for sermon audio Connecting the church sound system to Audacity and hitting ‘record’ at the right point will provide a perfectly good recording (you will need to make sure that the level into the computer is not too high). Before we export it as an mp3, though, we want to convert it to mono (which will improve the sound quality when its compressed as an mp3), trim any ‘extra’ bits from the beginning and end of the recording and run it through some processors to make it seem as clear as possible when the talk is played through average quality speakers. Convert the recording to mono When you record the track you see a graphic representation of it in the Audacity Window. To the top left of this is an X, followed by the name of the recording and a down arrow. Click the arrow and a drop down list appears from which you choose the option ‘Split Stereo Track’. The track divides into two. Delete one (doesn’t matter which) by clicking on the X at the top left. On the other track click on the arrow and choose ‘Mono’ from the drop down list. Trim the beginning and end of the recording Zoom in on the track using the + magnifying glass. You can play it from wherever you click in the track. Select any portion that you need to discard from the beginning of the track by clicking and dragging on the track and then pressing delete. Check it sounds right and use the undo button if not. Repeat for the end of the track. If you pressed record and stop at just the right point when you recorded the audio, you can skip this step. Process the Audio to make it seem clearer Typical computer speakers are really rubbish and tinny and quite low powered. Commercial pop music has its dynamic range (difference between the loudest and the softest parts) heavily squashed, so that it all seems quite ‘loud’. We need to do the same thing to our speech recording to help intelligibility though these poor quality speakers. What we’re effectively doing is increasing the volume of the quietest parts of the audio that we have recorded. Without this, the user will have to turn their speakers right up to hear the audio – the loudest bits will seem painfully loud and they won’t be able to make out the very quietest parts. After this process the user will be able to listen to the talk at the same kind of level that they listen to pop music (or even lower) and will be able hear all of the talk clearly. Normalise The first step is to get the loudest bits of the recording to a standard level, so that the settings we use next will make sense. Select all the audio (Ctrl + A) and choose ‘Normalize’ from the Effect menu. Click OK and the track will be normalised to -3dB. 164 Audio for the Web Hard Limit Choose ‘Hard Limiter’ from the Effect menu. Type ‘-7’ into the first box (‘dB limit’) and leave the others. Click OK and the loudest peaks of the sermon will be trimmed back just a little. (The loudest peaks should now be at -7dB rather than -3dB.) Compress Choose ‘Compressor’ from the Effect menu. Drop the threshold to -15bB, increase the ratio to 4:1 and reduce the attack time to its minimum (0.1 sec). Leave ‘Normalise to 0 dB’ checked. Click OK and the remaining 8dB of loudest peaks in the audio will be squashed fairly hard (but more kindly and ‘musically’ than the hard limiter would have done). Once this has been done, the whole track is ‘normalised’ to 0dB which will mean that the perceived volume from someone’s speakers will be comparable to the rest of the stuff they listen to. The net effect of the whole of this process will have been to have reduced the difference between the louder and quieter parts of our audio. Export to mp3 We now have a perfectly processed sound file, but we need the file size reduced (a lot) before using it on the web. We’re going to export it to mp3, but first of all we’re going to click on the ‘Project Rate’ in the bottom left corner and set it to 11025Hz. This reduces the sample rate, but for speech will not significantly affect the perceived quality. We have now reduced the file size by half of a normal stereo recording by converting it to a single mono track and taken the sample rate to a quarter of CD sample rate without affecting our audio quality – giving us a near cd quality track at an 1/8 of the file size even before we compress it as an mp3. The audio editor is set to encode mp3 at 16bits (its lowest quality setting – you could check under: edit – preferences – file format tag) but will produce audio that seems quite close to ‘cd quality’ through the end user’s computer or mp3 player. Click on the file menu and choose ‘Export as mp3’. Save it with a sensible file name (ie ‘20090816AM’), in a sensible folder (i.e. ‘mp3 files from Audacity’ inside the ‘My Music’ folder). Once you have pressed ‘Save’ you are prompted for the ID3 tags (these will appear as text in someone’s mp3 player). ‘Title’ should be the talk title, ‘Artist’ the speaker and ‘Album’ whatever makes sense. 165 A8 – Writing for the Web Writing for the web is like writing for anything else – you should be efficient with you words, clear and think about what you are trying to communicate. It’s also a little different – web visitors tend to scan text rather than sit and read in a leisurely fashion and don’t wish to read very long texts online. Page length Think very carefully about your page length. You should aim to communicate everything important quickly – and preferably without the visitor having to scroll down to get to the information they require. By all means then expand on the original paragraph or two, but try and keep the whole article as concise as possible. You can always link to further information or resources from the page. If you’re writing more than a couple of paragraphs, do also include appropriate images as you go along. Writing Style Communicate fast. Write like a paper – say everything in the first paragraph; expand it in the next three paragraphs, and if you need to expand further in the paragraphs that follow. Cut out any extraneous words and if you have included any adjectives try removing them and seeing if the writing isn’t crisper without. 167 A9 – Feeding Facebook Where visitors to your website have to come and visit to be able to see the content that you are providing (so you should direct people to it), Facebook pushes information to where people are (at least where Facebook users are). If people ‘like’ the church facebook page, every post on the church facebook will appear in their newsstream. It makes sense, then, that every time you add an article to the church website, you also post it to Facebook. Drupal has a number of RSS (Really Simple Syndication) feeds set up – and one of these is a feed from the Article ‘view’ – it’s a special type of views display available at the path ‘/blog/feed’. By subscribing ‘TwitterFeed’ to this feed on your website, you can have every article automatically posted to Facebook (and Twitter if you want it) without having to remember to post in both places. Setting up TwitterFeed Twitter feed is a free service at twitterfeed.com. You simply sign up, give it the feed address at /blog/feed and your Facebook credentials and it will work away in the background feeding articles to Facebook forever. 169 A10 – Training Users When you have new people who are going to be editors on the website, you must train them. Give them a copy of this manual as a reference by all means, but it will also help if you sit with them and talk them through the basic functions of the website. In order to absorb and ‘get’ the processes of producing and looking after content, people need to do as well as be shown. Make sure that there is a ‘demo’ version of the website that can be messed around with by your trainee editors before they are let loose on the actual site. Exercise Sheets There are copies of training exercise sheets available at revrichardmorgan.org. You should copy these and keep copies of them somewhere. They will be helpful in setting tasks that cover the range of common activities that people need to achieve on the site. 171
© Copyright 2026 Paperzz