This catalog demonstrates selected features available on the NCI Wiki. For exploratory purposes, this catalog also includes examples of these features implemented using a site generator (or other tools). 

Wiki Features

More Focused Wiki Space Search

The default wiki search, near the top of the page, searches the entire wiki (all wiki spaces to which you have access). If a wiki page author or editor inserts the Page Tree macro and selects the Search Box Above Page Tree option, the wiki page displays an additional search feature. This searches only within a specific page family. 

A similar option is the Page Tree Search macro. This macro focuses the search to a specific page family, just as the Page Tree macro does, but it displays only a search box (not the page tree). For more information, refer to Definition of Child Page, Wiki Space, Page Family and Putting a List of Child Pages on a Page.

Animated GIF

We created the following animated GIF using SnagIt 2018. For information on accessibility for animated GIF files, refer to the following page:

https://www.slideshare.net/DigitalGov/accessibility-for-animated-gifs-victoria-wales-us-agov-gobiernousagov

Video

We created the following video using Movavi and embedded it in a multimedia macro:

We created the following video using Camtasia and embedded it in a multimedia macro:

We created this video using Camtasia and posted it to YouTube to benefit from the closed caption option for Section 508 compliance:

Confluence Gliffy Flowchart

We created the following diagram within this Confluence page, using a Gliffy macro.

For information, refer to Gliffy Diagram Demonstration. 

Expand/Collapse Image via Confluence Macro

We inserted an Expand macro here, and an image inside it. By default, the macro displays a link. After you click the link, the macro also displays the image. 

For information, refer to Hiding Information so Readers Can View It as Needed. 

Thumbnail Image

We inserted a 909px image here and reduced the size to 100px to produce a thumbnail, in the generic sense of the word. The reader can click the thumbnail to view the full-size image.

For more information, refer to Changing the Display Size of an Image. 

(Another type of wiki thumbnail behaves differently, as mentioned in Uploading and Linking to an Attachment.) 

Presentation / Slideshow

We inserted an Office Powerpoint macro here. 

Site Generator Features

Thumbnail in DocDock Markdown

The following code block demonstrates implementation of a thumbnail for Hugo DockDock, as described in Resizing image :

1. Click the **Search Clinical Trials** tab. Or, on the toolbar, click **Search** > **Clinical Trials**. The Search Clinical Trials page appears.
    ![Search Clinical Trials page](https://wiki.nci.nih.gov/download/attachments/333338131/trial-search.png?height=80px)
1. In the various fields, specify one or more search criteria.

The above code produces the following results:

• By default, the image appears as indicated in the HTTP parameter: 
  
• After click, the image expands to fill the window.

Expand as DocDock Shortcode Markdown

The following code block demonstrates implementation of the Expand shortcode for Hugo DockDock:

1. Click the **Search Clinical Trials** tab. Or, on the toolbar, click **Search** > **Clinical Trials**. The Search Clinical Trials page appears.
{{%expand "Click for Screen Shot" %}}
![Search Clinical Trials page](https://wiki.nci.nih.gov/download/attachments/333338131/trial-search.png)
{{% /expand%}}
1. In the various fields, specify one or more search criteria.

The above code produces the following results:

• By default, the image is hidden: 
  
• After the initial click, the image is visible:
  

Presentation / Slideshow via Markdown

Markdown to Presentation / Slideshow  lists some tools for using markdown to create presentations or slideshows. The following files demonstrate one of them, Slide Show (S9) :

• Source: slide.text
• Result: slideshow-s9.zip (Download the ZIP file, extract the contents, and open the HTML file in a browser.)

Markdown Flowchart via DocDock Mermaid Shortcode

In a Hugo project with the DocDock theme, the following markdown code produces a similar diagram.

{{<mermaid align="left">}}
graph TD;
    A(Start) --> B
    B[Submitter submits trial.] --> |Trial has Submitted status.| C{Submission complete?}
    C -->|No| D[CTRO asks submitter for information.]
    D -->|Trial is on hold.| E[Submitter provides requested information.]
    E -->|Trial is off hold.| C
    C -->|Yes| F(End)

{{< /mermaid >}}

Markdown Flowchart via Mermaid Live Editor

In the Mermaid Live Editor , the following markdown code produces a similar diagram.

graph TD;
    A(Start) --> B
    B[Submitter submits trial.] --> |Trial has Submitted status.| C{Submission complete?}
    C -->|No| D[CTRO asks submitter for information.]
    D -->|Trial is on hold.| E[Submitter provides requested information.]
    E -->|Trial is off hold.| C
    C -->|Yes| F(End)