Welcome [uwtdev3.tacoma.uw.edu]



Drupal 8 (D8) DocumentationTable of Contents TOC \o "1-3" \h \z \u Welcome PAGEREF _Toc40777792 \h 1Main differences from Drupal 7 PAGEREF _Toc40777793 \h 2What’s still in progress PAGEREF _Toc40777794 \h 2Administration Menu PAGEREF _Toc40777795 \h 3Content PAGEREF _Toc40777796 \h 3My Menus PAGEREF _Toc40777797 \h 3Site Management PAGEREF _Toc40777798 \h 4Importing content from D7 (using WriteMaps) PAGEREF _Toc40777799 \h 4Create your content map in WriteMaps PAGEREF _Toc40777800 \h 5Exporting your WriteMap to CSV file PAGEREF _Toc40777801 \h 5Importing the CSV file into D8 PAGEREF _Toc40777802 \h 5Working with content PAGEREF _Toc40777803 \h 6Recipes PAGEREF _Toc40777804 \h 6Slideshows PAGEREF _Toc40777805 \h 6Homepages PAGEREF _Toc40777806 \h 6Super-simple pages PAGEREF _Toc40777807 \h 7Building a Page PAGEREF _Toc40777808 \h 7Webforms PAGEREF _Toc40777809 \h 12Menus PAGEREF _Toc40777810 \h 12Site PAGEREF _Toc40777811 \h 12Contact Information PAGEREF _Toc40777812 \h 12Site URL PAGEREF _Toc40777813 \h 13Homepage PAGEREF _Toc40777814 \h 13Building a Webform PAGEREF _Toc40777815 \h 13WelcomePlease keep in mind that the Drupal 8 site you are working in is a work in progress. We are still making tweaks and refinements to the design, layout and individual elements of the site. But if you see something that doesn’t seem to be working right or that doesn’t work the way you expect, please let us know. Or if you don’t see something that you had in D7 that is critical to your site, also let us know. We can’t guarantee to please everyone — compromises are sometimes necessary to make the site user-friendly on all sides — but we want to consider every request.Throughout this guide we will abbreviate the current website as D7 (Drupal 7) and the new website as D8 (Drupal 8). Drupal is the brand name of the content management system used for websites at UW Tacoma, so what we are doing is essentially a software upgrade. But in this case, Drupal so completely overhauled their software between versions 7 and 8 that they are almost two completely different worlds. This has meant a steep learning curve for our developers, but we have put a lot of effort into trying to make it easier for you to work on your site.Particularly savvy web managers may know that Drupal 9 is due out later this year. The good news is that Drupal 9 is a relatively minor upgrade from Drupal 8 and we expect very little disruption from that change when it happens.Main differences from Drupal 7No more layout pages. In D7 you had Pages and Layout Pages, but in D8, we’ve combined the best elements of both into a single “Page” type.Less coding required. In D7, many of the “fancy” page elements required working in HTML code to add them to your page. That functionality is now done with the click of a button, no HTML needed. The publisher interface appears more complicated because content is created in containers (rather than a single “Body” field), but this allows for more powerful layout options. REF _Ref31963438 \h \* MERGEFORMAT Site Administrator role has been added that can manage many aspects of the site that used to be something you had to ask us to do.What’s still in progressAs already noted, you will see some rough edges in the styling that is still being refined, but all the basic pieces should be in place. There are, however, several key pieces that are still in development noted below. If you plan to use these things in your site, for now we recommend you put in a placeholder (“News widget goes here”).News article content type and News widgetTrumba widget (for calendar feed)Webform content typeAbility to add custom CSS or JavaScript to a pageAdministration MenuWhen you are logged in as a user with the appropriate permissions, you will see an “Admin” button in the top right corner of the screen. Click this button to reveal the administration menu. The specific menu items that appear will depend on whether you are a REF _Ref32223871 \h Site Administrator or REF _Ref32223905 \h Site Publisher.Site Publishers will see Content where you can access all content which you can edit, My Menus, where you can access all menus which you can edit, and My Webforms where, you guessed it, you can access all webforms which you can edit.ContentContent provides a list of all content you can edit, including the content title, site to which the content belongs, the user who originally authored the content, the last time the content was edited, and an operations button which contains edit and delete functionality.The content page also contains a filter form at the top, which you can use to reduce the number of pages displayed. You can filter by the title of content, which content type you are looking for (page, webform, news article), the site to which the content belongs, and the number of pages to be displayed on this page.TitleClicking the Title link takes you to the published version of the page.SiteClicking the Site link takes you to the site overview page.EditClicking the Edit button takes you to the edit form for that piece of content.DeleteClicking the Delete button will delete the content permanently. There is a confirmation screen that appears before the actual deletion happens.My MenusMy Menus provides a list of all menus to which you have editing permissions. This page contains the title, description, and operations which you can perform on this menuTitleThe name of the menu. This title will appear in numerous administrative interfaces. Don’t alter the title unless you have renamed your website (see REF _Ref32242784 \h Name under Site Management).DescriptionA short description of the purpose of the menu. If you have lots of menus, this can be helpful to identify the correct menu.Edit menuClicking the Edit menu button will take you to a form where you can edit the title, administrative summary, and the menu links themselves. Most of the time you’ll be making edits to menu items, not the Title or Description.Site ManagementCurrently in D7, there is only one level of access. Everyone is a Site Publisher with access to manage the content on their site. In D8, we are adding a new role called a Site Administrator. Each site can only have one Administrator and that person should be the one who takes the lead role in managing your site. Here are the differences:Site PublisherCan create, edit and publish pagesCan create, edit and manage?menusSite AdministratorIn addition to the abilities of a Site Publisher, an Administrator has access to the "My Sites" tab and can:Add or remove Site PublishersChange the theme of the siteChange the base URL of the siteManage the site contact information (displayed at the bottom of each page)Manage the funds associated with the site's "Give" button (optional)Set the homepage for the siteIn all cases, Marketing and IT serve as backup Site Administrators, so if the designated administrator leaves or is unavailable, they can assist with site-level changes or can designate a new Site Administrator.Importing content from D7 (using WriteMaps)It is important to note that there is NO DIRECT IMPORT of content from D7 into D8. This lack of direct importing has both negative and positive aspects. On the negative end of things, it’s a lot of tedious work to copy and paste (and rebuild) pages in D8. On the positive end, this is a perfect opportunity to evaluate your content and determine what you really need and how best to organize it. Outdated or unnecessary content can just be left in D7.There are two options for moving your content. One is working directly in D8, creating pages and then copying the content from your D7 site. Note that you cannot copy images or graphics. These must be re-uploaded to the D8 server. If you copy and paste code containing an image path from D7, that image will break once the D7 server goes away.The second option is to use an online tool called WriteMaps. This allows you to reasonably quickly and easily create a tree diagram of your site and rearrange it as much as you want until you are satisfied with the organization. You can also copy and paste content into your pages (requires the paid version). Once you have that done, you can import your WriteMaps setup into D8 and it will automatically create your pages and menu. You will still need to go in and apply formatting to your pages and add images but it’s a big head start.Create your content map in WriteMapsSign up for an account at . The free version allows for up to 50 pages and does not support pasting in page content (only the site tree). The basic version is $15 per month and allows multiple sites, unlimited pages and pasting in content. You shouldn’t need it for more than a few months, so consider whether that $45-$60 investment is worth the flexibility.Make your writemap by following the instructions at your WriteMap to CSV fileBe sure to take note of the name and location of your downloaded WriteMap CSV file.Importing the CSV file into D8The downloaded CSV WriteMap file needs to be uploaded to the D8 server. While you’re logged into the D8 site, do the following:Go to Content -> FeedsClick on Edit for the Feed in questionIn the File field, click “Choose File”Navigate to the WriteMap CSV file and double-click on itYour file name should be displayed in the File fieldClick the “Save” button and you should now be looking at the Feeds list pageClick the Title of the feedClick the “+ Import” buttonConfirm the import by clicking the “Import” buttonYou should be notified that lots of new aliases have been created. This means success.Working with contentTips for improving your site’s navigation (based on research with our students and best practices):Follow Miller’s Magical Number Seven Rule: Menus should contain no more than 7-8 items. More than that make it difficult for people to process and remember information.Maintain a consistent structure across the site to promote ease of navigation.Repeating elements help with usability.Tips for improving your site’s Search Engine Optimization (SEO):Avoid duplicate prehensive pages (even if they are long) are better than repeating content on multiple pages.Separate information into a hierarchy and organize it with different headings and sub headings for user scanning/accessibility/ gives search engines hints for content. Nest them in order of importance.Know your audience and how this information is read by people who have no prior knowledge.Lose your contextual baggage. Pretend you don’t know anything about your content. Think about what questions people would be asking and be sure the answers can be easily found.?Match the language to the audience.Satisfy searcher intent. No one is going to read your site start to finish like a book. They are going to bounce around looking for particular pieces of information.Things to watch out for as you move your contentRecipesSlideshowsHow to build and edit slideshowsHomepagesHow to make effective homepagesSuper-simple pagesSuper-simple pages contain one full-width column and one text component.Building a PageNote: There are no more “Layout Pages.” That functionality is all built into the standard Page in D8.Pages in D8 are highly structured hierarchies consisting of:Sections which have Columns which contain Content ItemsContrast this to D7 where the body of the page was essentially one large container in which you put all of your content. When building out a page in D8, you first add a Section, then you place Columns in that Section, then you place Content Items into each Column. Unlike in D7, where adding accordians or tabs or special grids required inputting HTML code, in D8 creating these “fancy” elements is a matter of filling out a form.Step 1 – Create a pageFrom the Admin menu, click on Content. This brings up a list of all your content. At the very top of the page, click on the blue “+Add content” button.You will be asked to choose what type of content you want to create and for which site. Currently there are only two types of content — Page and Webform. We are still developing the News Article content type and that will be added soon. Most of you will only see one site choice. Under “Page for which site?” click on the name of the site you want to create a page for.Step 2 – Add a section and columnsNow you are ready to start building your page. You are required to give your page a Title, which serves as the first heading (<h1> in code-speak) on the page. An optional Subtitle serves as a secondary title just below the Heading 1.Every page starts with one section by default. Pages can contain as many sections as you want. A good rule of thumb is that you need to create a new section any time you want to change the layout of your content. Remember the pattern of Section>Column>Content, so since you have a section, you need to assign it a column structure. Click on the “Add Section Column” button and choose a column layout for that section from the pop-up window.Note: Pages can contain as many different column layouts as you want, but the more variety in your layout, the busier it’s going to look, so we encourage you to exercise restraint.Column optionsYou may have unlimited rows of columns per page. You cannot nest columns within columns.1 Column: Full WidthA single column which spans the entire width of the content area.Single Column content (full width)2 Columns: Equal WidthsTwo columns, each ? the width of the content area.Left Column Content (half width)Right Column Content (half width)2 Columns: Wide LeftTwo columns where the left column is 2/3 the width of the content area, and the right column is 1/3 the width of the content area.Left Column Content (2/3 width)Right Column Content (1/3 width)2 Columns: Wide RightTwo columns where the left column is 1/3 the width of the content area and the right column is 2/3 the width of the content area.Left Column Content (1/3 width)Right Column Content (2/3 width)3 Columns: Equal WidthsThree columns, each 1/3 the width of the content area.Left Column Content(1/3 width)Center Column Content(1/3 width)Right Column Content(1/3 width)4 Columns: Equal Widths – COMING SOONFour columns, each 1/4 the width of the content area. This is intended for use with the Portrait Grid (also COMING SOON) and is not recommended for regular text content.Left Column Content(1/4 width)Center Left Column Content(1/4 width)Center Right Column Content(1/4 width)Right Column Content(1/4 width)Isotope TilesIsotope Tiles are a special kind of column layout where there is neither a fixed width nor fixed number of columns, rather the maximum number of tiles in a row will be determined by the user-specified width and height of each tile. Tiles can be one of 3 shapes: Standard, Wide, or Tall. Standard tiles are roughly square.Standard TileStandard TileStandard TileWide TileTall TileStandard TileStandard TileStep 3 – Add contentContent Items are placed into a column. Some Content Items are not permitted in certain Column Layouts. TextThis is exactly what you would expect: a simple text container. You can include images in your text and do all the usually styling.Selecting “Dark Theme” puts white text on a purple background. This is best used with small amounts of text as reading light text on a dark background is harder on the eyes.Images and SlideshowsIn D8 we have combined Images and Slideshows into one type of Content Item. The only difference is the number of images. A single image is an Image while more than one image automatically creates a Slideshow. An Image can be converted into a Slideshow simply by adding more Images. Conversely, a Slideshow can be converted to an image by removing all but one Image.After placing a new Column, or choosing an existing Column, click the “Add Content Item” buttonClick “Image/Slideshow”. You will have to first choose some options that will apply to your image (or the entire slideshow).Height. Selecting a height based on your images helps ensure that the spacing on your slideshow is consistent. THIS FEATURE IS IN NEED OF REPAIRBleed Edge. This pushed your photo outside the standard margins of the page, all the way to the edge of the browser window.Fill Slide. This will force your image to fit the entire container space and may crop, shrink or enlarge it to do so. This is only useful for slideshows.Parallax. This is a popular effect where the image is locked in place and the web page scrolls past it. Works best with a large horizontal image. Should be used only on single images, not slideshows.The content item comes with one image by default.Click Add media and select or upload an image.Colorize Image Style (optional). You can choose a color effect (Purple, Gold, or Black and White) to apply to this image.Add a Title (optional). The title is a small headline that can be placed either on top of the photo or below it.Add a Caption (optional). Captions appear below the photo. Choose a Text Position for the Title. Select where on the photo you want the title to appear. You can also select “Below image” if you want the title below and not top of the photo. This field it required but if you are not using the Title field, just leave it on the default setting.Choose an Overlay Theme for the Title. This enhances the readability of the Title (i.e. Choose Light Theme if the image is dark, and choose Dark Theme if the image is light.) This field it required but if you are not using the Title field, just leave it on the default setting.To create a slide show, click the “Add Slide” button and repeat step 3 for each slide. Slides may be rearranged by dragging the crossed arrow icon next to each slide (it’s easier to do this if you collapse all the slides first).AccordionThe?accordion?creates vertically stacked containers that can be opened and closed. They initially display all in a closed state.Note: Accordions cannot be used in Isotope Tiles.After placing a new Column, or choosing an existing Column, click the “Add Content Item” button.Select Accordion. An Accordion display will appear, letting you add Accordion Panels. Each Accordion Panel is a single item in the stacked list of items.Enter a Title, which will be the label the user will click to expand that panel.Enter the Text, which will be displayed when the user clicks the associated TitleAdd additional Accordion Panels by clicking the “Add Accordion Panel” button.Accordion Panels may be re-ordered by holding and dragging the crossed arrows icon next to each item.TabsTabs creates horizontally stacked containers, where only one can be visible at once. By default, the (first) top layer is visible. Tabs cannot be arranged vertically in D8.After placing a new Column, or choosing an existing Column, click the “Add Content Item” buttonClick “Tabs”. A Tab display will appear, allowing you to add Tab Panels. Each Tab will be an individual Tab in the Tabs display.Enter a Title and Text. The Title will be displayed in the Tab and clicking on it will reveal the associated Text. The Text is what appears under the TabAdd more Tabs by clicking the Add Tab button. Repeat Steps 3 and 4 for each TabChoose a Theme for this set of Tabs (optional). Light Theme is a white background with black text; Dark Theme is white text on a purple background. Keep in mind that white text on a dark background is best uses for small amounts of content as it is harder to read.CardsCards create a boxed container with a photo in the top third, a headline and text in the middle and a button at the bottom. This option is popular for highlight links to special content or news highlights.Note: Cards are designed to work best in a 3-column section or in the 1/3 column of a Wide Left or Wide Right section. Using them with other section layouts may produce unpleasant results.Choose a Theme for your card (three choices)Upload an image. Keep in mind that images are landscape (horizontal) and will be cropped to fit the space.Add a Title.Add a Subtitle (optional)Add the Text for your card. Cards are meant to hold a short paragraph of text, 2-3 sentences maximum. There is currently no formatting available (THIS MAY CHANGE) and it does not support line breaks (multiple paragraphs).Add the link and the text for the buttonChoose a Button Style (TO BE DETERMINED; CURRENTLY ALL THREE CHOICE PRODUCE THE SAME RESULT)Webforms[Content in development]Menus[Content in development]SiteContact InformationHow to manage site contact informationSite URLSite slugHomepageSpecifying the homepageChanging the homepageBuilding a Webform I recommend initially practicing with a throw-away webform. Don’t start with your magnum opus.In the Admin menu, click “My Webforms”Click the “+ Add webform” buttonGive a title and description, click the “Save” button, you’ll be brought to the Build screenClick the “+ Add element” buttonClick the “Add element” button in the “Text field” row, you’ll be presented with the Add Text field element screenEnter a TitleClick the “Save” button, you will be taken back to the Build screenClick the “Save elements” buttonNow you’re going to add the webform to a Webform nodeIn the Admin menu, click “Content”Click the “+ Add content” buttonClick the Site under the “Webform for which site?” linkProvide a title, and optionally some Body contentIn the “Webform” dropdown, select the webform you just created.Click the “Save” button, you’ll be taken to the webform node which includes your webform.Yay! You created your first webform 8^)Proceed with further experimentation, and please(!) send screenshots and descriptions of anything wonky or broken to jamesini@uw.edu ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download