Amesdocumentation

WEBSITE USER GUIDE

This is it — you’re ready to learn the ins and outs of your new website! We hope this manual helps, but don’t hesitate to ask questions if you need further instruction.

Logging In

1. Browse to http://ames.k12.ia.us.dev.juiceboxint.com/jb-login 2. Log in with username siteadmin and password ames!2015$

The main URL for the site is http://ames.k12.ia.us.dev.juiceboxint.com.

Creating User Accounts

1. Hover over Users in the sidebar and click Add New. 2. Type a username. This can be anything you want, just keep in mind that usernames cannot be changed. 3. Type your email, first name, last name, and password. 4. Change the role to Site Administrator and click Add New User.

Managing Content Pages

Creating and editing pages

1. To add a new page, click Pages in the menu on the left and then click Add New. (Note that many of the pages have already been created, so be sure that a page doesn’t exist before creating it.) 2. Give the page a title. 3. Fill out page content. The bar at the top allows for rich-text editing like you would see in Microsoft Word, including bold, italic, and bulleted lists.

Note: After you’ve logged in, you now have a black administrative toolbar at the top of every page when browsing the main website. From here, you can click Edit Page to switch to the editor for the current page or post. This is a convenient way of editing pages since you do not have to browse through the list in the backend admin.

1 Formatting text

● Subheadings (level 2, level 3, etc.) can be used by clicking the Paragraph dropdown on the second row of the toolbar and selecting the appropriate heading. (Note that heading 1 is reserved for page title, so it is not available in the editor.) ● Intro text (large-format paragraph text) can be used at the top of a page. Click inside a paragraph and select Formats > Intro Text to use this. ● Links to both internal and external content can be included in your pages. Just highlight the text you would like to link, and click the link icon in the top menu. You will be prompted with a box with options for external (top) and internal (bottom) links. ● Additional emphasis can be given to links by adding either the Orange or Grey Callout Link formats. Click inside a link that has already been created and select Formats > Orange/Grey Callout Link. ● Horizontal rules can be used to divide sections. Click the horizontal bar icon in the top row of the toolbar to add a section divider.

Using Tables

1. To add a table to a content region, click the Table icon in the top row of the toolbar, hover over Insert Table and select the number of rows and columns. (You can always add more later.) 2. To create row or column headings, select the cells you want to modify (click and drag) and then click Table > Cell > Table Cell Properties. Change Cell Type to Header cell and then Scope to either Column or Row depending on whether the header cells describe the cells below them or the cells beside them. 3. Fill out the table content. The columns will automatically adjust based on the width of the content inside the cells, but if you need to fix the width of a cell (for instance, if one cell has a lot of text and is throwing off the width of the entire column), you can set this in Table Cell Properties. 4. To add additional rows or columns, put your cursor inside a cell and go to Table > Row > Insert Row After (or Column, or Insert Before, depending on what you’re trying to do). 5. To delete a table, put your cursor anywhere inside your table and go to Table > Delete Table.

2 Adding images to pages

1. To add images, click the Add Media button above the toolbar. 2. On newer browsers, you can drag-and-drop a file from your hard drive into the large upload region, and it will begin uploading automatically. Otherwise, click the Select Files button to choose a file from your hard drive. 3. The image will begin uploading. Once it’s complete, find the Attachment Display Settings section in the bottom-right corner of the panel. Choose your Alignment with the text (left, right, or center). 4. Under Link To, keep it set to None if it’s a decorative image that should not be clickable. If it’s a thumbnail of a larger version, choose Media File to link it to the full-size photo. 5. When you’re finished, click Insert into page to put it in line with the text.

Note: Uploaded images are automatically resized to a maximum of 1280x1024px. This will keep the server from unnecessarily storing full-size camera photos when they will only be displayed at screen resolution.

Embedding videos and other media

The editor allows easy embedding of videos from YouTube or Vimeo photos from Flickr or Instagram, tweets from Twitter, and even slideshows from SlideShare or Scribd.

To embed one of these, just create a new line inside the text box and paste the URL of the content you’re embedding, such as: ● https://www.youtube.com/watch?v=Fo2-sl0R1I0 ● https://twitter.com/ACSD_News/status/559097853218258944 The embedded content will load and display inside the editor. This is the same as it will look once the page or post is published.

A full list of supported embeddable content can be found here: http://codex.wordpress.org/Embeds

Setting header images

Header images are optional images that can be included at the top of a standard page to add personality and break apart the monotony while browsing. If no header image is included on a page, the content will just appear directly under the breadcrumb menu.

3 1. Prepare your header image. Header images should be at 676 pixels wide and 208 pixels tall. The image you upload can be bigger than this, but it’s best to keep it around this size to avoid unwanted cropping. 2. When the image is ready, on the page edit screen, scroll down and find the Featured Image box on the bottom right. Click Set featured image. 3. Upload a new image via drag-and-drop, or select an existing image from the media library if you’ld like to reuse the same photo across multiple pages. 4. Click Set featured image. You’ll be returned to the edit screen, and the image will display in the box.

Publishing the page

In order to appear in the site navigation automatically, a page must be created underneath of an existing page. 1. Before publishing a new page, look in the sidebar on the right and find the Page Attributes section. 2. Under the Parent dropdown, select a top-level page to place this new page underneath. 3. Once the page has been given a position in the hierarchy, click the blue Publish Page button.

Adding right sidebar content

A right column can be added to standard pages to allow for additional or ancillary content to be displayed. 1. To enable the right sidebar, in the Page Attributes box, select 2-column page from the Template dropdown. 2. From here, either publish the page, or save it as a draft and reload. Below the content region, you’ll have a new text box called Sidebar Content. 3. Add content to this box as necessary and either save the page as a draft or publish it to save your changes.

Setting the page order

1. By default, pages will be ordered alphabetically. However, if you want to put them in a specific order, click Pages in the left sidebar menu. 2. Find your page in the listing. (They display hierarchically, so it may be indented underneath its parent page.) 3. Hover to the right of the page title. Your cursor will change to a “move” icon.

4 4. Click and drag either up or down to reposition the page order. The new order will be saved automatically.

Managing news articles

News articles share a lot in common with standard pages - the interface is similar, and all of the content formatting described above in Pages also applies to articles. The news engine is a blog at its core: articles are displayed chronologically with the latest posts at the top, and they are categorized by school to allow for easier browsing.

Creating a new post

News articles are managed in the Posts section of the admin. To create a new post, click Posts > Add New in the left menu.

The content editor is the same as what you’d see on a standard page, and all of the same features are supported. The one thing that’s different is the use of the Read More divider. We’ve designed this news section so that it looks best with article summaries, so for longer articles the user will click through to read the full text.

To use the Read More divider, put the cursor on its own line where you want the break to occur and click the icon on the right side of the bottom row, called the Insert Read More tag. When this post is displayed on the news listing page, a Read More button will appear. The full text will only display when a visitor clicks through to the article itself.

Note: The use of the Read More divider is just a recommendation and is not required. It’s best to use it if the content of your post is longer than one or two paragraphs.

Featured Images

Although featured images are not required on news posts, featured images must be included if a news post is to be featured on the homepage (explained later). The process for including featured images on news posts is the same as on pages, just be sure that images are a minimum of 570 pixels wide and 360 pixels tall.

5 Categories

News posts should either be categorized by the school that they apply to or as District News. The default news category is District News.

Galleries

Galleries can be used on any page or post on the site. Here’s how to add one: 1. Use Add Media to upload the photos. 2. Once the photos are uploaded, click Create Gallery in the top-left corner of the window. 3. Click each photo that you want to add to the gallery. This will check a box adding the photo to your collection, which you can see at the bottom of the window. You can search for photos and change the view and your photos will remain selected even if they aren’t visible. 4. Once you’ve selected all the photos you want to use, click Create a new gallery in the bottom-right corner of the window. 5. From here, you can drag and drop to reorder, and you can click individual photos to add titles and captions. When you’re finished, click Insert gallery to put it inside the content. You can always click the gallery and then the pencil icon in the top-left corner to add, remove, reorder, or retitle images.

Scheduling and back-dating articles

By default, news articles will be given the date and time that they were originally published. However, you can change the date by clicking the Edit link next to Publish immediately.

If you choose a date in the past, it will post retroactively and will appear in the post listing and month archives according to its post date. This will be useful if you decide to pull over the news releases from the past few months before launch so that you have some archives built up.

If you choose a date in the future, it will schedule the post for that date, and it will not appear on the site until that date and time arrives. This is useful if you want to write a news release ahead of time but have it show up on a certain day without you having to log in at exactly that time.

6 School Pages

Creating and editing school pages

Each school page is completely customizable and will function almost like a “mini website” within the larger district website. These pages are hierarchical, just like regular pages, with parent and child school pages. To add a parent school page:

1. Click Schools > Add New in the admin menu. 2. Give the page the title of the school. 3. Publish the page, which will refresh your screen, and new fields will appear. 4. Fill in the Shortened name for sidebar header, if desired. If this isn’t included, the page title will be used instead. This is just useful for longer titles, e.g. Northwood Pre-School Center, Ames High School, etc. 5. Fill in the contact information for the school. 6. Include a short excerpt about the school you’re creating in the School Description section. This will appear at the top of the content on the school’s page. 7. Enter the rest of your content in the content box underneath that. 8. In the School Categories box, select the appropriate School Template. 9. Select the appropriate school in the School News Category dropdown. School News will be explained later in the document. 10. Select the appropriate Event School Category. 11. Set the Featured Image to an image of the school. This image should be 720 pixels wide and 300 pixels tall. 12. Click update to save the changes to your school page.

For school child pages to appear correctly in site navigation, they must be assigned a parent school page. To add a child school page:

1. Click Schools > Add New in the admin menu. 2. Under Attributes, select the parent to the page you’re creating. 3. Fill in the rest of the content as you normally would.

Events Calendar

The calendar displays events based on the filters and criteria set by the user. Individual events are entered similarly to other types of content on the site.

Creating a new event

1. Go to Events in the sidebar and click “Add New”. 7 2. Enter a title for the event. 3. Set a Start Date and Start Time for the event. 4. If the event is all day (e.g. a holiday, no school, etc.), check the All Day box. 5. If the event as an end date/time, fill out the End Date and End Time fields. If the end date is indeterminate or you just don’t feel like including it, you can leave it off - it’s primarily for display purposes (except in the case of events that take place across multiple days). 6. Fill out the Event Location if applicable. 7. Fill out the Event URL if you’d like to link someplace - for instance, if you wrote a news article about the event or if there’s a registration link. Check the Open in new window? box if it’s an off-site link and you’d like to keep them on the district site as well. 8. Select your categories, schools, and/or Digital Backpack types (see below for more details). 9. When you’re finished, click Publish to save the event.

About event categories

There are two different ways of categorizing events. The Event Category is the high-level category or subject, e.g. Athletics or Arts. The School is the school that the event Applies to.

Digital Backpack

Digital Backpack events are very similar to regular events, but they have a few additional features and are displayed in multiple places. Users will also have the opportunity to submit their own Digital Backpack events, which will need to be approved and published by the site administrator.

Adding Digital Backpack Events

1. Fill out the top event details as usual. 2. When adding a Digital Backpack event, be sure to select the Digital Backpack category. 3. Select a Digital Backpack Type. 4. Scroll down to the Digital Backpack details section and fill out all applicable fields. 5. Attach an Event Flyer by clicking on the Select Flyer button and uploading a file from your computer or selecting a file from the Media Library. 6. Click the blue Publish button to have the Digital Backpack event display in the district calendar as well as in the Digital Backpack section of the site.

8 Approving Digital Backpack Events

When a user submits a Digital Backpack event, a notification email will be sent to the email of your choice. These events will appear in the Events list with the Digital Backpack category and Pending post status. Simply click on the event to edit it and check to make sure everything looks correct (Digital Backpack Event Title, Start Date, and Event Type are all required fields and will always be set). If everything looks good, just publish the event as you normally would.

Customizing the Homepage