1 / 52

Diggin ' Drupal Gardens

Diggin ' Drupal Gardens. 502: Drupal 7 Content Types. What We’ll Be Covering…. Getting Started Log In and get Lab Materials Content Types Blog Entry FAQ Poll Book Gallery Item Images Embed an Image Video Embed a Video. Getting Started: Your Lab Materials.

delu
Download Presentation

Diggin ' Drupal Gardens

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Diggin' Drupal Gardens 502: Drupal 7 Content Types

  2. What We’ll Be Covering… Getting Started • Log In and get Lab Materials Content Types • Blog Entry • FAQ • Poll • Book • Gallery Item Images • Embed an Image Video • Embed a Video

  3. Getting Started: Your Lab Materials Please use Mozilla Firefox as your browser for this workshop. Log in to: http://discoverdrupal.drupalgardens.com After logging in to the training site, to gather your lab materials for this workshop, do the following: • Open another tab in your browser • In your new tab, go to http://oregonstate.edu/cws/training • Look in the lower right and click on the Training Materials graphic – this will take you to the page where all training materials for all CWS Drupal classes are distributed • Scroll down to the 500 series of classes • Locate the 50X Class Title row and click on the Lab link – download the lab to your desktop • Once the zip file is downloaded you will need to extract it. For a PC, right click on the zip file and select Extract All. For a Mac, simply double-click on the zip file. • You can then move the zip file to your trash

  4. Content Types:Overview In broad terms, a content type is really just a bit data entry form. Different content types are used for different “categories” of content. These different categories of content contain their own respective features and behaviors – as an example: • Blog entry – a web log • Poll – issues a question with a set of possible answers and gets input from audience Really, it’s just a way to help sort and organize the various types of content that may be present on a Drupal site. Additionally, many of the default content types are also accompanied by some additional features that can use the data gathered in the content type in various ways throughout your site.

  5. Content Types: Default Content Types Our Discover Drupal site in Drupal Gardens, by default, comes with nine different content types: • Basic page – for static content • Blog entry – for a site-wide or multi-user blog • Book page – for hierarchical content • FAQ item – for a clean question and answer display • Forum topic – for discussion based posts inside of a forum • Gallery – for a flexible media gallery • News item – for time specific content like press releases or announcements • Poll – for voting • Webform – for forms/questionnaires intended for an external audience Let’s start with a Blog entry…

  6. Content Types: Blog – Overview A web log, or Blog, is generally viewed as an on-line personal journal. Posts are listed chronologically and are typically displayed in an aggregated fashion on the front page of the blog. Usually, when displayed this way, summary text substitutes the full body content of the post. Blogs can be used for more than personal journalizing, though. With commentary enabled, it can be a collaborative space. It can be used a newsletter of sorts for an organization or as a tool to communicate the progress on something – such as research. Drupal has it’s own, built-in blogspace. This can be used either as a single blog, such as a for an organization, or it can contain multiple users who all have their own blogs. Let’s experiment with this a bit…

  7. Content Types: Blog – Blog Roll A blog roll is, typically, the front page of a blogging environment. Drupal has a blog space contained within the site, so the blog roll isn’t on the front page, but it is at the front of the blog section. To get to the blog roll: • Click on the Blog link in the Main menu 1

  8. Content Types: Blog – Ex. 01 Create Blog Entry To create a blog entry of your own: • Click on the Create new blog entry link at the top of the blog roll • Title field = enter a title • Body field = paste text from Ex. 01 • Tags field = add descriptive words • Click the Publish button 1 2 3 4

  9. Content Types: Blog – Ex. 01 Create Blog Entry – Published Entry Once the blog entry is published, you’ll note a few things that characterize this particular type of content: • An avatar is displayed with the post • A Tag list is provided at the bottom of the entry • The AddThis sharing tool is provided • Comments are enabled 1 4 2 3

  10. Content Types: Blog – Ex. 01 Create Blog Entry – Blog Extras Now it’s time for some real fun…and where you can discover, for yourself, the power of a dynamic website: • Click on Home in the Main menu and check out the Recent Blog Posts block • Click on Blog in the Main menu and see what’s happened to the blog roll • Click on someone else’s blog post and comment 1 2 3

  11. Content Types: FAQ – Overview Frequently Asked Questions, or FAQ, are a common element on many websites, but they’re often poorly executed and end up looking unwieldy and confusing. Our Discover Drupal site makes use of the FAQ content type, which can be used to answer a variety of pointed questions. Drupal Gardens FAQ possess a very nice display method that uses an accordion style, where the question shows, and then when a user clicks on the question, the answer drops down. So let’s visit the FAQ collection of our site and see what it’s all about…

  12. Content Types:FAQ – FAQ Collection To get to the FAQ section of our site: • Click on the FAQ link in the Main menu • Click on a question to see how it expands 1 2

  13. Content Types: FAQ – Ex. 02 Create FAQ Item To create a FAQ item: • Go to Shortcut bar > Add content > FAQ item • Question field = enter a question or paste in a question from the Ex. 02 lab materials • Answer field = enter an answer or paste in an answer from the Ex. 02 lab materials • Click the Publish button 2 1 3 4

  14. Content Types: FAQ – Ex. 02 Create FAQ Item - Published The published FAQ doesn’t appear all too special. To get a good idea of what makes this content type unique, click on the FAQ link in the Main menu again and then click on your question.

  15. Content Types: Poll – Overview The Poll content type allows contributors to create simple, single question opinion polls. Poll content is quite flexible. It can be open to participation from the general public without any need to log in to the site. Question and answer sets can be revised as needed, which invalidates this module as a legitimate statistics gathering tool, but it can be used to gauge audience interest and encourage interaction. The Poll module, which supplies the Poll content type, also automatically provides a simple, real-time bar graph after a participant responds, to provide instant poll status information to the user. Let’s get in and create a poll now…

  16. Content Types: Poll – Ex. 03 Create a Poll To create a Poll: • Go to Shortcut bar > Add content > Poll • Question field = enter a question or paste in the question from the Ex. 03 lab materials • Tags field = enter some descriptive words • Choice fields = Enter in at least two choices – to add more choices click the Add another choice button • Poll status option = leave as is • Poll duration field = 1 day 2 3 4 5 1 6

  17. Content Types: Poll – Ex. 03 Create a Poll – Add to Poll Content Menu Up to this point, we haven’t had to create a single menu link – but we’ll do so for our Poll content. A custom menu has been created for it: • Go down to the Menu settings tab and click the Provide a menu link checkbox • Parent item field = <Poll Content> • Click the Publish button 1 2 3

  18. Content Types: Poll – Ex. 03 Create a Poll – Published Once your poll is published, the Poll Content block should appear. Take your poll and see what it does – then go take someone else’s poll. Note that you can cancel your vote, but you can only have one vote at a time per poll.

  19. Content Types: Book Page - Overview The Book page content type is intended for content that has some sort of hierarchy. As an example, a Book on Learning Drupal 7 may contain something like the following: • Learning Drupal 7 • Creating Content • Basic Page Content • Blog Entry Content • Managing Users • Adding Users • Changing Access Levels • Site Optimization • Custom Content Types • Using Views This is the “Top” or Parent page – it should be something like an overview or introduction Items indented directly below the Parent page are Child pages. These contain more specific information that details and/or supports the main topic of the Book Using Books provides a few other nice features as well, such as on-the-fly menu development, a pre-built Book Navigationblock, and a printer-friendly feature which prints up the entire Book in a book-style format

  20. Content Types: Book Page – Ex. 04 Create Book Structure – Parent Book Page To create a Parent Book page, do the following: • Go to Shortcut bar > Add content > Book page • Title field = enter a title • Body field = paste in Ex. 04a • Click the Book outline tab • Book field = create new book • Click the Publish button 2 1 3 5 4 6

  21. Content Types: Book Page – Ex. 04 Create Book Structure – Parent Book Page - Published The Book page content type is easy to distinguish because of the Add child page and Printer friendly version links at the bottom of the body area. Note that we now also have a Book navigation block.

  22. Content Types: Book Page – Ex. 04 Create Book Structure – Child Book Page – Add Child Page Now that a Parent Book page has been established, Child Book pages can be easily added to it. To add a Child Book page, just do the following: • Scroll to the bottom of the Parent page and click on the Add child page link 1

  23. Content Types: Book Page – Ex. 04 Create Book Structure – Child Book Page – Create Child Page Enter your information into the Child Book page the same way you did for the Parent: • Titlefield = enter a title • Body field = paste in Ex. 04b • Click the Book outlinetab and take a look inside • The Book and Parent items fields will be auto-filled • Weightfield = -15 • Click the Publishbutton 1 2 3 4 5

  24. Content Types: Book Page – Ex. 04 Create Book Structure – Child Book Page – Published Note how the navigation builds itself, both in the Book navigation block as well as the content footer navigation. Now let’s make one more child page…

  25. Content Types: Book Page – Ex. 04 Create Book Structure – Child Book Page – Now You Do It Look to the right sidebar, in the Book navigation menu, and click on the top page of your book. Once the page shows, click on the Add child page link and enter the following information: • Title field = Managing Users • Body field = paste in Ex. 01c • Weight field = -14 • Click the Publish button

  26. Content Types: Book Page – Printer Friendly Version Feature The Printer friendly version link at the bottom of a Book page will provide a preview and print-up of the Drupal book, as if it were a book. To use this feature, do the following: • Click on the Printer friendly version link • Note how every page of the book shows up in the preview To leave the preview, just click your browser’s Back button. 2 1

  27. Content Types: Book Page – Book Manager The Book navigation menu is completely independent of Drupal’s default menu structure – but can work with it when specified. This is actually a good thing, because it gives the user the ability to run two menu sets at the same time. To easily order books and book pages: • Go to Shortcut bar > Find content > Books tab • To edit the pages in a book, just click on the edit order and titles link for the respective book • To move a page, just grab a mover handle and drag the page to the desired location 1 2 3

  28. Content Types: Gallery – Overview Creating media, in this day and age, has become increasingly simple. With the ability now to record all forms of media on simple, unobtrusive equipment like a mobile phone, people who may have never had an interest in something such as photography 20 years ago, might suddenly discover a new hobby they really like. So, how does a Drupal user handle this media onslaught? With the Gallery content type, of course. The Gallery content type provides a simple method to upload categorized images and/or videos and display them in an attractive gallery. The Gallery content type is part of the Media Gallery module, a feature-rich module developed by Acquia, which provides a user with the ability to add media from many different sources, upload multiple files, and display media in a lightbox. Let’s take a look at what we can do with a gallery…

  29. Content Types:Gallery – Ex. 05 Create a Gallery First we need to create a container for the gallery: • Go to Shortcut bar > Add content > Gallery • Title field = enter a title • Description field = enter a description • Gallery settings = columns: 4, rows: 3 • Presentation settings = allow downloading, show media in lightbox, show title and description • Click the Publish button 2 3 4 1 5 6

  30. Content Types: Gallery – Ex. 05 Create a Gallery– Add Images After the node is published, images need to be uploaded: • Click the Add media link • When the overlay loads, click the Add files link – this will open a window to your computer • Navigate to your ex-05-images directory inside of your lab materials – select all images and click the Open button • Tags field = enter descriptive words • Click the Start upload button 1 2 3 4

  31. Content Types: Gallery – Ex. 05 Create a Gallery – Published When published, the gallery appears in a grid with the dimensions specified in your original settings. The variation in the original picture sizes and orientations can be seen in the thumbnails – this is a common hurdle when dealing with size variation in images. Hovering on an image will display the title, which is automatically pulled from the file name. A mover handle is presented, as well, to reposition the image by drag and drop, if desired. Let’s add some information to our images.

  32. Content Types: Gallery – Ex. 05 Create a Gallery – Edit Media To edit media in the gallery: • Click the Edit media tab • Description field = add some descriptive text • License settings field = leave as is • Repeat this process with a few images Once a few images have been edited, click the Save button. 1 2 3 4

  33. Content Types: Gallery – Ex. 05 Create a Gallery – View Lightbox Now that we’ve added some extra information, let’s take a look at the most fun feature of the gallery: • Click on one of the images that you’ve added information to 1

  34. Images: Overview The Gallery content type does some great things in regards to image handling, but what if we wanted to embed an image inside of some other node type, like a Book page or Blog entry? For this, we’ll learn a little more about the Media module, which we got a hint of when we worked with our gallery. Before diving in, there are some things you’ll want to consider when working with images. If you’re unfamiliar with the area of digital imagery, you may want to learn some basics such as cropping and resizing. While much of the image handling can be automated, there will be times when some images will have to be manually adjusted. Feel free to take a look at the CWS slidesetWeb Publishing: Picture This, which can be found at http://oregonstate.edu/cws/training/view/training-materials.

  35. Images:Ex. 06 Embed Image Let’s try out a News item node type: • Go to Shortcut bar > Add content > News item • Title field = enter a title • Input format field = Full HTML • Body field = paste in Ex. 06 text • Tags field = Drupal • Click Publish button to save progress to date 2 3 4 1 5 6

  36. Images: Ex. 06 Embed Image – Upload Image 1 Now let’s get in and embed an image: • Click the Edit tab to open your node in edit mode • Click in the editor field at the beginning of the first paragraph to set the cursor • Click the Add media link – this will open a window to your computer • Browse to your lab materials and locate the ex-06.jpg file • Click the Upload button 3 2 4 5

  37. Images: Ex. 06 Embed Image – Edit Image – Add Alternate Text Let’s add some alt text. This is really important for our users who rely on screen readers: • Description field = enter some text that describes what’s happening in the picture 1

  38. Images: Ex. 06 Embed Image – Edit Image – Resize Image The Media module has some very nice little image editing tools tucked away so nicely that you would almost miss them. Our picture is a bit large for the space we have. Let’s resize it down so it’s 150 pixels wide: • Click the little center, rectangle icon underneath the picture. • In the Scale column, enter 150 in the Width field then click in the Height field – it will automatically calculate the correct dimension • Click the Submit button 1 2 3

  39. Images: Ex. 06 Embed Image – Position Image Let’s move the image down a line: • Click on the image, grab it with your mouse, and drag it down so that the cursor is before the second line of text. 1

  40. Images: Ex. 06 Embed Image – Float Image By default, your image will insert above the line of text you want to place it at. We need to apply a float to it to get the text to wrap: • Click the image to select it • Click the Image toolbar button to open the Image Properties dialog box • Alignment field = right • Click the OK button 2 1 3 4

  41. Images: Ex. 06 Embed Image – Preview Your image positioning might look a little odd, initially. If this is the case, click the Preview button to reload the page. Click the Save button if you’re satisfied.

  42. Images: Ex. 06 Embed Image – Published Click on the News link in the Main menu to see what your node looks like alongside the other news items.

  43. Video: Overview The Media module works with more than images. In fact, it works with video as well. In addition to being able to upload items into your Drupal site using the Media module, you can also easily pull in and manage content from services such as YouTube or Vimeo. This is an invaluable tool given the heavy resource demands that video files can put on your system. At this time, styling capabilities for video are limited using the Media module method. For video embeds the execution works best when using the Gallery content type, but you can use it in a limited fashion with the WYSIWYG editor. So, let’s jump over to YouTube and find a video to put on our site.

  44. Video:Ex. 07 Embed a Video – Pick Your Video To pick your video, do the following: • Open another tab in your browser and go to YouTube at http://youtube.com • Do a search in YouTube on a subject of interest to you • When you find one you like in the results list, click on the link 1 2 3

  45. Video: Ex. 07 Embed a Video – Copy URL 1 Once you have your video in front of you, you just need the URL: • Copy the URL in the address bar to your clipboard by selecting it and pressing your Ctrl + C keys

  46. Video: Ex. 07 Embed a Video – Edit News Item Let’s just put the video at the bottom of our news story • Click the Edit tab to open your news item in edit mode • Click your cursor at the end of the last line of text and enter down a couple of spaces, then click the Add media link • In the overlay, click the Embed from URL tab • Paste your YouTube URL into the URL field • Click the Submit button 1 2 3 4 5

  47. Video: Ex. 07 Embed a Video – Add Text Now let’s just add a little text: • Enter a little bit of white space between the top of your video and the earlier content • Copy the text from Ex. 07 and paste it above your video 1 2

  48. Video: Ex. 07 Embed a Video – Final Touches Now let’s just finish up by resizing and repositioning: • Click on your video and then grab the upper right corner grip with your mouse – stretch the video until it’s about 560 pixels wide • Keeping the video selected, click the Center Align button If everything looks good for you, click the Save button. 1 2

  49. Video: Ex. 07 Embed a Video – Completed News Item Node Upon saving, your completed News item node with a video embed should look somewhat similar to what you see at right.

  50. Video: Ex. 07 Embed a Video – Completed News Stream And, finally, to view the news stream, click on the News link in the Main menu. Here you’ll see that your news item has been trimmed to only show some summary text – this is normal. Clicking on the title of your news item will take you to the full node.

More Related