Depending on your role, this might mean adding and editing, for example, events, blog entries or news stories.

Transcription

1 website guide guide for adding and editing web content Introduction The MS Society website uses a content management system (CMS) called Drupal. As a contributor to the site, you ll receive training in how to add and edit content on the CMS. Depending on your role, this might mean adding and editing, for example, events, blog entries or news stories. This guide accompanies your training and should help answer your questions. It s unlikely that every section will be useful to you just pick the bits you need in your role. Other resources golden rules for writing for the web MS Society web accessibility policy documents ( digital team) photographic guidelines Drupal guide v. 1.0 May 2013

2 Contents 1. The basics 1.1. Logging in 1.2. The editing dashboard 1.3. The WYSIWYG editor Inputting and formatting text Adding images Making links 2. Adding content 2.1. Blog entry 2.2. Content 2.3. Events 2.4. Node boxes 2.5. Newsletters 2.6. Photo Carousel 4. Submitting content 3. Editing current content 4. Revisions and workflow 5. Can we unpublish or delete old content? 2

3 The basics 1.1 Logging in The digital team will ask you to set up an account on the website, if you haven t already got one. Once you ve told the team your user name, they can set you up as a branch editor on the system. Log into your account at The editing dashboard Once you re logged in as an editor, you ll see the my homepage screen. To create brand new content or see the status of content you re working on, click on my dashboard in the left-hand menu. Once you ve clicked on my dashboard, you ll see two buttons: create content my content Create content shows you the options for creating different types of content. My content allows you to see a list of the content that you re working on. You can search your content according to: type (eg event NB there is no option for blog entry) revision status (eg pending publication, published) so you can check whether your content has been published or not title You can return to my dashboard at any point, either by following the my homepage link from any page on the live site (top right corner), or by typing in 3

4 iii. The WYSIWYG editor On all types of content, you ll see a WYSIWYG editor, which is short for what you see is what you get (and pronounced whizziwig!). This is the user-friendly interface that you ll mostly be working with: From this interface, you ll be able to format text, doing things like making text bold, changing the heading size, adding bullet points and adding links. Geeky tech bit: HTML If you want to see a HTML version of your page, press the source button in the tool bar. HTML is the main markup language for displaying information in a web browser browsers use HTML tags to interpret content and display it correctly. eg for words to display as a heading on our website, the HTML might look like this: <h2>this is a heading</h2> (If you are interested, read more on wiki: 4

5 Inputting text to the WYSIWYG Do type directly into the WYSIWYG box if pasting content from Word, paste it into Notepad first (Notepad is usually found on your computer under Start/programs/accessories). This makes sure that your text is plain and format-free when it goes into the editor. Don t paste content directly from Word or a website directly into the WYSIWYG box, unless you re pasting directly into the HTML code source version of the editor. If you do this, the tags and formatting from Word will be carried over. It may look OK in the WYSIWIG, but it can disrupt HTML tags, and stop content displaying properly when published on the website. Headings All titles and subheadings should be formatted as a heading not as bold text. To create a heading, highlight the appropriate text. Click the format button in the tool bar and chose the size of the heading from the drop down menu: Primary headings within the text should be Heading 2. Secondary headings should be one size smaller Heading 3 : 5

6 (where environmental factors is Heading 2, and viruses is Heading 3). You shouldn t use bullets and headings at the same time headings are not designed to be bulleted. Bold Bold should be used sparingly as per our accessibility guidelines. An example might be the first sentence of a news story, to add emphasis to the most important sentence. Adding images Use the image button to add an image: If you re adding an image that s already uploaded to the system: click on browse server locate the image in the image folder, then in the relevant subsection. The digital team can advise on stock images and location of images. 6

7 Select the image you want. Either double click on the image, or click insert file. Fill in the alt text (text that s appropriate to someone using a screen reader, e.g. woman using a wheelchair ), and choose whether you want left or right alignment on the page. Add in HSpace (horizontal space) and VSpace (vertical space) by adding 10 (for 10 pixels). This ensures the image isn t squashed up against the text. If you need to edit the image once you ve clicked ok, just double click on it. If you re uploading a new image: The image needs to be appropriate, the right size and resolution in terms of where you re using it, and labelled with the correct name and size. See the photographic policy for guidance, and ask the digital team if you re not sure. If you need to resize an image, you can use an online resizer like Click on the image button, then browse server and select the folder you want your image to be in. Then click on upload and choose the image from your folders. Upload the image then go through the normal process of inserting it. Making links Highlight the text you want made into a link. Your hyperlink should be descriptive, and around five words maximum eg Find out more about MS Don t turn the words click here or here into a link. Click on the link button: A box will appear with a drop down menu of four link types: URL for all external websites (just paste the page s URL into the box). 7

8 Drupal link for all internal links. Start typing the title of the page you want to link to e.g. New York Marathon When the correct page comes up, click on it. Be careful some pages are called similar things. You can always test the URL in preview. Making links this way ensures the link will still work even if the page URL changes (which happens sometimes if a page is retitled) this is because a page s node number always stays the same. link add in the address you want the link to lead to. You can populate the subject and the header of the . Anchor link - an anchor link allows users to click on a link and be taken to a specific place on a page (like the contents section of this document). Creating anchor links To make an anchor link, you need to create an anchor: click on the flag icon in the specific place you want to direct people to: Give the flag an intuitive name with no gaps in characters e.g. drug-treatments To link to this anchor: highlight the text you want to make into a link click on the link image then select link to anchor in the text you should see the list of anchors you ve created select the correct one On long pages, remember to create an anchor at the top of the page and then add back to top links in appropriate places on the page, like at the end of paragraphs e.g. 8

9 2. Adding content You can select a content type from my dashboard. The guide below covers the main types of content that you ll be working with Blog entry A blog post on one of our branch blogs, e.g Click on create content on the dashboard, and select blog entry. 2. Put in the name of your branch parent blog e.g., Andover and District. You ll see the system automatically locates your branch and puts in a node ID this ensures your blog post is automatically posted to the correct blog. Always make sure there is a node ID number in the box or your post will not appear in the blog. 3. Put in a title for your blog eight words maximum, and with the most important words at the start (if possible). 4. Add the content to the main body of the blog. 5. Click save if you re still working on the content, or change the content moderation to with editor to submit for moderation (see 3. Submitting content, below, for more details) Content Content is a regular content page, for example: 1. Enter the page title. It should be short, and make the content of the page obvious. 2. Enter the main text into the body. 9

10 3. Enter the menu link title. This will correspond with your branch menu on the left hand side of your branch page. 4. Click save if you re still working on the content or change the content moderation to with editor to submit for moderation (see 3. Submitting content, below, for more details) Events Events listings do not appear automatically on branch pages/menus and are not suitable for recurring events. They are currently only suitable for one-off events like cake break and information events. Recurring events are handled by LSDOs and the Digital Team. If you need to submit a recurring event for the near me map please contact your Local Support Development Officer or the Digital Team: webteam@mssociety.org.uk. Creating an Event 1. Click on create content on the dashboard, and select event. 2. Enter a title for your event. 3. The body section is where your main text should go. 4. Add a start and end date when you click into the field, a calendar tool appears. You can also add a start and end time if you know them, or leave the fields blank for a full day event. 5. Enter a price, if there is one. If the event is free, you can leave the field blank or enter free. 6. The location section is essential. If the information isn t entered correctly, the event won t show up on the near me map* properly. If you have a postcode, use it, as well as adding any address details If you don t, manually add a map pin by navigating the map to the right place and clicking on the map to add the pin. 10

11 N.B. If you choose the first option, the pin will only appear after you save the event don t worry if you can t see it at first. Never locate anything by just using the name of the town. Chances are there will be something else on the map already, and if map pins sit directly on top of each other, users can t view them properly. *If your event doesn t have a location e.g. Cake Break click on options tab below the map, and tick don t show on map. 7. The options field allow you to add text for the button, e.g. Sign up, and a URL for the button it might go to a web form to sign up for the event. You can also add an address here just put mailto: before the address, e.g. mailto:sgeorge@mssociety.org.uk and the button will generate an Click save if you re still working on the content or change the content moderation to with editor to submit the content for moderation (see 3. Submitting content below for more details). Publicising your Events As previously mentioned, your events will not automatically appear on your branch page. We recommend you create a content page and call it Branch Events or something similar. In this page you could create links to each of your created events. When creating your events do not list them in the menu (via menu settings) as you will be listing them all in the one content page. Here s an example of a branch events content page on the Rochdale and District site: 11

12 2.4 Using node boxes Node boxes direct people to related or relevant information, or to promote certain content/ actions (eg donate). They can: bring in content from our site that has been tagged with a particular term display manually inputted content (links, pictures, quotes) bring in content from external sites (Twitter, YouTube, Facebook) Here s an example of a node box on a branch page: There are seven kinds of node box: 1. Quote 2. Facebook 3. Html 4. Newsletter 5. See also 6. Twitter 7. Youtube To add a node box Please contact the digital team (webteam@mssociety.org.uk) if you would like to set up a node box for your branch. 2.5 Newsletters Please create a blog entry to attach and publicise your newsletters. All Newsletter pdfs should be renamed to YYYY-MM-Branch-newsletter.pdf format. For example: sunderland-newsletter.pdf 12

13 Newsletter entries should have a bulleted list of highlights to entice the reader. example: 2.6 Photo Carousel Each branch landing page has a photo carousel. Pictures should be clear, in focus and relevant. Please remember to adhere to the guidelines for the size of images. Carousel images should be 490x276. If you re having problems resizing your images please webteam@mssociety.org.uk The carousel can also be used to imbed relevant youtube or vimeo videos. All you need is the URL for the video. How to add a video to your carousel 1. Go to your branch landing page 2. Click on Edit Current 3. Scroll down and click on Carousel 4. Scroll down until you see the following boxes: 13

14 5. Select the video type 6. Enter your video URL 7. Select the slide position 8. Please remember to click save. 3. Submitting content On all types of content, you ll see a content moderation box: Whether you re adding new content or editing current content, your changes/additions will automatically be set to with author, and they won t be seen by the public. When you re ready to submit content to be published, simply select with editor and save the content, and the digital team will get a notification to moderate your content. 14

15 4. Editing your branch landing page If you are logged in to the site, your branch page has an edit current button which allows you to make changes to the page. You can edit the contact information which appears on the near me map and information in the contact and about us tabs. Please remember to update both contact information sections. Once you ve made your change, you can either save your content by clicking on save or submit it for moderation. 15

16 5. Revisions and workflow Every time you make a change to the page and save it, the system will save a version of the content. The revisions tab, which you ll see when you re editing the page, allows you to see the most recent, and previous versions of the page. If you open up a page and there s a more recent version, the system will tell you just click on revisions and the most recent version: You can then edit the most recent version. The workflow tab, which you can also see when you edit a page, allows you to see the history of a page and track its changes as it moves from author to editor. You can also change the state of the content to with editor or with author here, and add notes, like on the content moderation tab: 16

17 5. Can we unpublish or delete old content? It s really important that we remove inaccurate information on content pages, or content that is no longer applicable. For example, if there s a change on a branch committee contacts page. However, news stories, blog posts and events are content types that people expect to age. We don t tend to delete or unpublish these pages for a number of reasons: Blogs and news Users understand that old content like news stories and blog posts may not be up to date just think how you use a news site like the BBC. Content with relevant keywords brings traffic to our site and helps our search engine rankings Blogs and news stories build up a picture of our work and profile, giving a record of the work we ve done They may be linked to from other pages (on our site and other people s) if we delete the page, the links break It takes time and resources to delete pages 17

18 Events If an event has been cancelled it s better to put that information onto the page rather than delete it it helps us communicate the cancellation Events come off the site calendar, node boxes and near-me map when they ve passed, so it s unlikely anyone will find them If the page is still getting a lot of traffic it s fine to put an [Editor s note] on the page. Does this mean we never delete old content? No! We re developing a content strategy to make sure our site doesn t get so full that we can no longer manage it. Having a site full of great content also needs to be balanced with the amount of space (which we pay for) that content takes up. 18