<p>This presentation shows how to add a logo to each slide, like the GitHub one you see above.</p>
<p>You can generalize the concept to add any additional markup to your presentations.</p>
</section><section>
<p><ahref="https://github.com/dzello/reveal-hugo/blob/master/exampleSite/content/logo-example">See the code for this presentation</a></p>
</section><section>
<p>For a basic setup, in the front matter, add an image to the presentation’s directory.</p>
<p>Then, add a logo section in the front matter:</p>
<pre><codeclass="language-toml">[logo]
src = "github-logo.png"
</code></pre>
<p>The front matter should end up looking like this:</p>
<pre><codeclass="language-toml">+++
title = "Logo presentation example"
outputs = ["Reveal"]
[logo]
src = "github-logo.png"
+++
</code></pre>
</section><section>
<p>If the logo placement doesn’t quite match your needs, you may customize it with the following paramaters:</p>
<pre><codeclass="language-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.
</code></pre>
<ul>
<li>
<p>Instead of absolute (<code>250px</code>), relative measurments (<code>12.5%</code>) should be used. They work better with different screen sizes.</p>
</li>
<li>
<p>By default, null (<code>""</code>) is used as alt text for logos, as otherwise the alt text would unneededly get read by screen readers.</p>
</li>
</ul>
</section><section>
<p>💡 Tip: to make the logo settings present on every presentation, add the settings to your site’s configuration file <code>config.toml</code> under <code>[params.logo]</code>:</p>
<pre><codeclass="language-toml">[params.logo]
src = "/img/logo.png"
</code></pre>
<p>Note that now, the path to the logo file shall be absolute, and should be stored in <code>static/img/logo.png</code> instead.</p>
</section><section>
<p>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.</p>
<p>For per-presentation override, you may add custom CSS with the ID <code>#logo</code> to:</p>
<p>Substitute <code>{section}</code> for <code>home</code> if you are adding a logo to the presentation at <code>content/_index.md</code>. Otherwise, substitute the name of the Hugo section where your presentation lives.</p>