Design and Structuring of Pages

Overview of page types and structures

Content Page Types

Structural Pages and Project Organisation Pages

free form depending on content and purpose; e.g. start page, introduction page, editorial principles page, etc.

• URL: short (e.g. “About”, “DesignPrinciples”)
• Begin page with:
  • Category: none OR as needed (e.g. Category:Editorial Pages)
  • Page Title: can be changed from URL to be more readable with {{DISPLAYTITLE:title}}
  • Hide TOC if needed with __NOTOC__

Overview Pages

overview of large amounts of data/pages via DataTables JavaScript library (DT) and DynamicPageList3 MediaWiki extension (DPL3)

• URL: short, currently uses no blank spaces (e.g. “ArticleOverview”, “ReferencesOverview”)
• Begin page with:
  • Category: Category:Overview Pages
  • Page Title: change from URL to be more readable with {{DISPLAYTITLE:title}} (e.g. “Overview of Newspaper Articles” for the Page “ArticleOverview”)
• Main content:
  • use Template:OverviewPageNote to display a header section; use the variables:
    • summary for introductory text (wikitext format)
    • explanation for explanations regarding the table formatting, abbreviations, etc. (wikitext format; usually a list with bullet points)
  • Overview/table section can be one of the following:
    • Static table with DT functionality; either html or wikitext table (example: Overview of Mark Twain's Writing and Speeches):
      • set <table class=“wikitable datatable hover”>
      • set separate CSS id if needed
      • other styling and DT parameters as needed (e.g. “data-page-length”, “data-order”, etc.)
    • Dynamic table using DPL3 with additional DT functionality (example: Overview of Newspaper Articles)
      • use DPL3 “table” parameter
      • set <table class=“wikitable datatable hover”>
      • if needed, initialise DT Custom Search Builder with the following DT styling parameters: data-layout=‘{“top1Start”:“searchBuilder”}’ data-language=‘<nowiki>{“searchPlaceholder”:” Quick Search”, “search”:““,”searchBuilder”:{“add”:“Add Search Condition”}}’</nowiki>
      • use DPL3 “tablerow” parameter to style individual columns (width, font, etc.) as needed
    • Dynamic list using DPL3 with styling as needed; either table or custom formatting; without DT functionality (example: Overview of Topics); refer to DPL3 manual

Newspaper Article Pages

table design w/ 2 or 3 columns to display screenshot, transcript, and translation/original; links to Topic Pages

• URL: item ID (e.g. "MD-250")
• Begin page with:
  • Template:ArticleInfo with variables corresponding to article metadata; the template automatically sets Category:Article Pages and generates a header section with metadata
• Main content:
  • Template:ArticleImage to include screenshot with variable file corresponding to image file name without file extension (i.e. for image page "File:IA-012.png", the parameter file would be "IA-012")
  • optional: Template:ArticleNote OR Template:ArticleNoteTop with the variables:
    • content for contextual information on the text (optional variable; not displayed by default)
    • note to include or hide the “Changes in Translation” color coding information (displayed by default)
      • undeclared note variable includes the standard section
      • declared variable with wikitext as parameter sets wikitext as content for the section
      • declared variable with empty parameter hides the “Changes in Translation” section
  • table with transcription and translation
    • surround with <div></div> tags
      • set <div class="large-8 columns"> for 3-column layout
      • set <div class="row"> for 2-column layout
    • set <table class=“wikitable translationTable”> for styling
    • include annotation links to Topic Pages in the translation column (NOT in the transcription column)

Full Layout: 3 Column Design

{{{Template:ArticleInfo}}}
{{{Template:ArticleNoteTop}}} (optional)
{{{Template:ArticleImage|file=}}}
<div class="large-8 columns">
<table class="wikitable translationTable">
<tr>
<th>Transcription</th>
<th>English Translation</th>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
</table>
</div>

Full Layout: 2 Column Design

{{{Template:ArticleInfo}}}
{{{Template:ArticleImage|file=}}}
{{{Template:ArticleNote}}} (optional)
<div class="row">
<table class="wikitable translationTable">
<tr>
<th>Transcription</th>
<th>English Translation</th>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
</table>
</div>

Topic Pages

context and explanations for relevant key words on Article Pages

subtopics are included as chapters on their specific main Topic Page as well as on separate subpages; which one of these options is appropriate depends on whether the subtopic should have its own list of linked Article Pages using the Template:TopicLinkList as the templates list aggregation currently only works for seperate pages and not for individual chapters

• URL: short but unique topic name, e.g. “Vienna” or “Anti-Imperialist League” or "Clara Langdon Clemens"
  • URL for subpages:
    • use "maintopic/subtopic" in URL (e.g. "Vienna/Hotel Krantz")
    • set displaytitle to include only the subtopic with {{DISPLAYTITLE:subtopic}} at the bottom of the page (placement at the bottom is necessary for the correct transclusion on Topic Pages)
    • e.g.: "Vienna/Visit to Parliament" with displaytitle "Visit to Parliament"
  • exception for Topic Works pages: for work titles that should be in quotation marks, the page URL should be the title without quotation marks, {{DISPLAYTITLE:"work title"}} can be set to show the title with quotation marks on the page and within quick links, and {{DEFAULTSORT:work title}} can be set to ensure the quotation marks are disregarded in the alphabetic sorting function on overview pages.
• Main content:
  • explanatory text including citations and pictures
  • citations (for a more detailed explanation see Citations):
    • MLA formatting
    • short in-text citation with direct link to zotero bibliography
    • newspaper articles (not part of the project collection): complete bibliographical data
    • newspaper articles (part of project collection): link to Article Page directly
  • pictures:
    • use frameless as display option to enable caption display on hover
    • align image either right or left to enable correct text flow with floating
    • specify size in px if needed
    • include content from the Image Page as caption by including {{File:''image-title''}}
    • e.g. on page Visit to Parliament: [[File:Austrian_parliament_harpers_1897.jpg|frameless|right|350px|{{File:Austrian_parliament_harpers_1897.jpg}}]]
  • include Template:TopicLinkList to display a list of Article Pages which link to the Topic Page (example Visit to Parliament)
  • if the Topic Page has subpages:
    • include Template:SubTopicList to display each subpage with heading, beginning of the text, and "continue reading" link (example Vienna)
• set Category:Topic Pages AND chose additional category if needed (currently Category:Topic Place, Category:Topic Works or Category:Topic Person) at the bottom of the page
  • exception for Topic Person: because page names are first-name_last-name, normal category sorting would sort by first-name; to allow for alphabetical sorting according to last-name, pages in this category need a category sort key; this is specified within the category tag and should be last-name, first-name

Full Layout: Topic Page

text content

{{SubTopicList}} optional for pages with subpages
{{TopicLinkList}}
{{DISPLAYTITLE:subtopic-name}} OR {{DISPLAYTITLE:"work title"}} optional for subpages or Topic Works pages
{{DEFAULTSORT:work title}} optional for Topic Works pages
[[Category:Topic Pages]]
[[Category:Topic Person|last-name, first-name]] OR [[Category:Topic Place]] OR [[Category:Topic Works]] optional

---

Image Page Types

Article Screenshots

• URL: generated during upload as File:item-ID.png
• .png format is necessary for Template:ArticleImage to work
• Main content:
  • set Category:Article Image with <noinclude>[[Category:Article Image]]</noinclude>

Illustrative Images for Topic Pages

• URL: descriptive
• Main content:
  • short description
  • source with full citation
  • set Category:Topic Image with <noinclude>[[Category:Topic Image]]</noinclude>
  • optional longer explanations, transcriptions, context, etc.; place any parts that should not be visible in captions on Topic Pages within the <noinclude></noinclude> tags (example: File:Hotel_schrieder_adv_murray_1878.png)

Images for Site Layout or Project Design

• e.g.: background image, project design graphics, etc.
• URL:descriptive but short
• Main content:
  • set Category:Project Image with <noinclude>[[Category:Project Image]]</noinclude>

---

Template Pages

Pre-formatted elements which can be easily re-used on many pages.

For a current list of templates refer to Special:AllPages > Templates.

Including all of the additional information about each template within the template itself (as described below) is not necessary for the template to work, but makes it easier to use the template later on because relevant information about use cases, variables, etc. can be referenced directly on the page without switching to editor mode or referencing outside sources.

• URL: short, recognizable for the Template's main purpose or content
• Begin page with:
  • __NOTOC__ so no table of contents will be genrated
• Main content:
  • Use of this Template: information on what the template is for, where it is used, etc.:
    • current example page
    • short description of purpose and content
    • list of required variables
    • CSS-class used in the structure of the template
    • snippet to copy and paste the template invocation in <nowiki></nowiki> tags
  • Content of this Template: section with the same template contents in un-rendered and rendered format
    • as wikitext: in <pre><nowiki> tags
    • as rendered on this page: in <onlyinclude></onlyinclude> tags

Full Layout: Template Page

__NOTOC__
=== Use of this Template ===
* Current example page: [[title]]
* Include where to do what.
* Variables:
** variable1:
* CSS-class:
* Copy: <nowiki>{{templatename}}</nowiki>


=== Content of this Template ===
==== As Wikitext ====
copy of template content (in <pre> tags)

==== As Rendered On This Page ====
<onlyinclude>
copy of template content
</onlyinclude>

---

---

Citations

all citations use MLA formatting

• newspaper articles that are not part of the project collection:
  • include complete bibliographical data
  • direct link to online repository (if available)
  • example: "“Mark Twain Settles It,” Worcester Daily Press (Worcester, Mass.), 27 July 1876".
• newspaper articles that are part of the project collection:
  • link to item Article Page by referencing the title
  • inclusion of bibliographical data is not necessary, but might be useful depending on context
  • example: "The following text partially reproduces one such article entitled “Im Freundeskreise” published by the Illinois Staats-Zeitung on 14 March 1892".
• all other sources (books, articles, letters, etc.):
  • short in-text citation
  • link to zotero bibliographic entry (avoid direct links to digital versions of the source, because these links will likely break over time; it’s easier to include and keep them updated in zotero),
  • example: "The original letters can be found in Mark Twain on Potholes and Politics (Scharnhorst, 48-62)".