Advanced Slide & Meta Data

Share & showcase
1

If anybody interested.

I was looking for a way to define some data at the beginning of an Advanced Slide note. and repeat them on each slides.

I found an easy way using CSS tricks:

  1. At the beginning of the presentation I put the data in style bracket this way:
<style>
.title:after  {content:"Slide MetaData Demo"}
.context:after {content: "Fake Meeting Somewhere 2022-08-25";}
.author:after   {content: "My Name";}
</style>
  1. Then inside the slides I can use this data in footers for instance like this:
<div class="author"><div>

Or

## <!-- element class="title" -->
  1. Of course it all make sens when you use them inside slide templates, for instance to set a footer for each slide with value specific on the presentation you make. So no data are in templates, only the layouts.

For instance :

<grid drag="100 10" drop="0 2"   align="topleft" class="slidetitle">
 <% title %>
</grid>

<% content %>

<grid drag="33 5" drop="1 -1" align="bottomleft" class="footer lfoot">
<%? lfoot %>
<span class="context"></span>
</grid>

<grid drag="33 5" drop="-1 -1" align="bottomright" class="footer rfoot">
<%? rfoot %>
<span class="author"></span>
</grid>

All slides with this template will have a nice footer with presentation data.

You can also make placeholder for e.g. logo :

<div class="logo"></div>

And set the logo inside the presentation style as well, define the size function to where it will be printed :

<style>
.logo {
  background-image: url("[[logo1.png]]"), 
   url("[[logo2.png]]");
  background-position: left, right;
  background-size: 200px;
  width: 400px;
  height: 200px;
 }
.footer .logo {
	background-size: 50px;
	width: 100px;
        height: 50px;
}
</style>

For recurrent “metadata” you can write them on css files on your volt and use them in presentation front matter:

---
css: [Src/regular_meeting.css]
---

It may not work on all browser but successfully tested on Obsidian, Chrome and Safari.

5 Likes
2

An other way to do it with more limitation

Add an hidden slide with some referenced material (or a dedicated note)

<!-- slide data-visibility="hidden" -->

Fake Meeting Somewhere 2022-08-25
^context

My Name
^author

embed the material in each slides

::: lfoot
![[slide tutorial#^context]]
:::

::: rfoot
![[slide tutorial#^author]]
:::

Note that without the full note path (e.g. ![[#^author]] ) it does not work.

1 Like