Difference between revisions of "Editing help"

From MunichBeerGardens.com
Jump to: navigation, search
(Wide images)
m (Text replacement - "<ads media=responsive></ads>" to "<!--<ads media=responsive></ads>-->")
(103 intermediate revisions by 13 users not shown)
Line 1: Line 1:
 
== Simple text editing ==
 
== 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:
+
'''This page is a quick reference for anyone wishing to make changes to this site.'''
 +
 
 +
The most basic text editing features, such as '''boldface''', ''italics'' and [[beer|links]] can be formatted with help of the buttons above the edit box.
 +
 
 +
http://www.munichbeergardens.com/images/beer/Edit_bar.gif
 +
 
 +
[[File:Jessica.jpg|right|300px]]
 +
 
 +
Alternatively, the syntax is simple. For bold text, enclose the word(s) within three single quotes:
  
 
<nowiki>'''</nowiki>'''bold text'''<nowiki>'''</nowiki>
 
<nowiki>'''</nowiki>'''bold text'''<nowiki>'''</nowiki>
Line 17: Line 25:
 
To link to a page on another website, enclose the link location within single square brackets and the linked word(s) after the URL:
 
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://www.example.com exampe]</nowiki>
+
<nowiki>[http://www.example.com example]</nowiki>
  
This will result in [http://www.example.com exampe]
+
This will result in [http://www.example.com example]
  
 
Alternatively, typing out the full URL without the brackets: ...
 
Alternatively, typing out the full URL without the brackets: ...
Line 63: Line 71:
 
etc.
 
etc.
  
 +
== Image links ==
 +
 +
To make an image link to some page, instead of leading to the larger version of the same image, add the link attribute pointing to the target page within the image markup as follows:
 +
 +
[[File:Alter Wirt Ramersdorf 005.jpg|160px|link=Alter Wirt Ramersdorf|left]]
 +
 +
<nowiki>[[File:Alter Wirt Ramersdorf 005.jpg|200px|</nowiki><span style="background:#efe9d9;">link=Alter Wirt  Ramersdorf</span><nowiki>]]</nowiki><br clear="all">
 +
 +
== Link to an image or other file ==
 +
 +
To link directly to a previously uploaded image or other file on this site, rather than linking to a page from an image as described above, use the <code>media:</code> prefix. For example: ...
 +
 +
<nowiki>[[media:Hofbrauhaus-Keller_Freising_006.jpg]]</nowiki>
  
== Image links ==
+
... will appear as [[media:Hofbrauhaus-Keller_Freising_006.jpg]]
  
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.:
+
Or if using other linked word(s) than the filename as the default link, separate the file part and the linked word(s) with a vertical bar <code>(<span style="color:#ff0000;"> | </span>)</code>, as follows:
  
[[File:Augustiner-Keller_003.jpg|135px|link=Augustiner-Keller]]
+
[[media:Hofbrauhaus-Keller_Freising_006.jpg<span style="color:#ff0000; font-weight:bold;">|</span>A Maß of HB lager]]
  
<pre>[[File:Augustiner-Keller_003.jpg|135px|link=Augustiner-Keller]]</pre>
+
The link will then appear in a sentence as [[media:Hofbrauhaus-Keller_Freising_006.jpg|A Maß of HB lager]]
  
 
== Display an email address  ==
 
== Display an email address  ==
Line 83: Line 104:
  
  
 +
<!--
 
== Skype button ==
 
== 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 <b>Tools->Options->Privacy</b>. Tick the checkbox ''Allow my status to be shown on the web'':
+
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 <b>Tools->Options->Privacy</b>. 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:
+
The following example creates a button whereby a call is made when clicked on:
  
 
  <nowiki><skype style="bigclassic" action="call">YourSkypeName</skype></nowiki>
 
  <nowiki><skype style="bigclassic" action="call">YourSkypeName</skype></nowiki>
  
<skype style="bigclassic" action="call">MunichBeerGarden</skype>
+
<skype style="bigclassic" action="add">munichbeergardens.com</skype>
  
 
The available styles are: balloon, bigclassic, smallclassic, smallicon, mediumicon
 
The available styles are: balloon, bigclassic, smallclassic, smallicon, mediumicon
Line 98: Line 120:
  
 
The available on-click actions are '''add''' (for adding contact), '''chat''' (for launching a chat window) and '''call''' (for starting a regular call).
 
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''' ==
+
== Google Maps ==
  
 
To create new or edit existing Google maps on pages, click on the map button http://www.munichbeergardens.com/extensions/GoogleMaps/images/button_map_open.gif above the edit box.  
 
To create new or edit existing Google maps on pages, click on the map button http://www.munichbeergardens.com/extensions/GoogleMaps/images/button_map_open.gif above the edit box.  
Line 109: Line 132:
 
== Images ==
 
== Images ==
  
[[Image:Landgasthof_Langwied_003.jpg|left|120px|]] Align an image to the left of the text...
+
[[Image:Alte Villa 040.jpg|left|300px|]] Align an image to the left of a text and force a ''clear-all'' break after this sentence...
  
 
<br clear="all">
 
<br clear="all">
  
<pre><nowiki>[[Image:Landgasthof_Langwied_003.jpg|left|120px|]] Align an image to the left of the text...
+
<nowiki>[[Image:Alte Villa 040.jpg|left|300px|]]
 +
Align an image to the left of a text and force a clear-all break after the sentence...</nowiki>
  
<br clear="all"></nowiki></pre>
+
<nowiki><br clear="all"></nowiki>
  
 
== Wide images ==
 
== Wide images ==
  
To display an image that is generally wider than most screens in a horizontal scroll box, the syntax is:
+
To display an image in a horizontal scroll box that is wider than most screens, the syntax is:
 +
 
 +
:<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>
+
{{wide image|Biergarten sign 004.jpg|3000px|Biergarten sign}}
  
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 windows that are otherwise not wide enough to display the image width completely without sideways scrolling of the browser window itself. In other words, it prevents the image from stretching beyond a browsers natural width, which would otherwise cause text paragraphs of an entire page require sideways scrolling, making the page layout less ideal on narrow screens, such as hand-held phone browsers and netbooks.
+
The following example includes a 1,500 pixels wide image of the [[Augustiner-Keller]] entrance sign. The code generates a scrollbar below the image on systems with browsers that are otherwise not wide enough to display the full width of the image without scrolling the entire browser window sideways:
  
<nowiki>{{wide image|Augustiner-Keller 036.jpg|1500px|Augustiner-Keller}}</nowiki>
+
:<nowiki>{{wide image|Augustiner-Keller 036.jpg|1500px|Augustiner-Keller}}</nowiki>
  
{{wide image|Augustiner-Keller 036.jpg|800px|Augustiner-Keller}}
+
{{wide image|Augustiner-Keller 036.jpg|1500px|Augustiner-Keller entrance sign}}
 +
The wide image box is best used for displaying images that are wider than 800 pixels, preventing the visible image area from stretching past the available screen space on small mobile devices. A scroll bar will appear only on devices where the image is wider than the available screen width.
  
{{wide image|Schlosswirtschaft Mariabrunn 050.jpg|1500px|View of Munich city from [[Schlosswirtschaft Mariabrunn|Mariabrunn]] with the alps behind.|45%|left}}
+
{{wide image|Schlosswirtschaft Mariabrunn 011.jpg|1500px|Munich skyline with alps in the background, view from the hilltop at [[Schlosswirtschaft Mariabrunn|Mariabrunn beer garden]].|45%|left}}
  
'''Defining a size of scroll-box:'''
+
'''Image box size and alignment'''
  
Here is a left-aligned scroll-box taking up 45% of the paragraph width:
+
This is an example of a left-aligned image with a scrollbar taking up 45% of the paragraph width:
  
 
<nowiki>
 
<nowiki>
{{wide image|Schlosswirtschaft Mariabrunn 050.jpg|1500px|
+
{{wide image|Schlosswirtschaft Mariabrunn 011.jpg|1500px|Munich skyline with alps in the background...|45%|left}}
View of Munich city from [[Schlosswirtschaft Mariabrunn|Mariabrunn]] with the alps behind.|
 
45%|left}}
 
 
</nowiki>
 
</nowiki>
  
The width of the scroll-box can also be defined in exact pixels rather than a percentage of paragraph or default maximum width of the browser window.
+
The scrollable box can also be set to a fixed pixel width rather than a percentage of the paragraph width. Alternatively, if the alignment value is ommited altogether, the image box will extend to the maximum available paragraph width of the browser window (as in the previous Augustiner entrance sign example).
 
 
The ''alignment'' valie can be '''left''', '''right''', '''center''', or '''none'''.
 
 
 
  
To display an image without a caption, simply omit the caption.
+
The ''alignment'' value can be '''left''', '''right''', '''center''', or '''none''' (same as if omitted altogether).
  
 
<br clear="all">
 
<br clear="all">
  
== Standard images layout ==
+
== Standard display for images ==
  
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:
+
The individual beer garden pages typically have one large image and three smaller ones below in a 600 pixels wide table, using wiki mark-up with some added styling to create margins between images and table cells. The first table cell with the large image spans three columns. The colums below can have one or more rows. Below is an example mark-up used to display one large image and six smaller images in two rows below it on the page  titled [[Hofbrauhaus-Keller Freising]]:
  
 
  <nowiki>{| class="imageTable"
 
  <nowiki>{| class="imageTable"
Line 182: Line 204:
 
* http://meta.wikimedia.org/wiki/Help:Table#Combined_use_of_COLSPAN_and_ROWSPAN
 
* http://meta.wikimedia.org/wiki/Help:Table#Combined_use_of_COLSPAN_and_ROWSPAN
  
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:
+
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 also be done as follows:
  
 
  <nowiki><table class="imageTable"><tr>
 
  <nowiki><table class="imageTable"><tr>
Line 190: Line 212:
 
</table></nowiki>
 
</table></nowiki>
  
== Table of Contents ==
+
== Display a random image ==
 +
 
 +
'''A random image can be displayed with various optional parameters, such as size, left or right aligned and 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>
 +
 
 +
A caption will be pulled from the image descripion page if one exists or if it was 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="Augustiner_001.jpg|Augustiner-Keller_002.jpg|Augustiner-Keller_003.jpg" />
  
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.
+
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="Augustiner_001.jpg|Augustiner-Keller_002.jpg|Augustiner-Keller_003.jpg" /></nowiki></span>
  
 +
<br clear="all">
  
== YouTube and Google videos ==
+
== Table of Contents ==
  
To add a video from YouTube on a page, copy the video ID from a YouTube URL, e.g.
+
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.
[http://www.youtube.com/watch?v=PfLz-Yx6k14 http://www.youtube.com/watch?v=<font color="red">PfLz-Yx6k14</font>] and paste the relevant bit into the edit form within a ''youtube'' tag as follows:
 
  
<pre><nowiki><youtube>PfLz-Yx6k14</youtube></nowiki></pre>
 
  
<youtube>PfLz-Yx6k14</youtube>
+
== YouTube videos ==
  
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:
+
To add a video from YouTube on any page, simply copy the video ID from a YouTube URL, e.g.
[http://video.google.com/videoplay?docid=-4130343380896166511# http://video.google.com/videoplay?docid=<font color="red">-4130343380896166511</font>#]
+
[http://www.youtube.com/watch?v=I2DiJzlWvGw http://www.youtube.com/watch?v=<font color="red">I2DiJzlWvGw</font>] and paste into a ''youtube'' tag in the edit form as follows:
  
Then simply place the ID in the following ''googlevideo'' tag:
+
<pre><nowiki><HTML5video type="youtube">I2DiJzlWvGw</HTML5video></nowiki></pre>
<pre><nowiki><googlevideo>-4130343380896166511</googlevideo></nowiki></pre>
 
  
<googlevideo>-4130343380896166511</googlevideo>
+
<HTML5video type="youtube">I2DiJzlWvGw</HTML5video>
  
 +
<!--
 
== Article comments ==
 
== Article comments ==
  
To add a blog style comments field below an article, such as this one: ...  
+
To a comments field below an article, such as this one: ...  
  
 
<comments hideForm="false" />
 
<comments hideForm="false" />
Line 223: Line 269:
  
 
The comments are added to the discussion section of each page.
 
The comments are added to the discussion section of each page.
 +
-->
  
 
+
<!--<ads media=responsive></ads>-->
  
 
[[de:Bearbeitungshilfe]]
 
[[de:Bearbeitungshilfe]]

Revision as of 18:42, 18 May 2018

Simple text editing

This page is a quick reference for anyone wishing to make changes to this site.

The most basic text editing features, such as boldface, italics and links can be formatted with help of the buttons above the edit box.

Edit_bar.gif
Jessica.jpg

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 example]

This will result in example

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 some page, instead of leading to the larger version of the same image, add the link attribute pointing to the target page within the image markup as follows:

Alter Wirt Ramersdorf 005.jpg

[[File:Alter Wirt Ramersdorf 005.jpg|200px|link=Alter Wirt Ramersdorf]]

Link to an image or other file

To link directly to a previously uploaded image or other file on this site, rather than linking to a page from an image as described above, use the media: prefix. For example: ...

[[media:Hofbrauhaus-Keller_Freising_006.jpg]]

... will appear as media:Hofbrauhaus-Keller_Freising_006.jpg

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

[[media:Hofbrauhaus-Keller_Freising_006.jpg|A Maß of HB lager]]

The link will then appear in a sentence as A Maß of HB lager

Display an email address

The following code:

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

... will display as:

hello@munichbeergardens.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.

Images

Alte Villa 040.jpg
Align an image to the left of a text and force a clear-all break after this sentence...


[[Image:Alte Villa 040.jpg|left|300px|]] Align an image to the left of a text and force a clear-all break after the sentence...

<br clear="all">

Wide images

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

{{wide image|name|image width|caption|box width|alignment}}
Biergarten sign
Biergarten sign

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

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

The wide image box is best used for displaying images that are wider than 800 pixels, preventing the visible image area from stretching past the available screen space on small mobile devices. A scroll bar will appear only on devices where the image is wider than the available screen width.

Munich skyline with alps in the background, view from the hilltop at Mariabrunn beer garden.
Munich skyline with alps in the background, view from the hilltop at Mariabrunn beer garden.

Image box size and alignment

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

{{wide image|Schlosswirtschaft Mariabrunn 011.jpg|1500px|Munich skyline with alps in the background...|45%|left}}

The scrollable box can also be set to a fixed pixel width rather than a percentage of the paragraph width. Alternatively, if the alignment value is ommited altogether, the image box will extend to the maximum available paragraph width of the browser window (as in the previous Augustiner entrance sign example).

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


Standard display for images

The individual beer garden pages typically have one large image and three smaller ones below in a 600 pixels wide table, using wiki mark-up with some added styling to create margins between images and table cells. The first table cell with the large image spans three columns. The colums below can have one or more rows. Below is an example mark-up used to display one large image and six smaller images in two rows below it on the page titled Hofbrauhaus-Keller Freising:

{| 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 also 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>

Display a random image

A random image can be displayed with various optional parameters, such as size, left or right aligned and 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" />

A caption will be pulled from the image descripion page if one exists or if it was 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:


Augustiner-Keller


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="Augustiner_001.jpg|Augustiner-Keller_002.jpg|Augustiner-Keller_003.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.


YouTube videos

To add a video from YouTube on any page, simply copy the video ID from a YouTube URL, e.g. http://www.youtube.com/watch?v=I2DiJzlWvGw and paste into a youtube tag in the edit form as follows:

<HTML5video type="youtube">I2DiJzlWvGw</HTML5video>