Difference between revisions of "Editing help"

From MunichBeerGardens.com
Jump to: navigation, search
(Images)
(Wide images)
Line 124: Line 124:
 
:<nowiki>{{</nowiki>Wide image|''name''|''image width''|''caption''|''box width''|''alignment''<nowiki>}}</nowiki>
 
:<nowiki>{{</nowiki>Wide image|''name''|''image width''|''caption''|''box width''|''alignment''<nowiki>}}</nowiki>
  
The following example includes a 1,500 pixels wide image of the [[Augustiner-Keller]] entrance sign. It generates a scrollbar below the image only on browser and systems that are otherwise not wide enough to display the image width completely without sideways scrolling of the browser window itself:
+
The following example code includes a 1,500 pixels wide image of the [[Augustiner-Keller]] entrance sign. The code generates a scrollbar below the image on browser and systems that are otherwise not wide enough to display the full width of the image without sideways scrolling of entire browser window:
  
 
:<nowiki>{{wide image|Augustiner-Keller 036.jpg|1500px|Augustiner-Keller}}</nowiki>
 
:<nowiki>{{wide image|Augustiner-Keller 036.jpg|1500px|Augustiner-Keller}}</nowiki>
Line 130: Line 130:
 
{{wide image|Augustiner-Keller 036.jpg|1500px|Augustiner-Keller}}
 
{{wide image|Augustiner-Keller 036.jpg|1500px|Augustiner-Keller}}
  
Using the wide image method is recommened for images that are to be displayed wider than 600 pixels, since it prevents them from stretching beyond individual browser's natural widths, which would otherwise also force text-paragraphs of the entire page to require sideways scrolling of the browser window itself when viewed on narrow screen devices such as hand-held browsers and certain mini-netbooks.
+
Using the wide image method is recommened when displaying images wider than 600 pixels, since it prevents them from stretching beyond individual browser's natural widths, which otherwise force subsequent text-paragraphs to require sideways scrolling of the entire browser window when viewed on narrow screens of hand-held devices such as PDAs and certain small netbooks.
  
 
{{wide image|Schlosswirtschaft Mariabrunn 049.jpg|1500px|View of Munich city from [[Schlosswirtschaft Mariabrunn|Mariabrunn]] with the alps behind.|45%|left}}
 
{{wide image|Schlosswirtschaft Mariabrunn 049.jpg|1500px|View of Munich city from [[Schlosswirtschaft Mariabrunn|Mariabrunn]] with the alps behind.|45%|left}}
Line 142: Line 142:
 
</nowiki>
 
</nowiki>
  
The width of the scroll-box can also be defined in exact pixels rather than a percentage of paragraph. If the alignment value is ommited, the default will be the maximum width of the paragraph as defined by the browser window as in the example with the Augustiner sign above.
+
The width of the scroll-box can also be defined in exact pixels rather than a percentage of a paragraph. If the alignment value is ommited, the default will be the maximum width of the paragraph defined by the browser window, as in the above example with the Augustiner entrance sign.
  
 
The ''alignment'' value can be '''left''', '''right''', '''center''', or '''none''' (same result as if omitted altogether).
 
The ''alignment'' value can be '''left''', '''right''', '''center''', or '''none''' (same result as if omitted altogether).

Revision as of 20:08, 3 August 2010

Simple 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, enclose the text with two single quotes:

''italic text''

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

[[Beer]]

The link will thereafter point to http://www.munichbeergardens.com/Beer

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://www.example.com exampe]

This will result in exampe

Alternatively, typing out the full URL without the brackets: ...

http://www.example.com

... will result in the link appearing as follows:

http://www.example.com

To make a listing, simply 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 can be made as follows: ...

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

... which will appear as follows:

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

etc.


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.:

Augustiner-Keller 003.jpg

[[File:Augustiner-Keller_003.jpg|135px|link=Augustiner-Keller]]

Display an email address

The following code:

[mailto:hello@munichbeergadens.com hello@munichbeergardens.com]

... will display as:

hello@munichbeergardens.com


Skype button

To display a 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 on a page, firstly configure your Skype application to allow its status be shown online (if not already configured as such). This can be done within the Skype application in the section Tools->Options->Privacy. Tick the checkbox Allow my status to be shown on the web:

The following example will create a button so that a call can be made when clicked on:

<skype style="bigclassic" action="call">YourSkypeName</skype>

<skype style="bigclassic" action="call">MunichBeerGarden</skype>

The available styles are: balloon, bigclassic, smallclassic, smallicon, mediumicon

See examples at http://www.skype.com/intl/en/share/buttons/status.html

The available on-click actions are add (for adding contact), chat (for launching a chat window) and call (for starting a regular call).

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.

Images

Landgasthof Langwied 003.jpg
Align an image to the left of a text and force a clear-all break after this sentence...


[[Image:Landgasthof_Langwied_003.jpg|left|120px|]] Align an image to the left of a text and force a clear-all break after this sentence...

<br clear="all">

Wide images

To display an image that is generally wider than most screens in a horizontal scroll box, the syntax is:

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

The following example code includes a 1,500 pixels wide image of the Augustiner-Keller entrance sign. The code generates a scrollbar below the image on browser and systems that are otherwise not wide enough to display the full width of the image without sideways scrolling of entire browser window:

{{wide image|Augustiner-Keller 036.jpg|1500px|Augustiner-Keller}}
Augustiner-Keller
Augustiner-Keller

Using the wide image method is recommened when displaying images wider than 600 pixels, since it prevents them from stretching beyond individual browser's natural widths, which otherwise force subsequent text-paragraphs to require sideways scrolling of the entire browser window when viewed on narrow screens of hand-held devices such as PDAs and certain small netbooks.

View of Munich city from Mariabrunn with the alps behind.
View of Munich city from Mariabrunn with the alps behind.

Defining a size of scroll-box:

This is a left-aligned image with a scrollbar taking up 45% of the paragraph width:

{{wide image|Schlosswirtschaft Mariabrunn 049.jpg|1500px|View of Munich city from Mariabrunn with the alps behind.|45%|left}}

The width of the scroll-box can also be defined in exact pixels rather than a percentage of a paragraph. If the alignment value is ommited, the default will be the maximum width of the paragraph defined by the browser window, as in the above example with the Augustiner entrance sign.

The alignment value can be left, right, center, or none (same result as if omitted altogether).


To display an image without a caption, simply omit the caption.


Standard images layout

The individual beer garden pages typically have one large image and three smaller ones below in a 600 pixels wide table. The table is using wiki markup with some added styling to create the margins between images and table cells. The first table cell with the large image spans three columns below it which can have one or more rows. This is an example of one large image with six smaller images in two rows below:

{| class="imageTable"
|-
|colspan="3" | [[File:Hofbrauhaus-Keller Freising 001.jpg|600px]]
|-
|[[File:Hofbrauhaus-Keller Freising 002.jpg|196px]]
|align="center"|[[File:Hofbrauhaus-Keller Freising 003.jpg|196px]]
|align="right"|[[File:Hofbrauhaus-Keller Freising 004.jpg|196px]]
|-
|[[File:Hofbrauhaus-Keller Freising 019.jpg|196px]]
|align="center"|[[File:Hofbrauhaus-Keller Freising 017.jpg|196px]]
|align="right"|[[File:Hofbrauhaus-Keller Freising 016.jpg|196px]]
|}

A simple row with only three small images can be done as follows:

{| class="imageTable"
|-
|[[File:Hofbrauhaus-Keller Freising 019.jpg|196px]]
|align="center"|[[File:Hofbrauhaus-Keller Freising 017.jpg|196px]]
|align="right"|[[File:Hofbrauhaus-Keller Freising 016.jpg|196px]]
|}

Additional information on how to produce various table layouts:

Alternatively, standard HTML table syntax can be used by anyone who is familar with HTML coding. A simple single row table with three small images (like the previous example) can be done as follows:

<table class="imageTable"><tr>
<td>[[File:Hofbrauhaus-Keller Freising 019.jpg|196px]]</td>
<td>[[File:Hofbrauhaus-Keller Freising 017.jpg|196px]]</td>
<td>[[File:Hofbrauhaus-Keller Freising 016.jpg|196px]]</td>
</table>

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.


YouTube and Google videos

To add a video from YouTube on a page, copy the video ID from a YouTube URL, e.g. http://www.youtube.com/watch?v=PfLz-Yx6k14 and paste the relevant bit into the edit form within a youtube tag as follows:

<youtube>PfLz-Yx6k14</youtube>

<youtube>PfLz-Yx6k14</youtube>

To add a Google video on a page, find the ID by clicking the Embed video link next to the video screen or copy it from the URL if one is part of it. For example: http://video.google.com/videoplay?docid=-4130343380896166511#

Then simply place the ID in the following googlevideo tag:

<googlevideo>-4130343380896166511</googlevideo>

<googlevideo>-4130343380896166511</googlevideo>

Article comments

To add a blog style comments field below an article, such as this one: ...

<comments hideForm="false" />

... insert the following at the end of the article:

<comments hideForm="false" />

The comments are added to the discussion section of each page.