Notion-like Icon And PageCover

Plugins
,
#1

Do you like the icon and page cover in notion? Try this! This plugin brings you the same experience as notion.

Overview:

image
image1822×908 201 KB

Emoji selector:

image
image1006×1004 90.7 KB

Search by keyword:

image
image800×790 42.2 KB

System icons:

image
image978×702 53.2 KB

Custom icon content:

image
image936×404 74.7 KB

After installing the plugin, there will be two buttons above the title of each tiddler (which will be displayed when the mouse hovers over it) for adding icons (default is emoji📒) and adding page covers (default is https://source.unsplash.com/random). Click on the icon to modify the icon content, and click on the modify cover to modify the cover address (can be URL or tiddler title).

> View and Install here <

Update

v0.0.6

  • Fix the problem that the title cannot be selected when adding icons and covers at the same time. (by @arunnbabu81 )
8 Likes
Request for Tiddler Cover
Unsplash integration in TiddlyWiki
TiddlyWiki-CPL: TiddlyWiki world of Google App Store!
Request for Tiddler Cover
IMAGES - every way to use them!
#2

good look :grinning:

Thanks.

#3

This looks so good, great work ! :smiley: Great theme too !

1 Like
#4

Good work @Sttot

I added this to a TW with krystal plug in installed. Once I add a cover image, I was unable to click on the view toolbar buttons of that tiddler. Can you look into this issue.

#5

That must be a z-index style problem. Can you please provide the wiki where the problem occurred or provide a way to reproduce the problem? Thank you.

#6

Krystal

Drag and drop the notion cover page and icon plug in into the above given wiki……add cover image for one of the tiddlers….I guess that would suffice to reproduce the issue. Thanks for the quick reply

#7

@arunnbabu81 Fixed in v0.0.6. :tada: There is a delay in updating the GitHub page, so you can wait a while before downloading it.

2 Likes
#8

@Sttot : great plugin.
I think I may have stumbled upon an issue. If the tiddler icon is set to a tiddler that contains SVG, the icon is shown twice.

Steps to reproduce:
1- start from fresh tiddlywiki 5.2.3 (untested in other) in TiddlyDesktop
2- drag to install TiddlySeq Theme — Logseq-like TiddlyWiki Template and save+refresh
3- drag to import an SVG icon from TW Icons v1.10 — A large collection of icons for TiddlyWiki into the TiddlyWiki (e.g. $:/images/bootstrap/cup-straw)
4- click a tiddler heading to set the icon, and paste the tiddler name: e.g. $:/images/bootstrap/cup-straw

image
image840×314 6.81 KB

#9

I’ve been so busy the last six months that I’m just now seeing this problem. :rofl:

The problem has been fixed in version 0.0.8!

#10

upgraded to 0.0.9 and still experiencing this issue:

image
image781×236 9.79 KB

image

1 Like
#11

This seams not to be related to this Plugin. I have the same double-vision when I make an EditorBarButton with a svg-icon.

#12

will try again with my step by step above, which started from a vanilla TiddlyWiki, as soon as I can.

#13

I repeated the experiment on TiddlyWiki.com.
Without the plugin and pasting the icon tiddler’s name in the icon field:

image

After installing the plugin (even without a save/reload in this case):

image
image665×563 14.8 KB

#14

Released the latest version 0.0.11. I believe it is completely solved this time.

2 Likes
#15

Fantastic, much appreciated!

#16

Greetings, @Sttot :slight_smile:

I hope you’re still maintaining/developing this plugin - I have fallen in love with its features (having started using Notion just a few months ago), and use it extensively in my TW.

One thing that I’d like to see implemented, however, is the ability to change the background-size property of the cover. Since there is no ‘move cover’ like in Notion, many of the covers that I’d like to use get cut off or misaligned to omit the very thing I wanted to display in the banner. If we could change the background-size property, this problem would be eliminated by being able to choose a value of ‘contain’ or ‘cover’ (depending on the image dimensions), thereby showing the entire image.

I tried to make the change myself, I looked through the css, but could find no instance of ‘background-size’ so either you are not using it, or it’s being done in some other manner that I didn’t find.

I really think this feature would greatly enhance what is already an outstanding addition to TiddlyWiki, (a plugin which I think not many people have discovered, yet!), making it even better. I hope you will consider adding it.

Thank You :slight_smile:

–The Chan Droid

#17

Thank you for using my plugin! But I’m sorry, I have no intention of maintaining the plugin these days, here’s the situation: I would like to add the features you mentioned, but then it would require rewriting the whole plugin in javascript, but I don’t have the time.

Maybe I can try it later!

#18

Well, that’s really disappointing to hear, @Sttot…

But, nevertheless, I’ll continue to use and enjoy it in its current form - Thank You so much for creating it! :slight_smile:

–The Chan Droid

#19

I hope I’m not stepping on @Sttot’s toes, here, but he has updated this great plugin and added the features that I requested back in March (and even More!)

It is now up to version 0.0.14, and works great :slight_smile:

Notion Cover
Notion Cover1920×1080 140 KB

Now, in addition to being able to choose the Page Cover, you can also

  • Set the Blur Level of the background (great for blurring the background when using smaller images that do not fill the entire cover area)
  • Set the Size value; CSS background-size (can be either cover, contain or auto, an actual size value; width x height 800px 300px or percentage 90%)
  • Set the Position of the cover; CSS background-position (can be any of the named positions: left top, right center, center bottom; percentage values: horizontal% vertical%; or pixel values: xpx ypx (read more about the different values at W3Schools)
  • Set the Repeat value: CSS background-repeat repeat or no-repeat
  • Also, you can select Local Files as your Page Cover with either relative foldername/foldername/filename.ext or absolute drive://foldername/foldername/filename.ext links. (your OS determines how file paths must be written; some require forward slashes /, some backslashes \; some require three slashes in absolute file paths drive:///foldername\filename.ext - you may have to experiment a bit to find what works for you)

Thank You so much, again, kind Sir, for this wonderful plugin that I can’t imagine living without! :slight_smile:!

#20

Very grateful for your nice plugin! Little question; how can I leverage your plugin only for tiddlers that have a certain tag? Kind Regards