Content Manager Resources

Content Manager Resources cthorne Thu, 09/26/2019 - 10:37 AM

Content Types

Content Types

Pages on the website are created using one of the following Content Types.  Each content type may have unique fields and settings available depending on it's use on the website.

  • Basic Page - Use the basic page content type for your simplest pages that only require a title and body.  The body of the page may contain limited HTML but does not support advanced layouts or widgets.
  • Dynamic Page - A dynamic page may include more advanced layouts and elements (or "widgets"). Use a dynamic page for special landing pages with more visual elements such as images and videos and multiple columns.
  • Calendar Event -  Calendar events include start/end dates and location information. These events will be included on your department's list of upcoming events. Past events are automatically removed from the list.
  • Contact Us Profile -  Information for "Contact Us" blocks. This includes location, address, telephone numbers, and webform email contact forms.
  • News Article - Use a News Article for time sensitive information such as a press release or announcement. News articles include a submission date and author details and are included on your departments recent news list.
  • Knowledge Base Start Page - The knowledge base start page represents the initial landing page for a Knowledge Base. Use this page to show featured articles within the Knowledge Base and other featured information. Supports dynamic widgets similar to a Dynamic Page.
  • Knowledge Base Article - Use a Knowledge Base Article for specific information within a Knowledge Base. Knowledge Base articles are searchable within the Knowledge Base. Supports dynamic widgets similar to a Dynamic Page.
cthorne Thu, 09/26/2019 - 10:39 AM

Dynamic Pages and Widgets (Video)

Dynamic Pages and Widgets (Video)
cthorne Thu, 09/26/2019 - 03:45 PM

Department Pages and Branding Options (Video)

Department Pages and Branding Options (Video)
cthorne Thu, 09/26/2019 - 03:45 PM

Dynamic Page Widgets

Dynamic Page Widgets
  • Basic widgets
    • Text - A regular text paragraph.    
    • Image - Displays an image with an optional link to other content.
    • Video - Embed a video from YouTube or Vimeo.
    • Slideshow - Display multiple images with arrow controls to move between images.
    • Accordion - Allows content to be shown or hidden by clicking on the title of the accordion section.
    • Document - Upload documents within a dynamic page. Accepts: xlsx, txt, pdf, doc, and docx extensions.
    • Table Display - Allows display of tabular data on a dynamic page. The first row defaults to a table header. Will import .csv files.
    • Tabs - Allows content to be visible based on the tab selected at the top.    
    • Call Out - A full-width call-out section. Primarily used on the front page.
    • Small Call Out - Contains a title, a description, and a link to additional content. Useful in a 2 or 3 column section.    
  • List widgets - These widgets show various lists of content.
    • Upcoming Events - Show a list of upcoming events.    
    • Featured News - Show a list of featured news articles.    
    • Link Block - This displays an individual link on it's own. Useful for featuring important individual links.    
    • Knowledge Base Links - Show a list of 6 featured links for a Knowledge Base section or topic. If you need less than 6 links, then create a Text paragraph and add the links to it.    
  • Layout widgets
    • Column Wrapper - This will allow you to create a wrapper that spans the entire page, so it can be given a background color. Including 'Container' as a style for this will keep the content inside from spanning the entire page.    
    • Columns (Equal) - A set of equal-width columns with padding. Use Simple Columns if you prefer no padding instead.    
    • Columns (Three Uneven) - A set of three columns that allows you to change the width of each column.    
    • Columns (Two Uneven) - A set of two columns that allow you to change the width of each column. 
  • Advanced widgets
    • Drupal Block -This allows you to use any other block as a paragraph.    
    • Drupal View - This allows you to use any View as a paragraph.
cthorne Thu, 09/26/2019 - 11:39 AM

Widget Examples

Widget Examples

Simple Text Widget

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Slideshow

  • Pueblo Riverwalk
  • Bridge over the river walk
  • Colorado Sign
  • Photo of mountains
  • Courthouse

3 Column Layout (even width)

Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Column 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Column 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Accordions

Accordion 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Sidebar

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Document 

Example docx11.53 KB
Example txt43 bytes
Example pdf675.96 KB

Table Display

This Is An Example Table
Header 1 Header 2 Header 3 Header 4 Header 5
Content row 1 column 1 Content row 1 column 2 Content row 1 column 3 Content row 1 column 4 Content row 1 column 5
Content row 2 column 1 Content row 2 column 2 Content row 2 column 3 Content row 2 column 4 Content row 2 column 5
Content row 3 column 1 Content row 3 column 2 Content row 3 column 3 Content row 3 column 4 Content row 3 column 5
Content row 4 column 1 Content row 4 column 2 Content row 4 column 3 Content row 4 column 4 Content row 4 column 5

Tabs

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Children playing

Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Column 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Call Out Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

cthorne Thu, 09/26/2019 - 10:57 AM

Content Manager Training Videos

Content Manager Training Videos
cthorne Tue, 10/01/2019 - 02:49 PM

Basic Content Management (Video)

Basic Content Management (Video)

First, navigate to the site (currently http://live-pueblo-county.pantheonsite.io) and login with your username and password. 
The login page can be found at /user. Once logged in, you will see the administration toolbar at the top of the page. Click "Manage" to view content manager options. 

In the administration toolbar, click "Content". This will show you a list of all content on the site. You should first filter the list to only show items from your own Department. Click the drop-down menu under the "Department" filter, select your department, and click "Filter". You may also filter the results based on Content Type, and Status. Your filters will be remembered by the system when you revisit this page.

To create new content, click the "Add Content" button above the filters. You can also select "Content" => "Add Content" from the administration toolbar.

Once on the Add Content page, you can select the type of content you would like to add. See ... for a description of the various content types. Click "Basic Page" to open the form to add a new basic page. Add some test content, and save the page as a Draft. Draft content is not available to the public. Use the Drafts for content that is not yet complete and ready to be published. Save often to avoid losing any work.

cthorne Tue, 10/01/2019 - 02:56 PM

Using Templates (Video)

Using Templates (Video)

Some basic templates have been provided as a starting point for creating your content. The templates below include examples of a few different layouts you may want to use on your pages. Use these templates as a starting point for creating content.

To clone a template:

  1. Open the template in a new tab (CTRL+Click one of the links above). 
  2. Click the "Clone" tab above the page content (next to the Revisions tab).
  3. Click the "Clone" button on the confirmation page to complete the clone
  4. A new cloned page will be created as a draft
  5. Add any header media and make sure to change the Department field to your own department

You can also clone any other existing page and use it as a template.

cthorne Tue, 10/01/2019 - 03:45 PM

Adding Header Media (Video)

Adding Header Media (Video)

Every page on the website has either a header image or a header video. The header media is the image or video that is displayed underneath the main menu and behind the page title and breadcrumbs.

You can customize the header media for each of your pages or leave it empty to use the default. The website uses a simple hierarchy to determine what media should be displayed by default if the field is left empty.  If no media is provided, the site will first look for the configured department. If the department defines any header media then the page will inherit the image/video from the department settings. Finally, if no header media is configured for the department or no department is selected for the page, then the default homepage media will be used. 

Edit any page to add your own custom header media. The header media field is located directly under the department dropdown. From this field, you can select either "Header Video" or "Header Image".  For videos, only Vimeo is currently supported. Contact the IT department for question about uploading your videos to Vimeo.

Once you've decided on an image or video, you can choose to re-use an existing media item or add a new one. 

The aspect ratio of the header image will change slightly depending on the size of a visitor's browser (table, phone etc). Below are some general guidelines to keep in mind when selecting your header image or video:

  1. The most important part of the image or video should be in the center. This will keep it from getting cut-off on phones or wide screens.
  2. Do not include text or overlayed graphics. They will get cut-off or covered by page title and breadcrumb section.
  3. For images, upload in jpg or png format. The image resolution should be at least 1920px wide by 958px high.
  4. Keep videos short, ideally no more than 30 seconds. The video will loop automatically.
  5. Audio is not included with the video.
  6. The type of videos that work best are short drone style shots with a wide field of view.
cthorne Tue, 10/01/2019 - 03:07 PM

Department Landing Pages (Video)

Department Landing Pages (Video)

Each department has a main landing page that is a little different then other pages on the site. Department landing pages are implemented as "Taxonomy Terms". Taxonomy Terms are used to organize content in Drupal and this allow other pages to be related to specific departments. However, editing a department taxonomy term is very similar to editing any other page with a few additional options.

Department landing pages are not included in the main list of content. To edit your department landing page, first select "Structure" => "Taxonomy" => "Department" from the main administration menu at the top of the page. This will take you to a list of all departments. 

Find your department in the list, and click "Edit" under the "Operations" column. Once on the edit screen, it will look very similar to editing any other page. 

There are two department branding options that you can customize.

  1. First, you can upload a default header image or video for the department, this will be used for the department landing page as well as the default for any other department pages.
  2. The second option is the branding color. You can select any HTML color from the color picker. This color will be used as the background for the title bar as well as the default color for buttons within your department. When picking a branding color, keep in mind that the title of the page is white so darker colors will allow for better contrast and accessibility.

When setting a branding color, you can also select an opacity value as a decimal between 0 and 1. This will add some some transparancy to the title bar. 0 is completely transparent and 1 is completely opaque. 0.8 is a good default value to provide a little bit of transparency while still keeping the title easily readable. 

Finally, below the branding options, you can add widgets such as layouts, slideshows, images etc to the department page similar to any other dynamic page.


 

cthorne Thu, 10/03/2019 - 10:43 AM