Pretty properties

[reaty]

I want to announce my new plugin — Pretty properties. I have started it as a way to easily add cover images to my book notes, but it quickly become much more! It is not officially approved yet, so it have to be installed via BRAT.

Plugin features

1. Add cover image to the side of metadata block.

This is something I wanted to do for a long time, because adding image to the note after metadata wasted too much space. And now they can sit neatly together.

It is especially useful for books, movies and other notes that need a cover and a lot of metadata.

2. Add banner and icon to the note.

There are other plugins that can do that, but I was somehow unsatisfied with them, so decided to make my own version.

3. Colorful list properties.

You can right-click on a property value to select one of the theme colors.

I thought about adding a color picker to choose custom colors, but decided against this, because custom colors are hard to adjust to fit the theme. So you have only 8 colors + transparent + theme default.

4. Progress bars inside the metadata block.

I used to insert progress bar to my notes using Dataview, but now they can be added directly to the number properties. It looks neat and do not require to put any code into the note itself. It also works very well with the next feature.

5. Save tasks count to the properties.

The plugins can count tasks inside the active note (all tasks, completed and uncompleted) and save the counts into the specified number properties.

Combined with the progress bar feature, it can let you visualize your note task progress. Also it allows you to see the tasks count in bases, because bases for now can not reach tasks directly.

6. Properties search.

I always wanted to be able to search for specific property values as easily, as I can do with tags. Now I can Ctrl+click on any property value, and it will be shown in search tab, the same way as when clicking on tag.

7. Hiding specific properties

Click on the property icon and select “Hide property” in menu. If you want to see it again, run command “Toggle reveal / hide all hidden properties”.

More about

Plugin now has support for bases, but it is experimental, because bases are still in beta, and the code will probably change in the future. You can see and edit colorful properties in bases. You can also make progress bars in bases, but it is a little more tricky.

In general I try to make this plugin as minimal and unintrusive as possible. There is a lot of features now, but most of them can be turned off and then will not get in the way.

For now I think I am satisfied with what this plugin can do, but let me know if you think some other features can be added!

[reaty]

And here are some actual screenshots from my vault!

A book note:

Base — books in progress:

Base — book statuses:

Food recipe:

Base — recipies:

[reaty]

I added more features to the plugin!

Custom date format

A lot of people complain about date properties only being able to display date in specific format tied to the locale. Now this is something that is very hard to change because of how date input fields work. This plugin uses a workaround by hiding existing input text and showing the different text element instead. For the most part it works fine, but I’m afraid hiding the old date text may not work well on all devices, so let me know if you expirience any issues.

Dates colors

Date properties now may have special colors based on if the date is in the past, present or future. If you don’t like the colored background, you can write your own css to style this relative dates using the attributes assigned to each date property.

Long text colors

Text properties now can be colored too. Right-click menu do not work with them very well, so instead they have a color button that is revealed on hover.

Circle progress in bases

Someone in Discord gave me the idea to use circle progresses instead of progress bars, because it can save space in the base. It only works in bases table, cards view wil show progress bars instead.

More custom colors

In general this plugin use the theme colors for coloring properties. I prefer this, because this way it’s easier to make any color look well with the existing theme. But if you think you need more colors, now there is also an option to use color pickers instead, to choose any color you want. For now color pickers are only availible in the plugin settings.

There are also some other small changes and improvements, like new color shapes options and banner position slider. Read the description on Github to learn more!

[reaty]

I forgot to write it here, but recently I added a couple of new big features to the plugin.

Colored inline tags

Before you could only add colors to the tags in properties, but now these colors can be also applied to the tags inside the note text. It is optional feature, that can be disabled separately.

What makes this feature better then simply styling tags with css it that the tags with non-latin symbols are also supported in live preview. You could not style them in vanilla Obsidian, which always frustrated me, because I want to be able to use cyrillic tags.

TaskNotes support

I love TaskNotes plugin, it completely changed how I manage my tasks so naturally the task count feature should be expanded to support TaskNotes tasks. You can select if you want to count inline tasks, project tasks, checkbox tasks or all at once.

Also I want to note that it was very easy to inplement, because the TaskNotes plugin has a great API.

[mycasid]

hey, this is really neat! thanks for developing it.

if this supported MathJax (it doesn’t seem this feature request is getting much traction…) then it would be an instant download for me! obviously, that’s up to you, but i thought it might not be too difficult given the infrastructure you’ve built.

actually, maybe i’ll take a look at your source code and see if i can figure it out myself…

[reaty]

I’m a bit confused - what has MathJax to do with properties?

Anyway it would probably require to add some external library to the plugin, and I am not planning to do this.

[mycasid]

for instance, rendering math inside a Base.

why would it require an external library? MathJax comes with Obsidian.

[reaty]

Ah, I see. I don’t know much about MathJax.

I would probably wait untill bases api comes out to see if it is possible. Right now rendering additional stuff in bases slows them down a lot.

[reaty]

Actually I looked into this and it doesn’t seem too hard to implement, but I am afraid about the performance.

[mycasid]

no worries, of course not everyone is writing math in Obsidian all the time

MathJax is what’s used to render things inside $...$ and it’s typically pretty fast, but yeah for large bases or expressions it could slow things down. i’m very inexperienced in writing TS/JS but i may have a go at seeing how you are rendering things in Bases to try it out.

[reaty]

It is actually not very nice way to render stuff, lol. I am using the mutation observer, and it is pretty painful to work with. But there is no way around it, because thing are updating all the time, and Obsidian does not fire events for every change.

After thinking a little bit I think I can try to add MathJax the same way I am adding progress, with the specific formula name. Don’t you ming sharing a couple of formulas I can use for testing?

[mycasid]

sure, what kinds of examples do you need? if just some random equation, try maybe try e^x = \sum_{n = 0}^{\infty} \frac{x^n}{n!} which should render as

there is a difference between how this equation is rendered in $...$ and $$...$$, what i gave is the latter (known as displaystyle as opposed to inline). i think this is preferable here.

[reaty]

Okay, I think I got it working. Though this tall version of a formula does not fit well in narrow table row, inline version looks better.

[mycasid]

amazing! i’d love to be able to try it out.

makes sense that inline looks better with narrow rows, since Bases don’t automatically adjust row height.

[reaty]

BTW how do you want to add expressions to the base? Just write it to the property or make some calculations with the base formula?
The later can be a bit trickier, because you need to escape backslashes and such.

[mycasid]

just from the property would be enough for the bases that i’ve been working on. though the ability to use formula would also be nice (even if it requires escaping characters).

in formulas would non-Latin characters need any special handling? i use greek letters frequently, but MathJax handles many Unicode characters natively (essentially).

[reaty]

I don’t think so. All the rendering is done by Obsidian, we just need to make bases to show the actual string correctly, because the plugin will get it by parsing HTML.

[hasanyilmaz]

That plugin is what I need for properties. Especially for the properties in Bases.

• Properties are really pretty now with colors.
• Auto task counting in a file and progress bar gave me great visualization in project files which have many tasks inside.
• Adding a second color selection for fonts can be great. Contrast is generally good, but sometimes it’s hard to read. Especially colored inline links.
• If I colored a link property value, I can not understand it is a link or not. After coloring, an underline or something would be helpful.
• Property adding process can be improved. If I click on any property or tag adding box, it can show all available properties and tags. That feature is missing now, can be very helpful.
• I like that the covers are ok with links.
• Banners and icons, these may be better with rules. For example, if a file has “Type: Book” property, then it has a library banner for all Book Type files. Like Iconic rulebook.
• Tag coloring is interesting. Colored Tags Wrangler is not working in properties, this plugin is not working in file tags. Good combo.

These are my first impressions after using the plugin for a few days. I like Notion-style properties, lastly its in Obsidian. Thank you for the plugin.

[reaty]

@hasanyilmaz

Tag coloring is interesting. Colored Tags Wrangler is not working in properties, this plugin is not working in file tags.

This plugin actually does work with file tags now, you just need to enable it in the settings.

[hasanyilmaz]

Ahhaaa, I missed that toggle. That’s great. I only use tags with Tasks. Look like I can disable Colored Tags Wrangler for now. Thx.
Font color selection can make it prettier.