Background image inside buttons

PippoGot commented 1 week ago

Please fill out these Check-boxes

[X] I checked for existing similar feature requests
[X] I have read the docs and checked that the feature I am requesting is not already implemented
[X] My feature request consists of only one feature

Is your Feature Request related to a Problem or Annoyance?

No response

Describe the Feature you'd like

I know I may be repetitive (since I opened an issue the other day about a similar topic for this very reason) and I apologize for that, but I'll try again one last time and do my best to explain why I would REALLY LOVE this feature.

I am currently building MOCs for a "wiki" vault about a fantasy world and to better visualize them I was thinking about decorating the various buttons that brings to different pages with images/icons. However, aside the default obsidian icons the other options are not supported.

I know custom icons won't be ever supported and I can be ok with that, however, maybe an additional button type where you can add/change a custom background image from inside the codeblock may be easier to implement (I guess?).

I will paste some images of the result I'm looking for:

image buttons

In this specific case each button opens a different MOC, but I have plans to have other buttons to do more stuff inside those MOCs (such as automatic note creation and automation) and would like to style them similarly to keep the continuity.

Alternatives

I kind of managed to obtain similar results with css, but it's a nuisance to get the size right and (maybe becasue I'm a noob at css) I can't get it to change proportionally to the page size while keeping the image inside the button. Also, a unique css style can't be obtained for multiple buttons with different images, but I'd have to make a style for each button and manually change in css the image also inputting the image size as the button size.

Another way I managed to obtain results is to simply use images embeds and use them as links to open the notes (this is the case of the image I provided), but this is not intuitive as the images don't behave as buttons (when hovering they don't look selected and the cursor doesn't change). Furthermore this alternative prevents me from adding functionality to the "buttons" since all I can do is link notes.

Additional Context

So, to sum up what I'd like to request is a new button type (or just manage it however you feel like it's most appropriate) with an additional field to set a background image (either png, jpg or svg) in a button, with maybe also a "scale" property to change the size. Something like this:

label: This is a button
background: "/path/to/local/image.png or .svg" (either background color or image or both)
image-scale: [see below (1)]
hidden: false
class: whatever
tooltip: "whatever"
id: whatever
style: image (or what you feel most suitable)
actions: [whatever]

(1) css kind of values for scaling/sizing

size array [width, height]
scale: maintain aspect ratio of original image but shrinks or zooms the image
aspect ratio: redefine an aspect ratio and set one between width and height [width, ratio] or [ratio, height]
empty: keeps the size of the background image

I'm really interested in 4th option but thought since I'm here to throw some alternatives.

Not really important to have a detailed preview if that would be a problem.

Thanks for your attention, I really hope I didn't bother you too much. Thanks for the amazing contribution to the community.

motion2082 commented 6 days ago

This would be awesome as I'm trying to make a clickable image atm but it's almost impossible to do in Obsidian

mProjectsCode commented 4 days ago

This can be done via CSS, and I might add an example to the docs.

I don't see the benefit of introducing some styling system to buttons when CSS exists. If this styling system existed users would still have to learn that system which would only apply to this specific field, meta bind buttons. They are better off spending a little more time learning CSS which is applicable all over Obsidian and web development in general.

I do see that making a separate CSS class for every button is annoying, so maybe a cssStyles property, that allows overriding of specific styles on a per-button basis, is a good addition.

motion2082 commented 4 days ago

I was trying to work out how to override the button CSS (Primary, Default, Destructive, Plain) for the button but didn't seem to work with a custom css Snippet.

I would be happy for an update of the Meta Bind Documentation to explain CSS modifications is a little more detail :)

PippoGot commented 4 days ago

@mProjectsCode So if I'm understanding correctly, you are proposing to add a property to the button (or to any metabind) codeblock called something like "cssStyles" to add custom snippets to the specific element?

I would be ok with creating a specific style for each button (1 for each image), however, as I pointed out, my main issue is actually the sizing of the button. I can successfully add a bg image with CSS, BUT i have to hardcode the size of the button based on the image, and this prevents me to make dynamically sizble buttons based on the page size.

The solution i was thinking (and also the majority of solutions i found with CSS online), is to add an \<img> element inside the HTML structure since none is generated with the plain text button. This way the size of the image can be obtained via css and adjusted dynamically.

EDIT: Also, referencing media files stored inside the vault in the CSS snippets is a fuss and I would have to convert them to data, that is why I proposed a solution involving properties inside the codeblock.

PippoGot commented 4 days ago

@motion2082 To give you a solution to what you are trying to achieve, in the image I provided, I used embeds of images and gave them a link. Opening notes however is the only functionality you could add like this. Not a proper button functionality, but if you only need to open notes using a styled "button" this should work fine. I'll provide some code:

[![[image.png]]](note.md) to open a note using the embed
[![[image.svg]]](obsidian-path-to-canvas-or-any-file) to open canvases, kanbans or anything I think (only tried with canvas)

As you can see it works with both svg and png/jpg. You can also add the pipe operator aside of the media name and scale the image if you need.

motion2082 commented 3 days ago

Thanks PippoGot, for some reason that doesn' work for me

Example [![[be-unstoppable-alden-mills-book-cover.jpg|150]]](Be Unstoppable - Alden Mills.md) error

Just shows with a Magnify Glass and no link to File

motion2082 commented 3 days ago

The URi works though

[![[be-unstoppable-alden-mills-book-cover.jpg|150]]](obsidian://open?vault=Obsidian&file=%2B%20Personal%20Development%2F01%20Authors%2FAlden%20Mills%2FBe%20Unstoppable%20-%20Alden%20Mills)

Unfortunately though you can't add this to a YAML property and display it on a Dataview Table

mProjectsCode / obsidian-meta-bind-plugin