CONTENTS
- What is Drupal?
- Our Process
- Your Account
- Content
- Editing Content
- Menus
- Extras - Aligning images/text
WHAT IS DRUPAL?
Drupal is a free, open source content management system (CMS). It allows developers and non-developers alike to build complex websites using visual components. In the context of CACS built websites, Drupal allows our clients to manage robust websites without the need for regular code development. We use Drupal to build and configure websites that, outside of hosting, you'll be able to fully manage without our involvement.
OUR PROCESS
Your pre-launch website will be hosted on our development servers. There, we can share our work and collaborate to realize your vision. As the initial website development phase is completed, we'll create editor accounts for you and your personnel. Around the same time, we'll schedule a training session. Once you feel comfortable, you may start adding content to flesh out your website.
Sometimes adding content to a site can reveal aesthetic concerns or make a client reconsider a design route. At this point we can make final development changes before prepping for push to our live production servers. Assuming all content and development changes have been completed, we schedule a launch date and place an embargo on the site. This means that all content editing must stop until otherwise noted. Any content added after the embargo may be lost in the transition to production.
Once the website is live, we'll once again review to verify that everything is in order. If you have an old version of the website at a different domain (url), we'll handle redirection to the new domain. All content editing after launch will be made on the live website. Your development website will remain, but will be used only for code changes, not content. Any content you add on the development servers may be overwritten.
YOUR ACCOUNT
Around the time of your scheduled training, you should receive an email notice of your Drupal account activation. It will include the username and temporary password you will use to access your website's administrator menu. Using the username and password, visit the login page of your development website. Here you should enter your username and password. Upon successful login, you'll be taken to your user page. If you haven't already, change your password to something you can remember. To do so, click the "Edit" tab. You'll need to enter your current password in the "Current password" field as well as your new password twice in the "Password" and "Confirm Password" fields. Remember to click "Save" or your password will not be changed.
In the future, you can login to the admin area of your site at at http://your-site-url/user/login (for example, http://president.virginia.edu/user/login).
Note that your account belongs to you, and only you, unless otherwise noted as a group account. Make your password secure and never share with others. If you need to give someone access to admin menu, a new account should be created. You may or may not be able to do this, depending on your user permissions. If you're not sure, check with your account administrator.
Once your website has gone live, you'll want to access the login page on the live site. Any account changes you make to the development server after your site has gone live will have no effect on the live site and may be overwritten.
Forgot your password? Go to your /user page (i.e., http://mysite.virginia.edu/user) and click on the tab 'Request New Password'.
CONTENT
There are a few ways to access content on CACS built websites. When navigating the site while logged in, you'll notice "EDIT" links attached to content. This is one way that you can edit content on your site. Some content will not have "EDIT" links, but will instead show a gear symbol when hovering over that area of content. You can use those gears to configure or edit content as well, assuming you have the right permissions. Finally, you can access a list of nearly all website content by clicking "Content" on the admin menu.
Sometimes this list can be overwhelming due to the amount of content listed. Using the filters under "SHOW ONLY ITEMS WHERE," you can show only content of a certain type or status, making it easier to find specific content. To edit content, click "edit". Clicking on the content title will take you to the content's page, not the editor.
If you'd like to add a new piece of content, click the "+ Add content" link. Next, select which type of content you'd like to add. Finally, complete the necessary fields and save. The "Editing Content" section has more information on completing these fields and publishing content
EDITING CONTENT
When adding or editing content, you're shown a page with associated fields and settings. Fields with a red asterisks are required, though it is recommended that you complete all fields unless otherwise noted. During your training, the proper creation of content types will be explained, as this is generally site and content type specific.
When editing body content, you're able to use a WYSIWYG (what you see is what you get) editor. This frees you from having to write any code and offers an interface similar to a text editor.
Adding Images
**Important note - the WYSIWYG editor/file uploader works best in the browsers Chrome, Firefox and Safari. Avoid Internet Explorer if you are adding images and/or files to your website.
To add images in the WYSIWYG editor, click the "Image" button. Next, click the blue "Browse Server" button.
Now you can either pick an already existing image in the right column or upload one using the "Upload" button. To upload an image, click the "Upload" button and "Browse..." to select a file from your computer.
Once you've selected your file, click "Upload" to finish uploading your image.
Now your image should be selected in the right column. Click "Insert file" to choose your image.
In the "Image Properties" window, supply "Alternative Text" to make your image meet accessibility requirements. This should be a description of the image. If the image is too large, you can use the "Width" and "Height" fields to adjust accordingly. The "Alignment" field will float your image left or right and apply text-wrap.
The "Link" tab allows you to link the image to a URL or your can "Browser Server" to select a file on your server that the image will link to. Once you've finished adjusting the properties, click "OK" to insert your image.
Adding Links
To add links in the WYSIWYG editor, highlight the text or select the image you'd like to make a link and click the link button.
The "Link Type" field allows you to select whether the link should direct to a "URL", an anchor in the text (to jump to a pre-defined area in the text), or an email. Most of the time you'll be using the "URL" link type. When linking to an external website, drop a full link into the "URL" field. If you want to link to another page on your website, you'll need to use relative URLs. Relatie URLs are defined assuming the browser already knows your current page location. For example, if you are adding a link on the page "http://www.virginia.edu/example/example-page" to "http://www.virginia.edu/another-example", you'd enter "../another-example". The "../" signifies taking two steps back in the URL. If you only need to take one step back, you'd use "./". If you don't need to step back in the URL chain, just enter the new path.
Adding Files
**Important note - the WYSIWYG editor works best in the browsers Chrome, Firefox and Safari. Avoid Internet Explorer if you are adding images and/or files to your website.
To add files in the WYSIWYG editor, highlight the text or select the image you'd like to make link to a file and click the link button.
Click the "Browse Server" button. If the file you want use already exists, select it in the right column and click the "Insert File" button. If you need to upload the file, click the "Upload" button and then the "Browse..." button.
Select the file on your computer you'd like to upload. Now click the "Upload" button.
Your uploaded file should appear in the right column. Verify that it's selected and click the "Insert file" button. Finally, click the "OK" button to finish building a link to your file.
Finishing Up
Once you've finished editing your content, you'll find a menu of settings at the bottom of the page. If you'd like for your new content to have a direct link on the menu bar, check "Provide a menu link". You'll be asked to supply a "Menu link title" which will be displayed on the menu.
The "URL path settings" tab allows you to manually change the URL for this content. Drupal automatically builds the URL based on the content title, so if you want it to be something specific, you'll need to uncheck "Generate automatic URL alias" and supply your own.
It is good practice to create a revision history under the "Revision information" tab. Check "Create a new revision" and supply a message about your changes. Creating a revision history allows you to view previous changes and revert if necessary, preventing loss of content.
Under publishing options, you can use the checkbox to publish or unpublish your content. If you want to edit this content again before actually making it live, uncheck "Published".
Now that you have all fields completed and options set, you can save your content by clicking the "Save" button. Note that if you haven't changed any of the publishing settings, this will make your content live. Unlike some other CMS's, there is no "Draft" state for a saved change, only published or unpublished.
Once your website has gone live, you should only edit content on the live site. Any content changes you make to the development server after your site has gone live will not show on the live site and may be overwritten.
MENUS
To edit navigation menus, click "Structure" on the admin menu. Click on "Menus." Now click "list links" on the "Main menu."
This shows you all the navigation items for the main menu of your website. You can drag and drop navigation items to reorganize, enable/disable items, and if you'd really like, delete items.
To add a link to the menu, you can either "Add a menu item" when editing specific content (the recommended way) or click the "+ Add link" button on the "Main menu" link list page. When clicking the "+Add link" button, you'll be taken to a page with the necessary fields. Provide a "Menu link title", which will be displayed on the navigation menu. You also must provide a path. This can be a full link to an external website or a relative link to a page within your website. Once complete, remember to click "Save".
Once your website has gone live, you should only edit menus on the live site. Any menu changes you make to the development server after your site has gone live will not show on the live site and may be overwritten.
EXTRAS
Aligning Images Lists with Text
A difficult thing to format in a wysiwig editor is a list of images with text beside each image. Here are a couple tricks to use!
Here's an example:
The arch is used as an architectural detail on the Rotunda.
The arches of the passageway is a reflection of the Rotunda.
The windows also repeat the arches of the Rotunda.
As you can see in the example, lists look best when images are all the same size, so you might need to do a bit of image cropping and resizing before inserting them into your webpage. Drupal's file upload system does has crop/resizing, but it might cut out an important part of your image.
> Insert your photo; align it left
> insert your text that should go next to the photo.
> At this point, if you save, things should look fine. The problem comes in when you try to add the next left-aligned image - it will float itself next to the above text, which won't look correct.
> BEFORE inserting your 2nd image, go into 'Source' or code view in your wysiwig editor and add the following snippet of code: <div class="clearfix"> </div> This code will act like a hard return and allow you to cleanly add your next image and text.
> Repeat 1st, 2nd and 3rd bullet, then save. Your page should look something like the above example.