I was looking how to make some pages unique with a hooked-to-the-top banner widget.
and this is the result:
and here of course one in dark mode, because why not
don’t mind the text it’s just some random Lorem Ipsum created with AI.Silverbullet (here shoutout to @justyns for his awesome plugin)
but now back to the topic, The Banner. It’s just a simple Top-Hook-Widget with an image.
Here is the space-lua script for the widget with the top hook
-- priority: 20
widgets = widgets or {}
function widgets.banner()
local pageText = editor.getText()
local fm = index.extractFrontmatter(pageText)
if fm.frontmatter and fm.frontmatter.banner then
local bannerPath = fm.frontmatter.banner[1]
local bannerSize = fm.frontmatter.banner[2]
local md
if bannerSize and bannerSize ~= "" then
md = "![[" .. bannerPath .. "|" .. bannerSize .. "]]"
else
md = "![[" .. bannerPath .. "]]"
end
return widget.new {
markdown = md
}
end
return widget.new {}
end
event.listen {
name = "hooks:renderTopWidgets",
run = function(e)
return widgets.banner()
end
}
How to use it:
just add following attributes as array to the frontmatter of the page where you want the banner:
---
banner: ["banner/a_wide_image.jpg","1800x300"]
---
-or-
---
banner: ["banner/a_wide_image.jpg"]
---
- the first argument is the path to an image on silverbullet
- the second attribute are width and height - which are optional, only if you want to adjust the size of the banner
That’s it.
Following step is optional, if you want to remove the border of the top widget use this space-style:
#sb-main .cm-editor .sb-lua-top-widget.sb-lua-directive-inline{
border: none;
}
so why it matters and why is this better than a simple image inserted on the page?
- the image “feels” more embedded on the page than with the simple image tag
- if you have Table Of Contents enabled on the page, the banner will be above the TOC
TOC + banner :
vs. TOC + image:
These two reason come in my mind.
What’s your opinion? yay or nay?
