How to Wiki

Design and Formatting

• Style Guide
• Media Guide - TBD
• Brand Assets

Wiki

Links

Important Links in Mediawiki

Name	Description	Link
Forms	a list of all forms that have been created to enter data	https://moha.wiki/Special:Forms
Templates	all templates that have been created to format and parse data	https://moha.wiki/Special:Templates
Semantic Search	a page to query wiki data and produce pieces of code for embedding on pages	https://moha.wiki/Special:Ask
Categories	all categories that currently exist for sorting and labeling pages	https://moha.wiki/Special:Categories
CSS Page	Where all CSS exists	https://moha.wiki/MediaWiki:Common.css
Java Script Page	Where all Javascript Exists	https://moha.wiki/MediaWiki:Common.js
Import CSV	Use Overwrite existing content for new pages and complete replacement of the imported events Use Overwrite only fields contained in the file can be used if you upload a single column (the CSV need to be modified then to include the title and only the columns for import) Skip - like 1) but prefers the wiki version, rather than Airtable one Probably useless in your context Append to existing content: you don't want two instances of the same event on one page.	https://moha.wiki/Special:ImportCSV
Export CSV	Export Mediawiki CSV	Export CSV
Batch Upload	Upload Media Files in Bulk	https://moha.wiki/Special:BatchUpload
Individual Program Page Styles	to change design or colorways on program pages	https://moha.wiki/Special:AllPages?from=&to=&namespace=274
Article Submission Form	see below for instructions on how to use	https://moha.wiki/Form:Article
Filters for Press Table and Events	adjustments for how the filter function works	https://moha.wiki/MediaWiki:Gadget-datatables.js

Backup Site

1. login to the server via SSH
2. make sure you are in your home directory, for this, run: cd ~
3. call MidnightCommander by issuing mc

In the MidnightCommander navigate to backup-database.sh script and run it by pressing Enter on your keyboard.

The database will be stored in the same directory with the date in its name. To delete an old database copy, navigate to it in MC and press F8.

Code Blocks

-External Redirect

{{#externalredirect: WEBSITE GOES HERE}}

To edit an external redirected page, use https://moha.wiki/w/index.php?title=PAGE NAME GOES HERE&action=edit

Labeled Section Transclusion

This piece of code can bring in a section from a page, for example if the page is "CATS+" and it has a section named "About" (as defined by ==SECTION NAME==) you could use the code {{#lsth:CATS+|About}}

{{#lsth:PAGENAME|SECTIONNAME}}

For a full breakdown of this tool go to: https://www.mediawiki.org/wiki/Extension:Labeled_Section_Transclusion

Embedded Video

The extension EmbedVideo can be used to embed video from sites like Youtube, Vimeo etc... The full parameters you can call are as follows: <code>{{#ev:service|id|dimensions|alignment|description|container|urlargs|autoresize|valignment}} for example for a youtube video you could use the following code <code>{{#ev:youtube|https://www.youtube.com/watch?v=eAORm-8b1Eg}}</nocode>

For a full explanation or more details you can go to: https://www.mediawiki.org/wiki/Extension:EmbedVideo

How to use intro box

A good option for this is to use the CSS Grid. https://css-tricks.com/snippets/css/complete-guide-grid/

I've marked the necessary HTML and CSS with comments in the Codepen for reference. https://codepen.io/Nick-Sergent/pen/mdQKbaZ

The gist: The client will need to add the image within the "moha-start-section" div of the Artist Start page. Keep in mind that this needs to be after the "moha-start-section-content" div. This will place the text content and image next to one another in the "moha-start-section" div. We then use CSS to set those elements in a grid structure and define column widths that make it responsive for different screens.

That is this line: grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

If the client would like to adjust the breakpoint at which the text content and image break onto two lines they can change the pixel value in that line.

If the client needs a more detailed explanation of what's going on, this article explains the responsive CSS. https://css-tricks.com/look-ma-no-media-queries-responsive-layouts-using-css-grid/

The following CSS was added to the stylesheet for this element

/* start page intro image setup */
.moha-start-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.moha-start-section > p {
	margin-bottom: 0;
}

.moha-start-section .image img {
  object-fit: cover;
  max-width: 100%;
  max-height: 430px;
  padding: 0;
  margin: 0;
  float: right;
}

This is your start page intro code:

Below you'll find guides and information for artists interested in getting involved at MoHA.

As first steps we recommend

• Joining the MoHA newsletter
• Signing up for open call list
• Saying hello on Discord

For a list of programs and opportunities for specific fields you can skip to

• Digital Artist
• Visual Artist
• Performing Artist

Here is the quicklink class:

div class="moha-start-section-quicklinks"

Buttons

<br> <span class="moha-button">[[Fantastic Arcade Committee Application|Internal Link]]</span> <span class="moha-button">[https://google.com External Link]</span>

Internal Link External Link

Articles

The Article form is here: https://moha.wiki/Form:Article

To assign Articles to other categories, add those categories as subcategories of the. Put this code on the needed category page (see https://moha.wiki/Special:Categories). Multiple levels are supported:

Category:Article ---|- Category:Subcategory1 [[Category:Article]] ---|---|- Category:Sub-Subcategory1 [[Category:Subcategory1]] ---|---|---|- ... and so on

Inline semantic query

For something like a program page, to pull in the "Program short description" use the following code to pull in just the respective short description

{{#ask: [[Program name::CATS+]] | ?Program short description | format=list | link=none | headers=hide | mainlabel=- }}

Embedded images

To use an image that is responsive to screen size in the embed use the following format

[[File:FILNAMEHERE.JPG|class=img-fluid|from [[EVENT NAME]], a [[PROGRAM NAME]], YEAR]]

or for a practical example

[[File:MoHA 20221217 TheShabooming 0623.JPG|class=img-fluid|From [[The Shabooming]], a MoHA [[Holiday Show]], 2023]]