Difference between revisions of "Help:Editing"

From MadaCamp
Jump to: navigation, search
(Adding YouTube and Google videos)
(Google paths)
 
(208 intermediate revisions by 31 users not shown)
Line 1: Line 1:
 
__INDEX__
 
__INDEX__
  
== Basic text editing ==
+
'''This website can be edited within Madagascar only. If you would like editing permission from elsewhere, you need an invitation from an administrator of the site.'''
  
Some HTML tags are permitted in wikitext. The vast majority of fancy formatting seen on wikimedia sites is acheived using these limited tags (e.g. tables with CSS styles). See [http://en.wikipedia.org/wiki/Help:HTML_in_wikitext HTML tags in wikitext]
+
== Text editing ==
 +
 
 +
The most basic text editing features, such as boldface, italics and links can be formatted with help of the buttons above the edit box. Alternatively, the syntax is simple. For '''bold text''', enclose the word(s) within three single quotes:
 +
 
 +
<nowiki>'''bold text'''</nowiki>
 +
 
 +
For ''italic text'', enclose the text with two single quotes:
 +
 
 +
<nowiki>''italic text''</nowiki>
 +
 
 +
To link a text to another page within the wiki, enclose the word in double square brackets:
 +
 
 +
<nowiki>[[</nowiki>[[Anakao]]<nowiki>]]</nowiki>
 +
 
 +
The link will thereafter point to [[Anakao|http://www.madacamp.com/Anakao]]
 +
 
 +
To link to a page on another website, enclose the link location within single square brackets and the linked word(s) after the URL:
 +
 
 +
<nowiki>[http://pinterest.com/madacamp MadaCamp Pinterest board]</nowiki>
 +
 
 +
This will appear as:
 +
 
 +
[http://pinterest.com/madacamp MadaCamp Pinterest board]
 +
 
 +
Alternatively, type a full URL without the brackets, e.g.:
 +
 
 +
<nowiki>http://pinterest.com/madacamp</nowiki>
 +
 
 +
... to display the link as follows:
 +
 
 +
http://pinterest.com/madacamp
 +
 
 +
To make a listing, prefix the list items with asterixes: ...
 +
 
 +
<pre><nowiki>
 +
* item 1
 +
* item 2
 +
* item 3
 +
</nowiki></pre>
 +
 
 +
... which will appear as follows:
 +
 
 +
* item 1
 +
* item 2
 +
* item 3
 +
 
 +
Nested lists are done as follows: ...
 +
 
 +
<pre><nowiki>
 +
* item 1
 +
* item 2
 +
** item 2.2
 +
*** item 2.3
 +
* item 3
 +
</nowiki></pre>
 +
 
 +
... which will appear as:
 +
 
 +
* item 1
 +
* item 2
 +
** item 2.2
 +
*** item 2.3
 +
* item 3
 +
 
 +
etc.
 +
 
 +
<!--
 +
Some HTML tags are permitted in wikitext. The vast of fancy formatting seen on wiki sites is acheived using these limited tags (e.g. tables with CSS styles). See [http://en.wikipedia.org/wiki/Help:HTML_in_wikitext HTML tags in wikitext]
 +
-->
  
 
== Image links ==
 
== Image links ==
  
To make an image link to a page instead of leading to the larger version of the same image which is clicked on, add the link parameter to the image markup, eg.:
+
To link to a page from an image instead of an image leading to larger version of the file shown on a page, add the link parameter to the image markup, eg.:
  
[[Image:Big_fish.jpg|100px|link=Big_fish]]
+
[[Image:Big_fish.jpg|200px|link=Big_fish]]
 +
[[Image:Madagascar_Coffee_001.jpg|200px|link=Madagascar_Coffee]]
  
<pre>[[Image:Big_fish.jpg|100px|link=Big_fish]]</pre>
+
<pre>[[Image:Big_fish.jpg|200px|link=Big_fish]]
 +
[[Image:Madagascar_Coffee_001.jpg|200px|link=Madagascar_Coffee]]
 +
</pre>
  
 +
== Link to an image or other file ==
  
== Display an email address link ==
+
To link directly to an image or some other file that has previously been uploaded on this site use the <code>media:</code> prefix. For example: ...
 +
 
 +
<nowiki>[[media:Big_fish.jpg]]</nowiki>
 +
 
 +
... will appear as [[media:Big_fish.jpg]]
 +
 
 +
Or to use other link word(s) than the filename, separate the file part and the linked word(s) with a vertical bar <code>(<span style="color:#ff0000;"> | </span>)</code>, as follows:
 +
 
 +
[[media:Big_fish.jpg<span style="color:#ff0000; font-weight:bold;">|</span>how to wear a fish]]
 +
 
 +
The link will then appear as [[media:Big_fish.jpg|how to wear a fish]]
 +
 
 +
== Displaying an email address  ==
  
 
The following code:
 
The following code:
Line 24: Line 108:
 
[mailto:hello@madacamp.com hello@madacamp.com]
 
[mailto:hello@madacamp.com hello@madacamp.com]
  
== Display Skype address with online or offline status ==
+
<!---
 +
== Skype button ==
  
It is possible to display a Skype address with a button that will launch Skype and call or start a chat. First configure your Skype account to allow its status be shown online, which can be done within the Skype application itself. Simply go to <b>Tools->Options->Privacy</b> and tick the checkbox "Allow my status to be shown on the web".
+
To display a Skype button that will launch Skype and call or start a chat to a specified Skype address as well as indicate its online or offline status, first configure your Skype application to allow its status be shown online (if it has not already been configured as such). This is done within the Skype application section <b>Tools->Options->Privacy</b>. Tick the checkbox ''Allow my status to be shown on the web'':
  
For further information, see http://www.skype.com/intl/en/share/buttons/status.html
+
[[File:Skype_configuration.jpg]]
  
Thereafter, the following example can launch a chat window when the Skype button is clicked:
+
The following example will create a button for which a call can be made when clicked on:
  
<pre><nowiki><skype style="style_name" action="chat"><i>YourSkypeName</i></skype></nowiki></pre>
+
<pre><nowiki><skype style="bigclassic" action="call">YourSkypeName</skype></nowiki></pre>
  
<skype style="style_name" action="chat">madacamp</skype>
+
<skype style="bigclassic" action="call">madacamp</skype>
  
 
The available styles are: balloon, bigclassic, smallclassic, smallicon, mediumicon
 
The available styles are: balloon, bigclassic, smallclassic, smallicon, mediumicon
  
The available actions are: add, chat, call
+
See examples at http://www.skype.com/intl/en/share/buttons/status.html
 +
 
 +
The available actions are: add, chat or call
 +
 
 +
-->
 +
 
 +
== Google maps ==
 +
 
 +
To create new or edit existing Google maps on pages, click on the map button https://www.madacamp.com/extensions/GoogleMaps/images/button_map_open.gif above the edit box.
 +
 
 +
Find the region to display, set the various size and display options and thereafter copy the resulting &lt;googlemap>...&lt;googlemap> code into the edit box and save the page.
 +
 
 +
Various display options include satellite view, map view, adding of place markers, drawing lines etc.
 +
 
 +
== Google paths ==
 +
 
 +
Go to maps.google.com
 +
 
 +
Click menu in top left corner -> Your places -> MAPS
 +
 
 +
Click CREATE MAP (bottom left of screen)
 +
 
 +
Click Import
 +
 
 +
Select a track on the computer (eg. Track_AMBOHIMANGA-IVATO.gpx) and
 +
drag and drop into the Upload space
 +
 
 +
Click on the upper three dots
 +
 
 +
Export to KML/KMZ
 +
 
 +
Select "Export to a .KML file (full icon support use .KMZ)."
 +
 
 +
Download
 +
 
 +
Click Save File, to eg. FILENAME.gpx
 +
 
 +
In the file, there is a list of coordinates:
 +
 
 +
<pre><nowiki><coordinates></nowiki>
 +
            50.1606086176,-14.2578310333,12.63
 +
            50.1606914308,-14.2576493975,11.67
 +
etc.
 +
</coordinates></pre>
 +
 
 +
Run geoconvert.sh FILENAME.gpx to change format to:
 +
 
 +
<pre>
 +
-14.2578310333,            50.1606086176
 +
-14.2576493975,            50.1606914308
 +
etc.
 +
</pre>
 +
 
 +
Copy into a new Google map, eg.:
 +
 
 +
<pre><nowiki><googlemap version="0.9" lat="-19.105844" lon="47.33697" height="750"
 +
controls="large" style="width:100%;max-width:600px;">
 +
</nowiki>
 +
2#B2FCFF00
 +
-14.2578310333,            50.1606086176
 +
-14.2576493975,            50.1606914308
 +
etc.
 +
<nowiki></googlemap></nowiki></pre>
 +
 
 +
Placemarker icons are done separately above the path code
 +
 
 +
== Scalable maps ==
 +
 
 +
Modify markup on all pages containing maps to include <code>style="width:100%;max-width:600px;"</code>, e.g.:<br>
 +
<nowiki><googlemap version="0.9" lat="-12.243119" lon="49.345264" type="satellite" zoom="16" controls="large" style="width:100%;max-width:600px;"></nowiki>
 +
 
 +
Use http://www.madacamp.com/Special:ReplaceText
 +
 
 +
Replace:
 +
<nowiki><googlemap version="0.9" (.*)></nowiki>
 +
with:
 +
<nowiki><googlemap version="0.9" $1 style="width:100%;max-width:600px;"></nowiki>
 +
 
 +
Select 'Use regular expressions' and namespaces 'Main'.
 +
 
 +
Pages which already contain the string will thereafter have duplicate style declarations:
 +
 
 +
style="width:100%;max-width:600px;" style="width:100%;max-width:600px;"
 +
 
 +
Thereafter replace instances of:
 +
style="width:100%;max-width:600px;" style="width:100%;max-width:600px;"
 +
with:
 +
style="width:100%;max-width:600px;"
 +
 
 +
 
 +
 
 +
<!--''Additional information:'' -->
 +
<!-- broken URLs:
 +
* [http://emiller.info/mov/map1.mov 3 minute instructions video] in Quicktime format (part 1).
 +
* [http://emiller.info/mov/map-path1.mov 3.5 minute instruction video] in Quicktime format (part 2).
 +
-->
 +
<!-- too technical: * [http://www.mediawiki.org/wiki/Extension:Google_Maps/Syntax Google Maps Extension syntax] documentation. -->
 +
 
 +
== Adding RSS news feeds to pages ==
 +
 
 +
RSS (Really Simple Syndication) allows importing summaries and corresponding links to news articles. For example, a Google [https://news.google.com news search] for any keyword or phrase can be imported. HOwever, Google does not include RSS feed URLs directly on their search result pages but it's not complicated to piece together the relevant feed URLs. For example, a search for the phrase "madagascar lemurs" can be included on a page as follows:
 +
 
 +
<pre><rss template="Google-feed" filterout="movie penguins">https://news.google.com/news?pz=1&cf=all&ned=us&hl=en&q=%22madagascar+lemurs%22&cf=all&output=rss</rss></pre>
 +
 
 +
The output of this news search for the phrase ''madagascar lemurs'', filtering out results with the terms ''penguins'' and ''movie'', becomes:
 +
 
 +
<rss template="Google-feed" filterout="movie penguins deprecated">https://news.google.com/news?pz=1&cf=all&ned=us&hl=en&q=%22madagascar+lemurs%22&cf=all&output=rss</rss>
 +
 
 +
Other non-Google RSS feeds may include a feed icon [[File:RSS_icon.png|14px]] to indicate the whereabouts of RSS feeds.
 +
 
 +
For additional usage and customisation of the output, see: http://www.mediawiki.org/wiki/Extension:RSS
 +
 
 +
== Uploading images  ==
 +
 
 +
To add your own images, first [[Special:Userlogin| sign up]] and thereafter click on the [[Special:Upload|Upload file]] link in the toolbox on the left, which allows uploading a single image at the time. Note that the link does not appear to site visitors who are not logged in.
 +
 
 +
You can repeat the procedure for more than one image or chose to upload multiple images via the [[Special:MultipleUpload|Upload multiple files]] function which allows uploading up to five images at the time.
 +
 
 +
== Image size ==
 +
 
 +
A recommended image size for this site is minumim 1500 pixels height or width.
 +
 
 +
Many digital cameras produce images with a 4:3 aspect ratio and which are usually larger than 1500 pixels in width or height.
 +
 
 +
Images which has a 4:3 aspect ratio will automatically fit into the [[#Image_gallery|standard image gallery]].
 +
 
 +
When scaling a 4:3 aspect ratio image from some larger size down to 1500 pixels width it becomes 1125 pixels in height. In case of a taller than wide image, i.e. in portrait format, it becomes 1125 width and 1500 pixels in height.
 +
 
 +
Example of an 4:3 aspect ratio, 1500 pixels wide and 1125 pixels tall image: [[media:Diego_Suarez_150.jpg|Diego_Suarez_150.jpg]].
 +
 
 +
However, many cameras output different aspect ratios and size settings.  Depending on your internet connection speed, size and number of images, you may prefer to scale your images down before uploading them onto this site.
 +
 
 +
A free graphics application to scale images down is [http://www.gimp.org The Gimp]. <!--Alternatively, try the Pixlr online photo editor at http://pixlr.com/editor/-->
  
== Adding Google Maps ==
+
Or to avoid using a graphic application altogether, just upload your images in their original sizes and dimensions as they come from the camera.
  
This wiki includes Google maps and an easy map editor to create and edit Google maps on any pages.
+
<!--
 +
== Uploading more images via FTP ==
  
To launch the map creation tool, click on the map button http://www.madacamp.com/extensions/GoogleMaps/images/button_map_open.gif above the edit box.
+
To batch upload even images, first transfer the the images via FTP to for example /tmp/import
  
Pan to the region to display, set the various size options and thereafter copy/paste the generated Google map code into the regular edit box and save the page.
+
Log in by shell, su root and set the environment variable to:
  
* [http://www.mediawiki.org/wiki/Extension:Google_Maps Introduction to Google Maps Extension]
+
SERVER_NAME=www.madacamp.com<br>
* [http://www.mediawiki.org/wiki/Extension:Google_Maps/Syntax Google Maps Extension syntax]
+
export SERVER_NAME
  
 +
Within ~/wiki/maintenance/ run:
 +
 +
php importImages.php /tmp/import_images --user=CampMaster --comment="MadaCamp photos"
 +
 +
For more help, type php importImages.php --help
 +
-->
  
 
== Displaying images ==
 
== Displaying images ==
Line 64: Line 288:
 
For further info on image display, visit http://en.wikipedia.org/wiki/Image_markup
 
For further info on image display, visit http://en.wikipedia.org/wiki/Image_markup
  
== Displaying image galleries ==
+
== Image gallery ==
 +
 
 +
To display a collection of images without captions in a standard size that wlll work well in conjuction with a Google map display on the same page and in the the size of 600 pixels width, copy the following wiki-markup and replace the image names with the images to be dislayed. This example will display one large image on top, spanning three colums with two rows of images below it:
 +
 
 +
<pre><nowiki>{| class="imageTable"
 +
|-
 +
|colspan="3" | [[File:Photo 001.jpg|600px]]
 +
|-
 +
|[[File:Photo 002.jpg|196px]]
 +
|align="center"|[[File:Photo 003.jpg|196px]]
 +
|align="right"|[[File:Photo 004.jpg|196px]]
 +
|-
 +
|[[File:Photo 005.jpg|196px]]
 +
|align="center"|[[File:Photo 006.jpg|196px]]
 +
|align="right"|[[File:Photo 007.jpg|196px]]
 +
|}</nowiki></pre>
 +
 
 +
Just add or remove rows as required. Example, as on the [[Tulear]] page:
  
Using <nowiki><gallery> ... </gallery></nowiki> tags to display a thumbnail gallery with images which link to the larger versions of the uploaded images.
+
{| class="imageTable"
 +
|-
 +
|colspan="3" | [[File:Tulear 016.jpg|600px]]
 +
|-
 +
|[[File:Tulear 010.jpg|196px]]
 +
|align="center"|[[File:Tulear 005.jpg|196px]]
 +
|align="right"|[[File:Tulear 006.jpg|196px]]
 +
|-
 +
|[[File:Tulear 012.jpg|196px]]
 +
|align="center"|[[File:Tulear 008.jpg|196px]]
 +
|align="right"|[[File:Tulear 018.jpg|196px]]
 +
|}
 +
 
 +
== Thumbnail gallery ==
 +
 
 +
Using <nowiki><gallery> ... </gallery></nowiki> tags to display a thumbnail gallery with images which link to the larger versions of the uploaded images. This is useful for creating quick and easy thumbnail galleries with many images.
  
 
Images can also be individually captioned and wiki-markup can be used within captions.
 
Images can also be individually captioned and wiki-markup can be used within captions.
  
 
<gallery>
 
<gallery>
Image:Ilakaka 001.jpg
+
Ilakaka 001.jpg
Image:Ilakaka 002.jpg
+
Ilakaka 002.jpg|link=Ilakaka|Image links to a page
Image:Ilakaka 003.jpg
+
Ilakaka 003.jpg
Image:Ilakaka 004.jpg|[[Help:Contents/Links|Links]] can be put in captions.
+
Ilakaka 004.jpg|[[Help:Contents/Links|Links]] can be put in captions.
Image:Ilakaka 005.jpg
+
Ilakaka 005.jpg
Image:Ilakaka 006.jpg|Full [[MediaWiki]]<br />[[syntax]] may now be used...
+
Ilakaka 006.jpg|Full [[MediaWiki]]<br />[[syntax]] may be used...
 
</gallery>
 
</gallery>
 
  
 
The code example of the above gallery is shown below:
 
The code example of the above gallery is shown below:
Line 84: Line 339:
 
<pre><nowiki>
 
<pre><nowiki>
 
<gallery>
 
<gallery>
Image:Ilakaka 001.jpg
+
Ilakaka 001.jpg
Image:Ilakaka 002.jpg
+
Ilakaka 002.jpg|link=Ilakaka|Image links to a page
Image:Ilakaka 003.jpg
+
Ilakaka 003.jpg
Image:Ilakaka 004.jpg|[[Help:Contents/Links|Links]] can be put in captions.
+
Ilakaka 004.jpg|[[Help:Contents/Links|Links]] can be put in captions.
Image:Ilakaka 005.jpg
+
Ilakaka 005.jpg
Image:Ilakaka 006.jpg|Full [[MediaWiki]]<br />[[syntax]] may now be used...
+
Ilakaka 006.jpg|Full [[MediaWiki]]<br />[[syntax]] may now be used...
 
</gallery>
 
</gallery>
 
</nowiki></pre>
 
</nowiki></pre>
  
== Displaying wide images ==
+
<nowiki><gallery></nowiki> parameters:
 +
 
 +
caption="Caption above gallery"
 +
 
 +
widths=''n'' - image widths in pixels
 +
 
 +
heights=''n'' - image heights in pixels
 +
 
 +
perrow=''n'' - number of images per row
 +
 
 +
mode=''n'' - can be used with the following paramenters:
 +
* traditional - the default gallery display
 +
* nolines - like traditional but without border lines.
 +
* packed - all images will have the same height but different widths, with minimal space between images. The rows will organise themselves according to the screen width.
 +
* packed-overlay - shows captions on the image in a semi-transparent white overlay.
 +
* packed-hover - similar to packed-overlay but with the caption and box showing on hover.
 +
 
 +
== Wide images ==
  
 
To display an image that is generally wider than most screens in a sideways scrollable box, typically a panorama, the syntax is:
 
To display an image that is generally wider than most screens in a sideways scrollable box, typically a panorama, the syntax is:
Line 119: Line 391:
 
<pre><nowiki>{{wide image|Bezavona_pano2.jpg|1800px|Fort Dauphin panorama|250px|right}}</nowiki></pre>
 
<pre><nowiki>{{wide image|Bezavona_pano2.jpg|1800px|Fort Dauphin panorama|250px|right}}</nowiki></pre>
  
== Supressing Table of Contents ==
+
== Random image display ==
 +
 
 +
'''A random image can be displayed along with various optional parameters, such as size, left or right aligned and a pre-defined array of named images to limit the selection from.'''
 +
 
 +
<randomimage float="left" />
 +
 
 +
This code can be used to display a random image from the complete repository of images on the site:<br>
 +
 
 +
<span style="background:#f6f6f6;"><nowiki><randomimage float="left" /></nowiki></span><br>
 +
 
 +
An caption will automatically be pulled from the image descripion page if one exists or if added when the image was originally uploaded on the site.
 +
<br clear="all">
 +
 
 +
<randomimage float="left">Random image</randomimage>
 +
 
 +
This example code can be used to display a random image with a pre-defined caption, eg. 'A random image', for all images:<br>
 +
<span style="background:#f6f6f6;"><nowiki><randomimage float="left">A random image</randomimage></nowiki></span>
 +
<br clear="all">
 +
 
 +
The <nowiki><randomimage></nowiki> tag supports the following attributes:
 +
* size - set the image width (default is the user's thumbnail width).
 +
* float - float the image; valid values are 'left', 'center' and 'right'.
 +
* choices - limits the image selection to a list of images separated by a vertical bar. For example:
 +
 
 +
<randomimage size="150" float="left" choices="Chocolaterie_Robert_024.jpg|Chocolaterie_Colbert_01.jpg|Cinagra_066.jpg" />
 +
 
 +
This example is a 150 pixels width image, aligned to the left and with a pre-defined array of named images to choose from:<br>
 +
<span style="background:#f6f6f6;"><nowiki><randomimage size="150" float="left" choices="Chocolaterie_Robert_024.jpg|Chocolaterie_Colbert_01.jpg|Cinagra_066.jpg" /></nowiki></span>
 +
 
 +
<br clear="all">
 +
 
 +
== Table of Contents ==
  
 
The table of contents (TOC) is automatically shown at the top of a page if there are four or more headings in an article. To hide this on a page, add the string <nowiki>__NOTOC__</nowiki> anywhere in the page markup.
 
The table of contents (TOC) is automatically shown at the top of a page if there are four or more headings in an article. To hide this on a page, add the string <nowiki>__NOTOC__</nowiki> anywhere in the page markup.
  
 
+
<!--
 
== CSS ==
 
== CSS ==
  
 
Modify styles in http://www.madacamp.com/MediaWiki:Monobook.css
 
Modify styles in http://www.madacamp.com/MediaWiki:Monobook.css
 +
-->
 +
 +
== Displaying YouTube videos ==
 +
 +
To display a video from YouTube on this site, extract and copy the relevant video ID that is part of a YouTube URL, e.g.
 +
[https://www.youtube.com/watch?v=_OKs7qpJvRI&feature=related https://www.youtube.com/watch?v=<font color="#bd0000">vDYzsT3d06I</font>&feature=related] and place in the edit form as follows:
 +
 +
<nowiki><HTML5video type="youtube" width="600" height="338">vDYzsT3d06I</HTML5video></nowiki>
 +
 +
<HTML5video type="youtube" width="600" height="338">vDYzsT3d06I</HTML5video>
 +
 +
The ''width'' and ''height'' parameters are optional.
 +
 +
<HTML5video type="youtube" width="600" height="338">caODxMEUq1w</HTML5video>
 +
 +
== Uploading videos MadaCamp ==
 +
 +
To upload a video on MadaCamp, firstly make the video available in three formats: .mp4, .ogg and .webm. This can easily be done via an online video conversion tool such as [https://cloudconvert.com cloudconvert.com]. Thereafter save the three versions on your system before uploading them with identical fileames but with the different file extensions, e.g.:
 +
 +
Dragonfile.mp4
 +
Dragonfile.ogg
 +
Dragonfile.webm
 +
 +
Thereafter include the video on the page without the file suffix:
 +
 +
<nowiki><HTML5video width="520" height="320" autoplay="true" loop="true">Dragonfly</HTML5video></nowiki>
 +
 +
Different browsers will automatically select the suitable format for their individual systems.
 +
 +
<HTML5video width="520" height="320" autoplay="true" loop="true">Dragonfly</HTML5video>
 +
 +
<!--Bug: Thumbs does not show up on Ipad, which affects autoplay="false" mode. https://www.mediawiki.org/w/index.php?oldid=2285855 -->
 +
 +
<!--
 +
== Editing and publishing videos ==
 +
 +
While a quick and easy way to publish a video is by uploading it into a YouTube account and thereafter including it on a page, videos can also be uploaded directly on MadaCamp after having converted it into FLV format. Your original may be an Mpeg, AVI, Quicktime or some other format. The conversion into FLV format can then be done using a video editor such as [http://en.wikipedia.org/wiki/Avidemux Avidemux], which is available for free download on all operating systems:
 +
 +
[[File:Avidemux.jpg|600px]]
 +
 +
Within Avidemux, open the video file, select FLV format via the ''Video'', ''Audio'' and ''Format'' selectors. Optionally add filters. Give the file an '''.flv''' extension and ''Save Video''. Thereafter upload the FLV file onto this site and simply add it on a page, as follows:
 +
 +
<nowiki>[[File:Video.flv]]</nowiki>
 +
 +
The size and aspect ratio can be tweaked like a normal on-page image by defining the pixel display values, as follows:
 +
 +
<nowiki>[[File:Video.flv|300x375px]]</nowiki>
 +
 +
Alternatively, [http://ffmpeg.org FFmpeg] is an excellent and free video editing tool, but requires command line editing, which is mainly done on Linux and OSX systems.
 +
 +
For Windows users, a simple FLV conversion tool is [http://www.miksoft.net/mobileMediaConverter.htm Mobile Media Converter]. While Mobile Media Converter lack various advanced editing features that exists in Avidemux, if all you need is to convert a video into FLV format without special editing, Mobile Media Converter is a perfectly good tool for the purpose. Various pre-configured size, bandwidth and quality level options are available in the conversion process.
  
 +
<table cellpadding="0" cellpadding="0" border="0" style="border:1px solid #cccccc; float:left; margin-right:10px; width:328px;"><tr>
 +
<td style="padding:3px 3px 3px 3px;">
 +
[[File:Chocolaterie_Robert_320x240_low.flv|320x240px]]
 +
</td></tr></table>
  
== Adding YouTube and Google videos ==
+
Click the screen on the left to see an example of a video that has been converted from a Quicktime (.mov) file into FLV format using ''Mobile Media Converter'' and thereafter uploaded and displayed here via the following code:<br>
  
To embed a video from YouTube onto this wiki, simply copy the video ID from a YouTube URL, e.g.
+
<div style="border:1px dashed #296dad; background: #fffbff; padding:10px; display:table;margin-bottom:8px;">
[http://www.youtube.com/watch?v=_OKs7qpJvRI&feature=related http://www.youtube.com/watch?v=<font color="#bd0000">FChpJY59iD8</font>&feature=related] and paste the relevant bit into the edit form as follows:
+
<nowiki>[[File:Chocolaterie_Robert_320x240_low.flv|320x240px]]</nowiki>
 +
</div>
  
<pre><nowiki><youtube>_OKs7qpJvRI<youtube></nowiki></pre>
+
''The video is 13 minutes and features [[Chocolaterie Robert]]'s bean-to-bar chocolate production in Madagascar, in French language.''
  
<youtube>_OKs7qpJvRI</youtube>
+
<br clear="all">
  
 +
For tips a tricks on editing video in Windows or Mac OSX or using various cloud based (online) tools, watch BBC's [http://news.bbc.co.uk/2/hi/programmes/click_online/9484842.stm The essential guide to video editing] webcast from 13 May 2011.
  
To add a Google video on a page retrieve, the ID number by clicking the '''Embed video''' link next to the video screen, or extract the ID from the URL if one is part of it. For example:
+
-->
[http://video.google.com/videoplay?docid=7281432690466273651&hl=en http://video.google.com/videoplay?docid=<font color="#ff0000">7281432690466273651</font>&hl=en]
 
  
Then simply place the ID in the following googlevideo tag:
+
<!--
<pre><nowiki><googlevideo>7281432690466273651</googlevideo></nowiki></pre>
 
  
<googlevideo>7281432690466273651</googlevideo>
+
== Adding language switches ==
  
== Add a comments field below an article ==
+
Note: Language switches are currently deactivated.
 +
 
 +
To add language switches for French and Malagasy versions to appear in the left column of any content page is simple. For example, the following code was added in the edit box of the page [[Lemur|http://madacamp.com/Lemur]]:
 +
<nowiki>[[fr:Lémurien]]</nowiki>
 +
<nowiki>[[mg:Maki]]</nowiki>
 +
 
 +
The Français and Malagasy link therefore appears on the English version of the page, which lead to [http://fr.madacamp.com/Lémurien http://fr.madacamp.com/Lémurien] and [http://mg.madacamp.com/Maki http://mg.madacamp.com/Maki] respectively
 +
(note: Maki means lemur in Malagasy).
 +
 
 +
[[File:Language switch example.gif]]
 +
 
 +
On the French page, adding links to the English and Malagasy versions is done by:
 +
<nowiki>[[en:Lemur]]</nowiki>
 +
<nowiki>[[mg:Maki]]</nowiki>
 +
 
 +
And on the Malagasy page, add the links to the English and French pages by:
 +
<nowiki>[[en:Lemur]]</nowiki>
 +
<nowiki>[[fr:Maki]]</nowiki>
 +
 
 +
If a page title contains two or more words, the words are separated by underscores or spaces, for example:
 +
 
 +
<table width="100%" border="0" cellpadding="0" cellspacing="0"><tr>
 +
<td style="border:1px dashed #296dad; background: #fffbff; padding:10px;width:48%;">
 +
<nowiki>[[fr:Grande_Île]]</nowiki><br>
 +
<nowiki>[[en:Big_island]]</nowiki><br>
 +
<nowiki>[[mg:Nosy_be]]</nowiki>
 +
</td><td align="center" style="width:4%;">or</td>
 +
<td style="border:1px dashed #296dad; background: #fffbff; padding:10px;width:48%;">
 +
<nowiki>[[fr:Grande Île]]</nowiki><br>
 +
<nowiki>[[en:Big island]]</nowiki><br>
 +
<nowiki>[[mg:Nosy be]]</nowiki>
 +
</td></tr></table>
 +
 
 +
The language swith codes can be added anywhere in the editing box, for example at the end.
 +
 
 +
-->
 +
 
 +
<!-- This feature has been removed due to comment spam
 +
 
 +
== Article comments ==
  
 
To add a blog style comments field below an article, such as this one: ...  
 
To add a blog style comments field below an article, such as this one: ...  
Line 159: Line 556:
 
The comments are added to the discussion section of each page.
 
The comments are added to the discussion section of each page.
  
== Links to various manual pages ==
+
-->
 +
 
 +
== Further manuals ==
  
 
* [http://meta.wikimedia.org/wiki/Help:Contents User's Guide]
 
* [http://meta.wikimedia.org/wiki/Help:Contents User's Guide]

Latest revision as of 16:55, 12 March 2019


This website can be edited within Madagascar only. If you would like editing permission from elsewhere, you need an invitation from an administrator of the site.

Text editing

The most basic text editing features, such as boldface, italics and links can be formatted with help of the buttons above the edit box. Alternatively, the syntax is simple. For bold text, enclose the word(s) within three single quotes:

'''bold text'''

For italic text, enclose the text with two single quotes:

''italic text''

To link a text to another page within the wiki, enclose the word in double square brackets:

[[Anakao]]

The link will thereafter point to http://www.madacamp.com/Anakao

To link to a page on another website, enclose the link location within single square brackets and the linked word(s) after the URL:

[http://pinterest.com/madacamp MadaCamp Pinterest board]

This will appear as:

MadaCamp Pinterest board

Alternatively, type a full URL without the brackets, e.g.:

http://pinterest.com/madacamp

... to display the link as follows:

http://pinterest.com/madacamp

To make a listing, prefix the list items with asterixes: ...

* item 1 
* item 2
* item 3

... which will appear as follows:

  • item 1
  • item 2
  • item 3

Nested lists are done as follows: ...

* item 1 
* item 2
** item 2.2
*** item 2.3
* item 3

... which will appear as:

  • item 1
  • item 2
    • item 2.2
      • item 2.3
  • item 3

etc.


Image links

To link to a page from an image instead of an image leading to larger version of the file shown on a page, add the link parameter to the image markup, eg.:

Big fish.jpg Madagascar Coffee 001.jpg

[[Image:Big_fish.jpg|200px|link=Big_fish]]
[[Image:Madagascar_Coffee_001.jpg|200px|link=Madagascar_Coffee]]

Link to an image or other file

To link directly to an image or some other file that has previously been uploaded on this site use the media: prefix. For example: ...

[[media:Big_fish.jpg]]

... will appear as media:Big_fish.jpg

Or to use other link word(s) than the filename, separate the file part and the linked word(s) with a vertical bar ( | ), as follows:

[[media:Big_fish.jpg|how to wear a fish]]

The link will then appear as how to wear a fish

Displaying an email address

The following code:

[mailto:hello@madacamp.com hello@madacamp.com]

... will display as:

hello@madacamp.com


Google maps

To create new or edit existing Google maps on pages, click on the map button button_map_open.gif above the edit box.

Find the region to display, set the various size and display options and thereafter copy the resulting <googlemap>...<googlemap> code into the edit box and save the page.

Various display options include satellite view, map view, adding of place markers, drawing lines etc.

Google paths

Go to maps.google.com

Click menu in top left corner -> Your places -> MAPS

Click CREATE MAP (bottom left of screen)

Click Import

Select a track on the computer (eg. Track_AMBOHIMANGA-IVATO.gpx) and drag and drop into the Upload space

Click on the upper three dots

Export to KML/KMZ

Select "Export to a .KML file (full icon support use .KMZ)."

Download

Click Save File, to eg. FILENAME.gpx

In the file, there is a list of coordinates:

<coordinates>
            50.1606086176,-14.2578310333,12.63
            50.1606914308,-14.2576493975,11.67
etc.
</coordinates>

Run geoconvert.sh FILENAME.gpx to change format to:

-14.2578310333,            50.1606086176
-14.2576493975,            50.1606914308
etc.

Copy into a new Google map, eg.:

<googlemap version="0.9" lat="-19.105844" lon="47.33697" height="750"
controls="large" style="width:100%;max-width:600px;">

2#B2FCFF00
-14.2578310333,            50.1606086176
-14.2576493975,            50.1606914308
etc.
</googlemap>

Placemarker icons are done separately above the path code

Scalable maps

Modify markup on all pages containing maps to include style="width:100%;max-width:600px;", e.g.:
<googlemap version="0.9" lat="-12.243119" lon="49.345264" type="satellite" zoom="16" controls="large" style="width:100%;max-width:600px;">

Use http://www.madacamp.com/Special:ReplaceText

Replace:

<googlemap version="0.9" (.*)>

with:

<googlemap version="0.9" $1 style="width:100%;max-width:600px;">

Select 'Use regular expressions' and namespaces 'Main'.

Pages which already contain the string will thereafter have duplicate style declarations:

style="width:100%;max-width:600px;" style="width:100%;max-width:600px;"

Thereafter replace instances of:

style="width:100%;max-width:600px;" style="width:100%;max-width:600px;"

with:

style="width:100%;max-width:600px;"



Adding RSS news feeds to pages

RSS (Really Simple Syndication) allows importing summaries and corresponding links to news articles. For example, a Google news search for any keyword or phrase can be imported. HOwever, Google does not include RSS feed URLs directly on their search result pages but it's not complicated to piece together the relevant feed URLs. For example, a search for the phrase "madagascar lemurs" can be included on a page as follows:

<rss template="Google-feed" filterout="movie penguins">https://news.google.com/news?pz=1&cf=all&ned=us&hl=en&q=%22madagascar+lemurs%22&cf=all&output=rss</rss>

The output of this news search for the phrase madagascar lemurs, filtering out results with the terms penguins and movie, becomes:

Madagascar’s endangered lemurs are being killed during pandemic lockdowns - National Geographic
14-Dec-2020 08:00
Endangered and endemic: Madagascar's lemurs susceptible to coronavirus infection - Mongabay.com
31-Jul-2020 07:00
In Madagascar, Endangered Lemurs Find a Private Refuge - The New York Times
27-Oct-2020 07:00
The World Will Lose Madagascar’s Lemurs Without Action - Gizmodo
10-Jul-2020 07:00
Madagascar's lemurs enjoy respite as tourism struggles - Bangkok Post
24-Sep-2020 07:00
Madagascar's Lemurs May Never Recover from Covid-19 - Earth Island Journal
30-Oct-2020 07:00
New lemur discovered in Madagascar is already a threatened species - RFI English
29-Jul-2020 07:00
Madagascar’s lemurs face a grim future because of human activity. A solution? Planting trees. - The Washington Post
04-Jan-2020 08:00
Underrated Pandemic Casualties: Madagascar's Endangered Lemurs - Nature World News
16-Dec-2020 08:00
Earth - The future of Madagascar's lemurs - BBC News
27-Feb-2015 08:00
Those Adorable Lemurs of Madagascar? They Are on the Edge of Extinction - Fortune
02-Aug-2018 07:00
Animals that went extinct in 2020 and the ones that could disappear after 2021 - Metro.co.uk
31-Dec-2020 08:00
Lemurs are the world's most endangered mammals, but planting trees can help save them - The Conversation UK
23-Dec-2019 08:00
Extinction Madagascar of lemurs would have huge implications for humans, scientists say - CBS News
25-Jan-2019 08:00
Help For Lemurs: How to Save the World's Most Endangered Mammals • The Revelator - The Revelator
10-Feb-2020 08:00
Saving Endangered Lemurs and Their Habitats in Madagascar - Stony Brook News
05-Dec-2018 08:00
Madagascar lemurs find refuge in private sanctuary - Phys.Org
20-Oct-2016 07:00
Madagascar's lemurs use millipedes for their tummy troubles: Researchers observe that red-fronted lemurs may chew on millipedes to rid themselves of intestinal parasites - Science Daily
30-Jul-2018 07:00
Enigmatic African fossils rewrite story of when lemurs got to Madagascar: Specimens suggest Madagascar's lemurs were not the first mammals on the island - Science Daily
21-Aug-2018 07:00
MADAGASCAR: Lemurs and habitat at risk of extinction - AFRIK 21
09-May-2019 07:00
Coronavirus disrupts global fight to save endangered species - KCRG
06-Jun-2020 07:00
The mystery of Madagascar's forest cats - CNN
24-Mar-2020 07:00
Male lemurs may use their fruity-smelling wrists to attract mates - New Scientist News
16-Apr-2020 07:00
Madagascar’s 'swamp lemurs' have been documented for the first time - The Conversation AU
10-Jun-2016 07:00
Without lemur poo, Madagascar's trees may be doomed - Futurity: Research News
04-Jul-2018 07:00
Facts About Lemurs - Live Science
02-Jul-2016 07:00
Back from the brink: Lemurs of Madagascar - CNN
27-Aug-2015 07:00
Endangered ring-tailed lemur gives birth to twins at San Diego Zoo - RochesterFirst
24-Jul-2020 07:00
Missing Maki: Was Endangered Lemur Stolen From San Francisco Zoo? - EcoWatch
15-Oct-2020 07:00
Loss of lemurs might endanger many of Madagascar's largest tree species - Science Daily
02-Jul-2018 07:00
Severely disturbed habitats impacting health of Madagascar's lemurs - Science Daily
11-Jul-2019 07:00
How illegal mining is threatening Madagascar's endangered lemurs - National Geographic
06-Mar-2019 08:00


Other non-Google RSS feeds may include a feed icon RSS icon.png to indicate the whereabouts of RSS feeds.

For additional usage and customisation of the output, see: http://www.mediawiki.org/wiki/Extension:RSS

Uploading images

To add your own images, first sign up and thereafter click on the Upload file link in the toolbox on the left, which allows uploading a single image at the time. Note that the link does not appear to site visitors who are not logged in.

You can repeat the procedure for more than one image or chose to upload multiple images via the Upload multiple files function which allows uploading up to five images at the time.

Image size

A recommended image size for this site is minumim 1500 pixels height or width.

Many digital cameras produce images with a 4:3 aspect ratio and which are usually larger than 1500 pixels in width or height.

Images which has a 4:3 aspect ratio will automatically fit into the standard image gallery.

When scaling a 4:3 aspect ratio image from some larger size down to 1500 pixels width it becomes 1125 pixels in height. In case of a taller than wide image, i.e. in portrait format, it becomes 1125 width and 1500 pixels in height.

Example of an 4:3 aspect ratio, 1500 pixels wide and 1125 pixels tall image: Diego_Suarez_150.jpg.

However, many cameras output different aspect ratios and size settings. Depending on your internet connection speed, size and number of images, you may prefer to scale your images down before uploading them onto this site.

A free graphics application to scale images down is The Gimp.

Or to avoid using a graphic application altogether, just upload your images in their original sizes and dimensions as they come from the camera.


Displaying images

Nahampoana Main Building.jpg
Align an image to the left of the text...


[[Image:Nahampoana_Main_Building.jpg|left|70px|]]  Align an image to the left of the text...

<br clear="all">

For further info on image display, visit http://en.wikipedia.org/wiki/Image_markup

Image gallery

To display a collection of images without captions in a standard size that wlll work well in conjuction with a Google map display on the same page and in the the size of 600 pixels width, copy the following wiki-markup and replace the image names with the images to be dislayed. This example will display one large image on top, spanning three colums with two rows of images below it:

{| class="imageTable"
|-
|colspan="3" | [[File:Photo 001.jpg|600px]]
|-
|[[File:Photo 002.jpg|196px]]
|align="center"|[[File:Photo 003.jpg|196px]]
|align="right"|[[File:Photo 004.jpg|196px]]
|-
|[[File:Photo 005.jpg|196px]]
|align="center"|[[File:Photo 006.jpg|196px]]
|align="right"|[[File:Photo 007.jpg|196px]]
|}

Just add or remove rows as required. Example, as on the Tulear page:

Tulear 016.jpg
Tulear 010.jpg Tulear 005.jpg Tulear 006.jpg
Tulear 012.jpg Tulear 008.jpg Tulear 018.jpg

Thumbnail gallery

Using <gallery> ... </gallery> tags to display a thumbnail gallery with images which link to the larger versions of the uploaded images. This is useful for creating quick and easy thumbnail galleries with many images.

Images can also be individually captioned and wiki-markup can be used within captions.

The code example of the above gallery is shown below:

<gallery>
Ilakaka 001.jpg
Ilakaka 002.jpg|link=Ilakaka|Image links to a page
Ilakaka 003.jpg
Ilakaka 004.jpg|[[Help:Contents/Links|Links]] can be put in captions.
Ilakaka 005.jpg
Ilakaka 006.jpg|Full [[MediaWiki]]<br />[[syntax]] may now be used...
</gallery>

<gallery> parameters:

caption="Caption above gallery"

widths=n - image widths in pixels

heights=n - image heights in pixels

perrow=n - number of images per row

mode=n - can be used with the following paramenters:

  • traditional - the default gallery display
  • nolines - like traditional but without border lines.
  • packed - all images will have the same height but different widths, with minimal space between images. The rows will organise themselves according to the screen width.
  • packed-overlay - shows captions on the image in a semi-transparent white overlay.
  • packed-hover - similar to packed-overlay but with the caption and box showing on hover.

Wide images

To display an image that is generally wider than most screens in a sideways scrollable box, typically a panorama, the syntax is:

{{Wide image|name|image width|caption|box width|alignment}}

Examples:

The below example is done by the following code:

{{wide image|Bezavona_pano2.jpg|1800px|Fort Dauphin panorama}}
Fort Dauphin panorama
Fort Dauphin panorama

To display the same image but without a caption, simply omit the caption:

{{wide image|Bezavona_pano2.jpg|1800px}}

To right-align the image while taking up 45% of the paragraph width:

{{wide image|Bezavona_pano2.jpg|1800px|Fort Dauphin panorama|45%|right}}

Or define a fixed width for the scrollbox, eg. 250 pixels:

{{wide image|Bezavona_pano2.jpg|1800px|Fort Dauphin panorama|250px|right}}

Random image display

A random image can be displayed along with various optional parameters, such as size, left or right aligned and a pre-defined array of named images to limit the selection from.



This code can be used to display a random image from the complete repository of images on the site:

<randomimage float="left" />

An caption will automatically be pulled from the image descripion page if one exists or if added when the image was originally uploaded on the site.


Random image


This example code can be used to display a random image with a pre-defined caption, eg. 'A random image', for all images:
<randomimage float="left">A random image</randomimage>

The <randomimage> tag supports the following attributes:

  • size - set the image width (default is the user's thumbnail width).
  • float - float the image; valid values are 'left', 'center' and 'right'.
  • choices - limits the image selection to a list of images separated by a vertical bar. For example:


Cinagra chocolate, Madagascar


This example is a 150 pixels width image, aligned to the left and with a pre-defined array of named images to choose from:
<randomimage size="150" float="left" choices="Chocolaterie_Robert_024.jpg|Chocolaterie_Colbert_01.jpg|Cinagra_066.jpg" />


Table of Contents

The table of contents (TOC) is automatically shown at the top of a page if there are four or more headings in an article. To hide this on a page, add the string __NOTOC__ anywhere in the page markup.


Displaying YouTube videos

To display a video from YouTube on this site, extract and copy the relevant video ID that is part of a YouTube URL, e.g. https://www.youtube.com/watch?v=vDYzsT3d06I&feature=related and place in the edit form as follows:

<HTML5video type="youtube" width="600" height="338">vDYzsT3d06I</HTML5video>

The width and height parameters are optional.

Uploading videos MadaCamp

To upload a video on MadaCamp, firstly make the video available in three formats: .mp4, .ogg and .webm. This can easily be done via an online video conversion tool such as cloudconvert.com. Thereafter save the three versions on your system before uploading them with identical fileames but with the different file extensions, e.g.:

Dragonfile.mp4
Dragonfile.ogg
Dragonfile.webm

Thereafter include the video on the page without the file suffix:

<HTML5video width="520" height="320" autoplay="true" loop="true">Dragonfly</HTML5video>

Different browsers will automatically select the suitable format for their individual systems.



Further manuals