Banner Images + Icons (Experimental) & More Image Options (CSS Snippet)

Share & showcase
1

Copy the snippet here: Github - CSS Banners, Icons (Experimental), and other Image Options

With the help of @efemkay’s banner image code in this thread, I managed to make a snippet that enables banner images (which come in 3 styles that can be toggled with the Style Settings plug-in). The banner height can be changed with Style Settings as well.

In addition, the snippet allows circular profile-esque images, page icon images (Warning: experimental feature that is commented out by default, and also glitchy), and floating images to the left or right.

Banners1
Banners11920×1001 48.4 KB

I highly recommend leaving the icon features alone if you’re using a mobile device, because the icons end up in weird positions on mobile.

How it Works

Css Classes

  • obsidian-banner - type this in the frontmatter after cssClasses to enable the banner image.
  • obsidian-icon - type this in the frontmatter after cssClasses to enable the icon image.

Image Alts

Example of an image alt (banner): ![banner](image.png)

  • banner - makes the image the banner image.
  • higher - positions the banner image higher.
  • lower - positions the banner image lower.
  • circle, profile, or round - typing any of these will make the image circular in shape, like a profile picture.
  • left - floats the image left.
  • right - floats the image right
  • icon - turns the image into a title icon.

A Warning About the Icon Feature

The icon features is…not very well-programmed. I apologize. When viewing multiple panes at the same time, or viewing the note on a mobile device, it drifts into a weird position, and a theme with a custom readable line length may disrupt its placement on the page.
You can still use the icons feature, but be warned: it can act a bit wonky.

I recommend just sticking to the banners.

Banners4
Banners41920×1000 124 KB

8 Likes
2

very nice
what is your theme name ?

1 Like
3

The themes are Shiba Inu and Chime.

1 Like
4

thank you man you solved this problem with banner and please can you give me a track to learn css like you ? :grinning:

1 Like
5

Well, I’m really still a beginner and hadn’t touched css before December. Like I said above, I was only able to make the banners with @efemkay’s code.

If you want to get started learning css though, I’d recommend you start experimenting by tweaking existing themes’ code and looking at other people’s css. I started by messing with the Mado Miniflow theme. The result of my tweaking was an abomination, but it gave me a feel for how css works. After that, and a few hours of pasting css from Wikipedia, I’ve been able to make simple themes from scratch.

Sololearn has a free course on css that you can also view if you like. However, I think the fastest way to learn is by observing, replicating other people’s css tricks, and experimenting.

I’d also recommend reading these posts. They’re a great introduction to making css for Obsidian.

Getting comfortable with Obsidian CSS
Common Selectors for Custom CSS

2 Likes
6

I’m new with CSS too. I put this in my note:

---
cssclass: obsidian-banner
banner: ![image-alt|banner](books.jpg)
---

but nothing happens.
Can you give a frontmatter example of yours please? Thanks in advance.

7

You got the css class right, but the image you want to use for the banner can go anywhere on the page except the frontmatter.

---
cssclass: obsidian-banner
---
![a picture of the ocean|banner](ocean.png)

The banner image is a normal image with an extra alt (separated by an |).
You can also use the banner alt by itself:

![banner](books.jpg)

or put the alt inside a local image wikilink embed:

![[pasted image.png|banner]]
1 Like
8

Thanks, very kind of you.

9

hey, how do you make the tasks view ? in the first image
it super cool

10

It was as snippet based on a CSS class in the Mado Miniflow theme. I put it on a repo here if you wanna use it. You just use the put cssclass: panel or cssclass: mado-panel in the note frontmatter.

11

Thanks to the seniors for sharing the banner.
This works great and suits me.
Then I also made some adjustments and wanted to give back to everyone here.
Adjust as follows:

  1. Use the icon on desktop and mobile phone, and the location will not be lost.
  2. In untitled mode, preview can be performed normally.
12
  1. The page can be previewed normally when hovering.
    3
    31821×934 104 KB
1 Like
13
  1. In the untitled mode of live preview, you can edit normally.
    4
    41505×724 109 KB

There is a follow-up, but I can’t reply now and I have to wait for a while.

2 Likes
14
  1. There will not be an extra blank line when previewing.
    5
    51398×1904 131 KB
1 Like
15
  1. Banner or icon can be used alone or together.
    6-1
    6-11401×967 79.3 KB

    6-2
    6-21404×953 33.4 KB

    6-3
    6-31404×978 81.3 KB
16

Below is the modified CSS：

/* ---- the code below is modified version of Bluemoondragon07's banner image in this forum post: https://forum.obsidian.md/t/banner-images-icons-experimental-more-image-options-css-snippet/53738 ---- */
/* ----- common variants ----- */
body {
    --banner-height: 250px;
    --icon-height: 100px;
}

/* ----- icon setting ----- */
.internal-embed.image-embed[alt*="icon"] {
    display: contents;
}

.obsidian-icon img[alt*="icon"] {
    position: absolute;
    width: 80px !important;
    object-fit: cover;
    border-radius: 100%;
    z-index: 1;
}

/* ---- icon position setting --- */
.obsidian-icon img[alt*="icon"] {
    top: 20px;
}

.obsidian-icon.markdown-preview-view:has(img[alt*="icon"]) .mod-header {
    position: relative;
    padding-top: calc(var(--icon-height) - 20px);
    z-index: 1;
}

.obsidian-icon:has(img[alt*="icon"]) .cm-sizer {
    position: static;
    padding-top: calc(var(--icon-height) - 20px);
    z-index: 1;
}


/* ----- banner setting ----- */
/* make the div (in LP) containing the image doesn't control the css box-sizing */
.internal-embed.image-embed[alt*="banner"] {
    display: contents;
}

.obsidian-banner img[alt*="banner"] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--banner-height);
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    object-fit: cover;
    object-position: 50% 50%;
    overflow: hidden;
    user-select: none;
    border-radius: 0px;
}

/* ---- banner position setting --- */
.obsidian-banner.markdown-preview-view:has(img[alt*="banner"]) .mod-header {
    position: relative;
    padding-top: calc(var(--banner-height) - 40px);
    z-index: 1;
}

.obsidian-banner:has(img[alt*="banner"]) .cm-sizer {
    position: static;
    padding-top: calc(var(--banner-height) - 40px);
    z-index: 1;
}

.obsidian-icon:has(img[alt*="banner"]) img[alt*="icon"] {
    top: calc(var(--banner-height) - 100px);
}

/* ---- banner gradient --- */
.obsidian-banner img[alt*="banner"] {
    -webkit-mask-image: -webkit-gradient(linear, 50% 60%, 50% 100%, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

/* ---- banner position setting optional --- */
.obsidian-banner img[alt*="banner"][alt*="0%"] {
    object-position: 50% 0%;
}

.obsidian-banner img[alt*="banner"][alt*="5%"] {
    object-position: 50% 5%;
}

.obsidian-banner img[alt*="banner"][alt*="10%"] {
    object-position: 50% 10%;
}

.obsidian-banner img[alt*="banner"][alt*="15%"] {
    object-position: 50% 15%;
}

.obsidian-banner img[alt*="banner"][alt*="20%"] {
    object-position: 50% 20%;
}

.obsidian-banner img[alt*="banner"][alt*="25%"] {
    object-position: 50% 25%;
}

.obsidian-banner img[alt*="banner"][alt*="30%"] {
    object-position: 50% 30%;
}

.obsidian-banner img[alt*="banner"][alt*="35%"] {
    object-position: 50% 35%;
}

.obsidian-banner img[alt*="banner"][alt*="40%"] {
    object-position: 50% 40%;
}

.obsidian-banner img[alt*="banner"][alt*="45%"] {
    object-position: 50% 45%;
}

.obsidian-banner img[alt*="banner"][alt*="50%"] {
    object-position: 50% 50%;
}

.obsidian-banner img[alt*="banner"][alt*="55%"] {
    object-position: 50% 55%;
}

.obsidian-banner img[alt*="banner"][alt*="60%"] {
    object-position: 50% 60%;
}

.obsidian-banner img[alt*="banner"][alt*="65%"] {
    object-position: 50% 65%;
}

.obsidian-banner img[alt*="banner"][alt*="70%"] {
    object-position: 50% 70%;
}

.obsidian-banner img[alt*="banner"][alt*="75%"] {
    object-position: 50% 75%;
}

.obsidian-banner img[alt*="banner"][alt*="80%"] {
    object-position: 50% 80%;
}

.obsidian-banner img[alt*="banner"][alt*="85%"] {
    object-position: 50% 85%;
}

.obsidian-banner img[alt*="banner"][alt*="90%"] {
    object-position: 50% 90%;
}

.obsidian-banner img[alt*="banner"][alt*="95%"] {
    object-position: 50% 95%;
}

.obsidian-banner img[alt*="banner"][alt*="100%"] {
    object-position: 50% 100%;
}

/* ---- hide preview space line --- */
.obsidian-banner.markdown-preview-view span[alt*="banner"]+br {
  display: none;
}

.obsidian-banner.markdown-preview-view span[alt*="icon"]+br {
  display: none;
}

/* --- profile image --- */
img[alt*="circle"],
img[alt*="profile"],
img[alt*="round"] {
    display: block;
    border-radius: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    width: 60%;
    position: 50% 50%;
    margin-right: auto;
    margin-left: auto;
}

/* --- float images --- */
.markdown-rendered img[alt*="right"] {
    display: flexbox;
    float: right;
    clear: right;
    max-width: 40%;
    margin-left: 15px;
}

.markdown-rendered img[alt*="left"] {
    display: flexbox;
    float: left;
    clear: left;
    max-width: 40%;
    margin-right: 40px;
}
5 Likes
17

*~ :star::star::star::trophy::star::star::star: ~*

Wow, I’m amazed! This so much better than the original one. Thank you for sharing your skill!

I remember that I was having a lot of difficulty with the icon position, and you fixed it perfectly! Your version is also a lot cleaner and has better options. Like–:exploding_head: wow!

1 Like
19

I love this snippet, that was exactly what I was looking for! Could you make a version of this snippet in which the banner goes above the note’s title? So that an option to increase the banner’s height gets possible.

I tried to do it, but I’m terrible with CSS lol

20

I like the idea.
Though, I am confused. Which snippet is the current correct one?
The one @CheLin posted on Sep 2023,
Or, the one on the first link given by @Bluemoondragon07 ?

21

Thanks to @Bluemoondragon07 @efemkay and @CheLin for the works here.
I’m using this CSS for note’s banner instead of Banner Plugin, for several reasons.
Here’s how my Home page looks like for now:

image
image1006×686 148 KB