Site Builder Tags Used in Events

In this video we will introduce you to AVAnnotate’s Site Builder, which is where pages are added, edited, and organized for an AVAnnotate project. Pages may be created as auto-generated pages or custom pages. In this video, we will show you how to create an auto-generated page that includes an audiovisual event with an associated title, description, and annotations.

Navigate from the Data Manager section to Site Builder by selecting the tab. This page will show you all of the web pages that have been created for your AVAnnotate project. For this example, we will see a home or landing page (identified with the home icon), and a page for each audiovisual event. These pages have all been auto-generated, meaning that they will each be pre-populated with the data we have already imported into AVAnnotate.

To add another auto-generated page, select the Add Page drop down and select Auto-Generated. You will then be prompted to select either a home page or audiovisual event to generate a page for. Select either, and then click Add. This will create a new auto-generated page.

You will now see in Site Builder an auto-generated page. To disable an auto-generated page, select the three dots on the right side of the row, and then Disable Auto-Generation. This will create a blank page for your event, which you can add information to by following the details in the next video.

In this video, we will teach you how to build custom pages as part of your AVAnnotate project. The blank page feature provides AVAnnotate users the flexibility to structure and design their project outside of the preset format of auto-generated pages.

In the Site Builder tab, select “Add Page,” and then “Blank Page.” What this will do is create a fully customizable page, which you can use to differently showcase the audiovisual events you’ve already created in your project, or build out new pages with essays, images, or other media related to your project. You can also use a custom page to create a bibliography, compare clips from your AV events, or display your AV events alongside other related media.

Once you’ve created the blank page, go ahead and give it a title. You can edit the page title at any time. You can also assign the new blank page a “parent” page. When you create a new blank page, it will not be associated with a particular event in your project until you manually assign it via the Parent Page dropdown menu. Selecting “No Parent” will let this new page stand alone in the project. Selecting a parent for the new page will subordinate the new page so that it appears under another page in the project’s Table of Contents.

If, for example, I was using this blank page to feature additional media that I want to associate with a particular event, I would select the AV event’s existing page as the parent of this new page. In this way, the blank page feature can be used to structure a project and create relationships between different pages.

To add an existing Event to a custom page, select “Insert,” and then “Embed AV.” You’ll then see the option to select one of your audiovisual events, and then customize what elements of the events you want to appear on the blank page. The default will include the event’s annotations, label, and description that you inputted when you created the event, but you can choose to include or exclude any of these details when embedding an event on a custom page.

Additionally, you can choose to include only a clip of a given event, and then select the start and end times of the clip you want featured on the new blank page. You can also insert multiple clips side-by-side on a blank page. Select “Insert,” and then “Compare AV,” and follow the same steps.

This video will walk you through how to customize the appearance of blank pages. To see examples of how others have customized pages in their AVAnnotate projects, see the AVAnnotate documentation and website.

To customize a new blank page in your project, you’ll use the text editor. From left to right, the options are as follows: select page layout via column width and horizontal lines; undo/redo work; select text and header format via the dropdown menu; bold, italic, underline, and strikethrough options; insert code; insert quote block; change the color of the text background and text itself; insert numbered or bulleted lists; create a table of contents; justify text; and insert a link or image.

When you insert columns into the page, you’re changing where media will be placed on the page by splitting the page into differently-sized columns. You can customize what goes into the columns using the rest of the text editor features.

Insert images into the blank page using the rightmost button. Remember that AVAnnotate does not store your media files, but rather references them via URL. This means images you add to a custom page should be referenced via the image link address, rather than a file saved on your personal device.

Select Save to add these changes to your AVAnnotate project.

Publishing and sharing your AVAnnotate project happens in the Site Builder section. You can publish your project as either a GitHub Pages site or a static site. In this video, we will show you how to publish your project via GitHub Pages.

First, let’s look at the GitHub Pages option. GitHub Pages is a static site hosting service, which means that it will use material in your AVAnnotate project’s GitHub repository to deploy a publicly-viewable website.

To deploy your AVAnnotate project via GitHub pages, navigate to the Site Builder section.

From there, select Publish and confirm that GitHub Pages Site is selected as the type of site you would like to publish. Select Publish once more, and wait 30 seconds to a few minutes for GitHub to process your project. Please be patient— do not re-publish your project until this process is completed.

Finally, select the three-dot menu and select Website to view your published AVAnnotate project.

In this video, we will show you how to publish your AVAnnotate project as a static site so that it can be deployed locally.

The second option you have for publishing your AVAnnotate project is to create a static site in your GitHub repository. This option does not use GitHub Pages, and thus does not immediately create a publicly-viewable website. Instead, this option creates an additional repository in your AVAnnotate GitHub project that can be hosted locally.

To create a static site repository in your GitHub project, navigate to the Site Builder section. From there, select Publish and confirm that Static Site is selected as the type of site you would like to publish. Select Publish once more.

From there, you can now download your AVAnnotate project. To find the project’s GitHub repository, go to the project homepage on the AVAnnotate Dashboard, click the three-dot menu, and select Repository. Use the green Code button to Download ZIP and save the .zip file to the local computer.