METRANS Drupal Website Training for Content Editors Part 2

Transcription

1 METRANS Drupal Website Training for Content Editors Part 2 Revised 7/11/14 Section 3: Added Important note about updating links in research project content. Section 4: Added notes for how to add new Year or Research Topic area for Research Project. Section 6: Added note for how to change remove link for Goods Movement News Source website that no longer exists. 1. Review of Training Part 1 Use of the dashboard Content types o New/Announcements o Events o Basic page Specifying the entity/center Using the WYSIWYG editor Adding a page to the site menu Finding content with Content management and Content search 2. Research Projects Research projects on the current METRANS website consist of two components A database record in UIPublish with standard fields for a project A Dreamweaver page of freeform HTML All UIPublish database records have been migrated to Drupal, so the new site displays standard information for all historic projects. This includes attached PDFs. The HTML from the Dreamweaver page for each project must be manually transferred into Drupal. As of May 30, 2014, HTML has been transferred for all projects from 2010 through HTML content for older projects must be transferred. 3. Transfer HTML Content from Historic Research Projects This becomes a fairly simple process once you ve transferred a few pages. You will need to be able to view and copy the HTML code for a project. You can either view the page source with your browser or open the page in Dreamweaver. To illustrate, this example uses project A Geospatial Framework for Dynamic Route Planning To view page source (HTML), find the project in the old site on the following page: Click on to open the project page Wilshire Boulevard, Suite 570 Los Angeles California Telephone Fax Web info@urbaninsight.com

2 In Windows with Firefox: o Right-click on the page o Click View Page Source In Windows with Internet Explorer: o Right-click on the page o Click View source On Mac with Safari: o (This step one time only) Go to Preferences -> Advanced and check 'Show Develop menu in menu bar'. o Then on any web page you can right click and select 'Show Page Source' or type Command-Option-u. In Dreamweaver, find and open htm 3.2. With a separate browser, open the existing page for in the new site. a. Go to Research > Research Projects b. Find Proj # c. Click the red project name link to display the existing project page. d. Click the Edit tab. e. Scroll down to the Body field. f. Below the field, click Disable rich-text. This will display HTML To copy and paste the HTML from source: Note: The project title and PI information are already included in existing Drupal project pages. This information should not be copied from the old HTML page. a. Look for the following code in the HTML source: <p><strong>project Objective b. Beginning with the <p>, select and copy the page code up to, but not including <!-- InstanceEndEditable --> c. Paste the code into the Drupal Body field. d. Click Enable rich-text. e. Save the Drupal page. A note on editing the copied HTML: You may choose to use the WYSIWYG editor to modify the format of the copied HTML content. If you change the format of a section header (e.g. Project Objective ) to H2 or H3, you may see the format applied to more text than you intend. If this happens: Undo your change Use Enter to add two blank lines above and below the text. Re-apply format to the text. Remove the blank lines. Urban Insight METRANS Page 2

3 Important note about updating links in research project content: Most research project content contains links to other research projects. You must update each link with the new page name on the new site. Example: Under Relationship to Other Research Projects a project has a link to In another browser, open metrans.org, go to Research > Research Projects and find Proj # Open the page and copy the URL for the page. Back to the first browser, update the link with the new URL. Do this for each project link and save the page. 4. Enter a New Research Project When you create a new research project item, if content for the project researchers (PI or Co-PI) has not already been entered, you may want to enter that first (see next step). However, you can choose to enter project content first, then enter researchers, then come back and add them to the project. a. From the dashboard, under Create new content items select Research project. b. Select the correct entity-center. c. Select the correct year. d. Enter the project number. e. Enter a Title. This is for Drupal admin purposes only, so it can be shorter than the summary. f. Click Body (Edit summary). Enter the project summary here. This actually acts as the project title in a Drupal list and project detail page. g. Enter the body content. h. Select the topic area. i. If the PI has already been entered as a Researcher, under PI start typing the researcher name. When the full name appears select it. j. If there is more than one PI, click Add another item. k. Enter Co-PI in the same way. l. If the project is complete, check that checkbox. m. If the project summary PDF has been created, under PDF, click Browse and upload the file. n. Save the new research project Add a new Year for projects (admin only): In the black Drupal menu bar, go to Structure > Taxonomy. In the row for Year, click list terms. In upper left, click + Add term. In Name enter the new year. No need to enter other fields. Click Save Add a new Topic Area for projects (admin only): In the black Drupal menu bar, go to Structure > Taxonomy. Urban Insight METRANS Page 3

4 In the row for Research Topic Areas, click list terms. In upper left, click + Add term. In Name enter the new research topic area. No need to enter other fields. Click Save. 5. Enter a New Researcher Note: All researchers (PIs and Co-PIs) through 2012 have already been transferred into the new Drupal system. a. From the dashboard, under Create new content items select Researcher. b. For Title, enter the researcher s full name. c. Enter First name, MI, Last name, Suffix. d. Upload an image. The optimum size is 90px 100px. If smaller, the image may look pixelated. e. Enter information for the remaining fields. f. Optionally, enter a URL for the researcher. This can be a personal web page or an organization web page. If URL is entered a graphic link will appear next to the person s name in the Research list. Note: When you save a researcher content item you will see a page with a generic format with the information. This page is not displayed on the website. To ensure that the researcher information is appearing correctly, go to Research > Researchers and find the entry for that person. 6. Searchable Goods Movement Timeline Database a. From the dashboard, under Create new content items select SGMTD timeline event. b. Enter the headline. c. Set the date. d. In Body, enter the article summary. e. If there s a special link for the article, enter in Article link. f. Select the news Source. g. Save the item. Note: When you save a researcher content item you will see a page with a generic format with the information. This page is not displayed on the website. To ensure that the SGMTDB information is appearing correctly, go to Research > Searchable Goods Movement Timeline Database and find the entry for the entry. To enter a new Goods Movement News Source: a. Via the black Drupal menu bar, go to Structure > Taxonomy. b. To the right of Goods Movement News Source, select list. c. At the top of that page, click + Add term. d. Enter the Name of the news source. Urban Insight METRANS Page 4

5 e. Enter the URL to the home page of the news source. f. Save the new entry. To change or remove the URL for a news source: a. In taxonomy, find the news source item. b. Click edit c. Change or clear the Source link field. d. When an item for a news source with no URL is listed, the source name will have no link. 7. Embed a YouTube Video into a Page Note: When logging into the METRANS YouTube account, you may be presented with multiple account channels to choose from. Select the one labeled simply METRANS. a. After logging in, click the tri-bar in the upper right and select My Channel. b. Upload the video, if it hasn t been uploaded yet. c. Go to the video page. d. Click Share. e. Under Share this video, copy the URL. It will look something like f. Go to the METRANS web page to which you d like to add the video. g. In the WYSIWYG editor, place the cursor in the position for the video. h. Select Video filter, on the right end of the toolbar. i. Paste the video URL into Video URL. j. Click Insert. k. In the editor, you will see code that looks like [video: l. Save the page. 8. Create and Embed a Slideshow into a Page Create the slideshow: a. From the dashboard, under Create new content items select Slideshow. b. For Title, enter a name for the Slideshow. This name is administrative and will not be seen by the viewing public. c. Browse for and upload an image for the slideshow. Images should be a minimum of 720px 404px. d. Optionally, add a title for the slide. e. Optionally, add descriptive text for the slide. f. To add another slide to this slideshow, click Add another item and repeat steps c-e. Embed the slideshow on a page: When you save a slideshow content item you will see a page that displays the slide. This page itself is not displayed on the website. To display the slideshow, you must use the WYSIWYG editor to embed it into another existing page. Urban Insight METRANS Page 5

6 a. Select the page you d like to display the slideshow on. The page can be a Basic page, News/Announcement or Event. b. In the WYSIWYG editor, place the cursor in the position for the slideshow. c. Select Embed a Node, on the right end of the toolbar. d. Scroll to find the name of the slideshow and select it. e. Click Embed. f. In the editor you will see code that looks like [[nid:4185]] g. Save the page. 9. Inserting an HTML Table into a Page If you need to insert a table into a page, visit the example Page with Table provided on the Drupal site at /drupal-training-and-sample-web-pages a. In Edit mode, click Disable rich-text. b. Copy the HTML code from this page. c. In your new page, also click Disable rich-text. d. Paste in the TABLE code. Modify as necessary. Note: This site is responsive which means it adapts its layout based on the width of the browser or device it finds itself on. When setting the width of a column, specify width as a percentage not as a sete number of pixels. This will enable the TABLE to adapt properly. It is recommended not to display more than three columns. More columns than that will not display well on a mobile phone. 10. Notes on Special Pages To edit these pages, it will be best to click Disable rich-text and replicate the HTML provided. Advisory Board: Uses an HTML TABLE METRANS UTC > Research Projects: Uses an HTML TABLE Research > Streaming Videos: Uses an HTML TABLE with attached image files Outreach > Townhall: Uses an HTML TABLE with embedded links to attached PDF files, videos at and other web pages within the METRANS site. Outreach > Transcasts: A non-table page including YouTube video links. Outreach > Webinars: A non-table page including links to videos at Urban Insight METRANS Page 6