Product Card

[_hzw]

Things I have tried

Hello,

I’d like to insert a “product” card for books, movies, etc in a note so that the metadata can be presented in a fancier manner. Something like this:

and it’s done by a snippet of hard-coded HTML with inline css:

<div style="overflow: auto;">
<div style="margin: 1em;box-sizing: border-box;border-radius: 2px;display: flex;flex-flow: row nowrap;justify-content: space-between; border: 2px solid">
	<div style="flex-basis:45%; display: flex; width: 100%; height: 100%; max-height:250px; float: left; background: #c7c7c7; margin: auto  0 auto 0; padding: 0.25em; justify-content: center;" >
		<img style="object-fit: contain;" alt="How to Take Smart Notes (2017)" src="https://iili.io/0OXJqX.jpg">
	</div>
	<div style="flex-basis: 65%;padding: 1em 10px 1em 20px;box-sizing: border-box; background: rgba(var(--rgb-primary), 0.1);">
		<h3>How to Take Smart Notes (2017)</h3>
		<div>Author: Sönke Ahrens</div>
		<div>ISBN：9781542866507</div>
		<div>Read on: Kindle Oasis</div>
		<div>Time: 20220212-</div>
</div>
</div>
</div>

What I’m trying to do

It looks fine but I am not quite happy with the current approach, as it can’t handle:

1. blacklinks within html tags
2. css is inline, so there’s no media queries.
3. image (e.g. book cover) has to be hosted somewhere online

I’d like to know if there’s a better way to do this.

Thanks!

[_hzw]

I just solved the first issue by searching within the forum. One can use class="internal-link" within the <a> tag to make it into a back link.:

<a href="log/author/Sönke Ahrens.md" class="internal-link">Sönke Ahrens</a>

I am still looking for a way to solve issue 3. I also know that one can hard-code the path to the image file, such as:

<img style="object-fit: contain;" alt="How to Take Smart Notes (2017)" src="file:///Users/username/Library/Mobile Documents/iCloud~md~obsidian/Documents/HAKO/img/how-to-take-smart-notes.jpg">

but it doesn’t work with publish…

[efemkay]

@_hzw i think using custom css class by including cssClass in yaml is cleaner. for example, see my sample note below (using your initial example). i’m a bit of list-nerd as table is not that great in markdown

for item 3, perhaps you could use the many image uploader plugin, the one i’m familiar is imgur (link pasted below).

GitHub - gavvvr/obsidian-imgur-plugin: Pastes images right to imgur.com

---

here’s example md file with cssClass

---
cssClass: mycards
---

- ## How to Take Smart Notes (2017)
	- ![](https://iili.io/0OXJqX.jpg)
		- #### Title: How to Take Smart Notes (2017)
		- Author: Sönke Ahrens
		- ISBN：9781542866507
		- Read on: Kindle Oasis
		- Time: 20220212

then i have this css loaded as snippet (see snippet help here). this is a bit of hacky way of doing things (my css not extensive)

.mycards h2 {
	display: none;
}
.mycards ul > li > ul:not(ul > li > ul > li > ul) {
	padding: 0.5rem 0 0.8rem 2.3rem;
	border: 1px solid white;
	border-radius: 0.5rem;
}
.mycards h2 + ul > li {
	display: flex;
}
.mycards h2 + ul > li > ul {
	list-style: none;
	padding-left: 0;
}
.mycards img {
	height: 150px;
	padding-right: 1.5rem;
}

the end output becomes like this… (still sort of unfinished, but should showcase the possibility)