Skip to: Site menu | Main content

Detailed instructions for building the slideshow

  1. Create an image content type.
    1. Navigate to admin/content/types/add.
    2. Enter the human readable "Name:" Image.
    3. Enter the "Type:" image.
    4. Enter a description.
    5. In the Submission form settings field set, enter a Title field label, Body field label, and the Explanation or submission guidelines as you choose.
    6. In the Workflow settings field set uncheck Promoted to front page.
    7. In the Comment settings field set select the disabled radio button for the Default comment setting field.
    8. Click Save content type.
  2. Create a text content type.
    1. Follow similar steps as the ones you just finished for creating the image content type, modifying the names and descriptions as appropriate.
  3. Create six image content nodes, using uniformly sized images. (Note: this presentation assumes that you have already uploaded your images to the server.)
    1. Navigate to node/add/image.
    2. Enter a title in the title field.
    3. Enter something like <img src="/sites/all/files/picture.jpg" style="width:256;height:192" alt="This is what appears if the image is not found and also what screen readers will read to the user" title="This is the hover text when the user places the cursor over the image" /> in the body field.
    4. Change the input format to Full HTML.
    5. Click save.
    6. Repeat the steps for the remaining five images.
  4. Create six text content nodes.
    1. Navigate to node/add/text.
    2. Enter a title in the title field.
    3. Enter a photo caption in the body field.
    4. Click save.
    5. Repeat the steps for the remaining five text nodes.
  5. Create a new view.
    1. Navigate to admin/build/views/add.
    2. Enter a machine readable name in the View name: field.
    3. Enter a description in the "View description:" field.
    4. Select the "View type:" Node radio button.
    5. Click next.
  6. Set your default page settings.
    1. In the Basic settings field set set "Items to display:" to 6 by clicking the number 10, scrolling down and changing the 10 to a 6, and clicking Update.
    2. In the Field field set, click the "+" button, scroll down, select the "Node: Body" check box, and click Add.
    3. In the Sort criteria field set, click the "+" button, scroll down, select the "Node: Nid" check box, click Add, select the Ascending radio button, and click Update.
    4. In the Filters field set click the "+" button, scroll down, select the "Node: Published" and "Node: Type" check boxes, click Add, select the Yes radio button, click Update, select the "Is one of" radio button and Image and Text check boxes, and click Update.
    5. Click the up/down arrows in the Filters field set, scroll down, and drag the "Node: Published Yes" below the "Node: Type in Image, Text" filter and click Update.
    6. Click the Save button.
  7. Add a page display type that selects the six images and formats the output as a grid. (Note: this is NOT necessary for the slide show. You may skip this step if you choose.)
    1. Choose Page from the drop down and click Add display.
    2. In the Basic settings field set click on the Unformatted link in the "Style:" field, scroll down and select the Grid radio button, click the Override button, and click Update.
    3. Click the configuration button next to the Grid Style, scroll down, set the number of columns to 3, and click Update.
    4. In the Page settings field set, click the Path link, scroll down, give the page a path name and click Update
    5. In the Page settings field set, click the Menu link, scroll down, attach the page to the primary links menu, and click Update.
    6. In the Filters field set click the link, scroll down, uncheck the Text check box, click the Override button, and click Update.
    7. Click Save
  8. Add a page display type that selects the six text nodes and displays them unformatted using a pager. (Note: this is NOT necessary for the slide show. You may skip this step if you choose.)
    1. Choose Page from the drop down and click Add display.
    2. In the Basic settings field set click the "Use pager:" link, scroll down, select Full pager, click the Override button, and click the Update button.
    3. Click the "Items per page:" link, scroll down, change it to 2, click the Override button, and click the Update button.
    4. In the Page settings field set, click the Path link, scroll down, give the page a path name and click Update.
    5. In the Page settings field set, click the Menu link, scroll down, attach the page to the primary links menu, and click Update.
    6. In the Filters field set click the link, scroll down, uncheck the Image check box, click the Override button, and click Update.
    7. Click Save.
  9. Add a block display type that selects the six images and formats them as a slide show.
    1. Choose Block from the drop down and click Add display.
    2. In the Basic settings field set click on the "Name:" link, scroll down, change it to Slideshow, and click Update.
    3. In the Basic settings field set click on the Unformatted link in the "Style:" field, scroll down and select the Slideshow radio button, click the Override button, and click Update.
    4. Click the configuration button next to the Slideshow Style, scroll down, select the False "Random:" radio button, "No Pause:" radio button, "No Pause on Click:" radio button, and click Update. Take note of the Internet Explorer Options field set at the bottom of the page; it may come in handy for some of you.
    5. In the Filters field set click the link, scroll down, uncheck the Text check box, click the Override button, and click Update.
    6. Click Save.
  10. Add an attachment display type that selects the six text content nodes, attaches them to the block, and displays them after the block, formatting them as a slide show.
    1. Choose Attachment from the drop down and click Add display.
    2. In the Basic settings field set click on the Unformatted link in the "Style:" field, scroll down and select the Slideshow radio button, click the Override button, and click Update.
    3. Click the configuration button next to the Slideshow Style, scroll down, select the False "Random:" radio button, "No Pause:" radio button, "No Pause on Click:" radio button, scrollUp from the "Effect:" dropdown, and click Update. Take note of the Internet Explorer Options field set at the bottom of the page; it may come in handy for some of you.
    4. In the Attachment settings field set click the "Position:" link, scroll down, select the After radio button, and click Update.
    5. In the Attachment settings field set click the "Attach to:" link, scroll down, select the Slideshow check box, and click Update.
    6. In the Filters field set click the link, scroll down, uncheck the Image check box, click the Override button, and click Update.
    7. Click Save.
  11. Place the block in the content region on only the front page.
    1. Navigate to admin/build/block.
    2. In the Region dropdown box next to the View: Slideshow block choose Content and click Save blocks.
    3. Click configure next to the Slideshow block, set the "Block title:" to <none>, "Custom visibility settings:" to Users cannot control whether or not they see this block, "Show on specific pages:" to Show only on listed pages., "Pages:" to <front>, and click Save block.
Credits: XWeb | Chris Herberte | Andreas Viklund