[gimp-web/testing] Update tutorial template to reflect new changes

[Pat David <patdavid src gnome org>]

commit a65fa33b999a1dbc7702e1ce70ae4aaefd8aae1a
Author: Pat David <patdavid gmail com>
Date:   Fri May 6 13:44:39 2016 -0500

    Update tutorial template to reflect new changes
    
    The template tutorial has been updated to include new material and
    to work better as a basis for someone wanting to write a tutorial.
    
    This should be worked on some more by someone later (possibly me).

 content/tutorials/template/index.md       |   85 ++++++++++++++++++++++++++---
 content/tutorials/template/wilber-big.png |  Bin 0 -> 35207 bytes
 2 files changed, 77 insertions(+), 8 deletions(-)
---
diff --git a/content/tutorials/template/index.md b/content/tutorials/template/index.md
index 934ec2f..936a37c 100644
--- a/content/tutorials/template/index.md
+++ b/content/tutorials/template/index.md
@@ -16,12 +16,26 @@ Something like the following works well:
 
 
 You can use standard [Markdown][] formatting for posts.
+We have a short [Markdown reference][] here on gimp.org if you want to see it with our styling.
 
 [Markdown]: https://daringfireball.net/projects/markdown/syntax
+[Markdown reference]: /about/meta/markdown.html
 
+Pelican makes it easy to generate a Table of Contents for your tutorial based on headings.
+Just include `[TOC]` on a line by itself where you'd like an automatic TOC list generated.
 
-## Headings
+**Table of Contents:**
+
+[TOC]
+
+---
+
+
+## Style Guide
+Consider your content as an outline first if possible.  This will help you visualize the heading breakdown 
and will make it easier for readers to follow your content.
 
+
+## Headings
 Headings in Markdown are denoted using two different syntaxes (setext and atx).
 Usually the `<H1>` element of a page is already being used for a title, so the tutorial should use at most 
H2 and below.
 Thus, the easiest way to denote headings is using the atx-style:
@@ -34,34 +48,72 @@ Thus, the easiest way to denote headings is using the atx-style:
 ###### This is an H6
 ```
 
+Try to use logical heading structure for your tutorials.
+It helps if you consider your tutorial as an outline first.
+
+
+## Links
+Markdown links are written in one of two ways, inline or reference.
+The link text is delimited using [square brackets] in both ways.
+
+**Inline** links are created by:
+
+```markdown
+Here's a link to [GIMP.org](https://www.gimp.org)
+```
+
+**Reference** links follow the link text with square brackets again with a label or reference for the link.  
Then anywhere else in the document the link label is defined with the url:
+
+
+```
+Here's a link to [GIMP.org][wgo]
+
+...more content...
+
+[wgo]: https://www.gimp.org
+```
+
+**Note**: another type of reference link that works with our flavor of Markdown is to forgo the ref name, 
and instead refer to the link text:
+
+```
+Here's a link to [GIMP.org][]
+
+...more content...
+
+[GIMP.org]: https://www.gimp.org
+```
+
 
 ## Images
+The tutorial file structure tries to be self-contained.  This means that you should try to keep any assets 
needed for the tutorial together in the same directory (this helps with portability in case the tutorial gets 
used somewhere else).
 
-You can insert images using Markdown like this:
+You can insert images using Markdown like this (but should really use the `<figure>` option
+described below):
 
 ```markdown
-![Alt Text](/images/frontpage/wilber-big.png)
+![Alt Text](wilber-big.png)
 ```
 
 You can also use plain html (the Markdown parser will pass it through to the output page):
 
 ```html
-<img src="/images/frontpage/wilber-big.png" alt="Alt Text">
+<img src="wilber-big.png" alt="Alt Text">
 ```
 
 In either case, the results will be the same:
 
-![Alt Text](/images/frontpage/wilber-big.png)
+![Alt Text]({filename}wilber-big.png)
 
+There is a better way, though...
 
-### Better Figures
 
+### Better Figures
 It may make more semantic sense to encapsulate images inside of `<figure>` tags.
 This will also allow the use of a `<figcaption>` element to provide a caption:
 
 ```html
 <figure>
-<img src="/images/frontpage/wilber-big.png" alt="Alt Text">
+<img src="wilber-big.png" alt="Alt Text">
 <figcaption>
 A caption for the image/figure.
 </figcaption>
@@ -71,8 +123,25 @@ A caption for the image/figure.
 Which will result in:
 
 <figure>
-<img src="/images/frontpage/wilber-big.png" alt="Alt Text">
+<img src="{filename}wilber-big.png" alt="Alt Text">
 <figcaption>
 A caption for the image/figure.
 </figcaption>
 </figure>
+
+Use this form wherever an image is to be included (which _should_ be almost always).
+(Possible exception use-cases might be right/left aligned small images that don't require a full 
figure+caption).
+
+
+## GIMP Menu Commands
+For consistency, there is a pre-defined class for referencing menu commands in GIMP, such as:
+
+<div class='GIMPCmd'>Filters → Blur → Gaussian Blur</div>
+
+Which can be accomplished using `class='GIMPCmd'` on a div (or a `<span>` or `<kbd>`):
+
+```html
+<div class='GIMPCmd'>Filters → Blur → Gaussian Blur</div>
+```
+
+This is used when referring to operations that require menu interactions with GIMP.
diff --git a/content/tutorials/template/wilber-big.png b/content/tutorials/template/wilber-big.png
new file mode 100644
index 0000000..ba51703
Binary files /dev/null and b/content/tutorials/template/wilber-big.png differ