diff options
author | Josh Dzielak <dzello@users.noreply.github.com> | 2020-11-04 00:41:35 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-11-04 00:41:35 +0300 |
commit | 85956451cea3424e3ba4e3f40dfc5828739f8dd8 (patch) | |
tree | c07bca0564c3e56f9d3d2a54f6442a8fbb39773f | |
parent | f2878276789b90c96c83871e454911fd4dbc5d85 (diff) | |
parent | 64af24e0822b09b40652d128e4afaeb36114a945 (diff) |
Merge pull request #99 from jtagcat/logo
logo: include it for the user
-rw-r--r-- | exampleSite/content/logo-example/_index.md | 89 | ||||
-rw-r--r-- | layouts/_default/baseof.reveal.html | 11 |
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 -}} |