logo: include it for the user

2 files changed, 49 insertions, 51 deletions

diff --git a/exampleSite/content/logo-example/_index.md b/exampleSite/content/logo-example/_index.md
index d943296..1a36d6e 100644
--- a/exampleSite/content/logo-example/_index.md
+++ b/exampleSite/content/logo-example/_index.md
@@ -3,7 +3,6 @@ title = "Logo presentation example"
 outputs = ["Reveal"]
 [logo]
 src = "github-logo.png"
-alt = "GitHub logo with Octocat"
 [reveal_hugo]
 custom_theme = "reveal-hugo/themes/robot-lung.css"
 margin = 0.2
@@ -17,83 +16,71 @@ You can generalize the concept to add any additional markup to your presentation
 
 ---
 
-[See the code for this presentation](https://github.com/dzello/reveal-hugo/blob/master/exampleSite/content/logo-example/_index.md)
+[See the code for this presentation](https://github.com/dzello/reveal-hugo/blob/master/exampleSite/content/logo-example)
 
 ---
 
-First, create a partial called `body.html` and put it in this directory:
+For a basic setup, in the front matter, add an image to the presentation's directory.
 
-```text
-layouts/partials/{section}/reveal-hugo/body.html
+Then, add a logo section in the front matter:
+```toml
+[logo]
+src = "github-logo.png"
 ```
-
----
-
-Substitute `{section}` for `home` if you are adding a logo to the presentation at `content/_index.md`. Otherwise, substitute the name of the Hugo section where your presentation lives. 
-
----
-
-The presentation you're looking at right now is in `content/logo-example`, so the partial to add the logo lives in:
-
-```text
-layouts/partials/logo-example/reveal-hugo/body.html
+The front matter should end up looking like this:
+```toml
++++
+title = "Logo presentation example"
+outputs = ["Reveal"]
+[logo]
+src = "github-logo.png"
++++
 ```
 
 ---
 
-💡 Tip: to make the logo appear in every presentation, put it here:
+If the logo placement doesn't quite match your needs, you may customize it with the following paramaters:
 
-```text
-layouts/partials/reveal-hugo/body.html
+```toml
+[logo]
+src = "github-logo.png" # Location of the file displayed.
+alt = "" # Alt text. 
+width = "15%" # Size of the file.
+diag = "1%" # How far from the top right should the file be.
+top = "1%" # Overrides diag.
+right = "1%" # Overrides diag.
 ```
 
----
+ - Instead of absolute (`250px`), relative measurments (`12.5%`) should be used. They work better with different screen sizes.
 
-💡 Tip: In addition to `body.html`, you can create partials `head.html` and `end.html` in any of those directories. 
+ - By default, null (`""`) is used as alt text for logos, as otherwise the alt text would unneededly get read by screen readers.
 
 ---
 
-- head.html: Add markup just before the closing `</head>` tag
-- body.html: Add markup just before the closing `</body>` tag
-- end.html: Add markup just before the closing of the Reveal.js `div.slides` container
-
----
+💡 Tip: to make the logo settings present on every presentation, add the settings to your site's configuration file `config.toml` under `[params.logo]`:
 
-Once the partial exists in `body.html`, we can add our image tag to it:
-
-```html
-<img id="logo" src="{{ .Param "logo.src" }}" alt="{{ .Param "logo.alt" }}">
+```toml
+[params.logo]
+src = "/img/logo.png"
 ```
+Note that now, the path to the logo file shall be absolute, and should be stored in `static/img/logo.png` instead.
 
 ---
 
-In this example, the src and alt attributes are set to values from the content's front matter or site's configuration, which you can see in `logo-example/_index.md`:
+Depending on the theme you're using, your styles will be different. <br>You may also prefer to put your CSS in an external file or your Reveal.js theme.
 
-```toml
-[logo]
-src = "/images/github-logo.png"
-alt = "GitHub logo with Octocat"
+For per-presentation override, you may add custom CSS with the ID `#logo` to:
+```text
+layouts/partials/{section}/reveal-hugo/body.html
 ```
 
----
+Substitute `{section}` for `home` if you are adding a logo to the presentation at `content/_index.md`. Otherwise, substitute the name of the Hugo section where your presentation lives. 
 
-To position the logo, we can add a style tag to `body.html`:
-
-```html
-<style>
-  #logo {
-    position: absolute;
-    top: 20px;
-    left: 20px;
-    width: 250px;
-  }
-</style>
+For a site-wide override, use:
+```text
+layouts/partials/{section}/reveal-hugo/body.html
 ```
 
-<small>
-💡 Depending on the theme you're using, your styles will be different. <br>You may also prefer to put your CSS in an external file or your Reveal.js theme.
-</small>
-
 ---
 
 # 🤗
diff --git a/layouts/_default/baseof.reveal.html b/layouts/_default/baseof.reveal.html
index a25a4d7..61b735f 100644
--- a/layouts/_default/baseof.reveal.html
+++ b/layouts/_default/baseof.reveal.html
@@ -12,6 +12,17 @@
     {{- if fileExists (printf "layouts/partials/%s.html" $sectionHeadPartial) -}}{{ partial $sectionHeadPartial . }}{{- end }}
   </head>
   <body>
+    {{ if .Param "logo.src" }}
+    <style>
+      #logo {
+        position: absolute;
+        top: {{ if .Param "logo.top"}}{{ .Param "logo.top" }}{{ else if .Param "logo.diag" }}{{ .Param "logo.diag" }}{{ else }}1%{{ end }};
+        left: {{ if .Param "logo.top"}}{{ .Param "logo.left" }}{{ else if .Param "logo.diag" }}{{ .Param "logo.diag" }}{{ else }}1%{{ end }};
+        width: {{ if .Param "logo.width"}}{{ .Param "logo.width" }}{{ else }}15%{{ end }};
+      }
+    </style>
+    <img id="logo" src="{{ .Param "logo.src" }}" alt="{{ .Param "logo.alt" }}">
+    {{ end }}
     <div class="reveal">
       <div class="slides">
         {{- block "main" . -}}{{- end -}}