I published a small hack to mark banner images in Obsidian without the need for a plugin. Just a little CSS snippet and a callout.
5 Likes
Great idea! I tweaked the CSS a bit to center the image, rather than top left aligning it. Maybe not everyone wants this, but this is typically what I expect of my banners:
.banner-image.markdown-preview-view [data-callout="banner-image"] img {
min-height: var(--banner-image-height) !important;
width: 100%;
height: 0%;
object-fit: cover;
object-position: center;
}
Also I noticed a couple of selectors that aren’t valid CSS, I don’t think this nested syntax works in native CSS (not sure if it’s needed though):
.banner-image [data-callout="banner-image"] {
.callout-icon {
display: none;
}
}
3 Likes
Great snippet. Mind if I add it to my code page?
Also, I am no CSS expert, so perhaps I made a mistake here. But it seems nested CSS is possible, at least in Obsidian.
Of course, feel free! One other thing I noticed: embedded views are inheriting the margin in your snippet, which I don’t think is intentional. You can use the child selector (>) to fix that:
.banner-image > .markdown-preview-section {
margin-top: var(--banner-image-height) !important;
}
This way only the main document receives the top margin, not embedded documents (unless the embedded document also has a banner class)
As for the nested CSS: I tested it, and it does seem to work! That’s odd. I’m sure it’s not valid CSS, Obsidian must be doing a little magic behind the scenes. That’s very interesting, and good to know.
I am curious what theme you are using? I tried your centering code and it didn’t change the image alignment.
Maybe you can look at this
2 Likes
Huh, odd! I use the Minimal theme primarily, but it works in every theme I’ve tried (including the default one). I also tried the Sandbox vault and it works there. Maybe I changed something else that I’m forgetting. Here’s the full file that I’m using:
:root {
--banner-image-height: 120px;
}
.banner-image > .markdown-preview-section {
margin-top: var(--banner-image-height) !important;
}
.banner-image.markdown-preview-view [data-callout="banner-image"],
.banner-image.markdown-preview-view .image-embed {
position: absolute;
top: 0;
left: 0;
right: 0;
height: var(--banner-image-height) !important;
margin: 0px !important;
padding: 0px;
background-color: transparent;
.callout-icon {
display: none;
}
}
.banner-image.markdown-preview-view [data-callout="banner-image"] img {
min-height: var(--banner-image-height) !important;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.banner-image [data-callout="banner-image"] .callout-icon {
display: none;
}
1 Like
Can you show me a screenshot of what the centering looks like? Is it centering the focus on the image itself or do you mean it is centered on the page?
Ah: I might have figured out what is wrong. For my vault I didn’t like the banner-image class, I changed it to banner. All the code examples above used banner instead of banner-image like you have in your code. So if you copy/pasted my code, it probably isn’t applying because we use different class names.
Sorry about that, I forgot that I changed that!
I’m going to update the code above to use banner-image so that it’s consistent with your code. If that is indeed the issue, you should be able to copy/paste and hopefully it will work this time!
Just in case that isn’t the issue, here’s an image I use for a banner:
With your snippet it shows up like this:
With my changes it looks like this:
1 Like
I’m curious how folks are using the miner banner css given it relies on a ## to specify the bannerimg css type. When I enter this into my note Obsidian immediately interprets the ## as a section selector and ends up removing the image name before the ##.
Definitely curious! CSS nesting is a thing. Entering process.versions.chrome in the Web Inspector console returns “114.0.5735.289” for me. That version is supposed to have partial support. It’s not clear to me what is meant to be supported exactly.
Hey - I’m trying to use @TfTHacker’s CCS but it isn’t showing in Live Preview mode, I notice also other plugins (Banner image plugin) also stopped showing in Live Preview, was there something that changed in Obsidian?
Edit: using the default theme.
Thanks!