|
/* |
|
Custom wikipedia-like image containers with captions, made from callouts! |
|
written by meloonics. |
|
Say hi to me on meloonics.itch.io |
|
or on bluesky: @meloonics.bsky.social |
|
or on discord: discord.gg/NEXd2MtmAW |
|
|
|
### HOW TO USE: ### |
|
* go to your vault, then inside the .obsidian/snippets folder: |
|
* either copy this snippet inside your own styles.css (create one if you don't have one) |
|
* or save it as a separate CSS-file (in that case you need to enable it in settings and also specifiy its use in the YAML-Headers of your notes |
|
|
|
### SYNTAX: ### |
|
> [!fig|METADATA]![[image-path|TOP-TEXT|size]](+ or - or nothing) BOTTOM-TEXT |
|
> BOTTOM-BOTTOM-TEXT |
|
|
|
SYNTAX EXPLAINED: |
|
> [!fig| More Metadata here, separated via pipe-char "|"] ![[ Your image path here, with extension | optional alt-text here, will be rendered as TOP-TEXT | image-dimensions ]]+ or - or nothing for folding, BOTTOM TEXT here |
|
> If you want to add even more stuff below, you can. This section can be folded and markdown will be parsed. |
|
|
|
RECENT CHANGE: If you want to omit image size, you can do that now. It will fall back to a minimum-size of 64px. |
|
HOWEVER: Now you *HAVE* to specify alt-text. If you don't wanna add a TOPTEXT, you need to paas a dash "-" like so: |
|
> [!fig|left] ![[image.png|-] |
|
This will fall back to an image with 64px width and not render a header. If you want to change the fallback-value, you just have to change the value for '--container-min-width' (line 82-ish) |
|
|
|
### EXAMPLES: ### |
|
Complicated example: |
|
|
|
> [!fig|right|snail] ![[images/snail.png|Snail Facts!|200]]- Snails are cool! Click to learn more! |
|
> - Snails r cute :3 |
|
> - They be eating leaf |
|
> - Swirly soft-boi chomkers :3333 |
|
> |
|
> Read-more [[Le Smail Manifesto|here]]! |
|
This example will appear to the right inside your text-block, contain a Top and Bottom-Text as well as expandable extra-info. |
|
This will also obviously not work, unless you don't have a file called 'snail.png' in your 'images'-folder. |
|
|
|
Simple example: |
|
> [!fig|far-left] ![[images/my_house.png|150]] I live here. |
|
This example is shown to the left OUTSIDE your text block. It's a simple image with a caption. |
|
|
|
Note that technically you don't even need to link an image, you can put whatever in the heading. However, I only tested it with images. |
|
|
|
### VALID METADATA: ### |
|
|
|
POSITIONING - NEEDS to be specified, pick only one. |
|
- left : places the container to the left INSIDE your text, the text will flow around it. |
|
- far-left : places the container to the left OUTSIDE your text. Probably breaks if you have readable lines disabled, idk. |
|
- right : right, inside text, flowing |
|
- far-right : right, outside text. |
|
|
|
STYLING - OPTIONAL, but pick only one. |
|
- snail : example for how the callouts can be customized. copypastable code-snippet below. |
|
- fire : another simple customization example |
|
|
|
OPTIONAL SETTINGS - you can pick multiple of these! |
|
- noicon : keep the colors and style overrides, but turn off the icon. Note that by default, the callout doesn't render an icon, so you only need to specify this if you want to use a custom style such as 'snail' |
|
- px : Renders your image as 'pixelated', which is useful if you're struggling with blurry-ass pixelart a lot. |
|
|
|
VALID EXAMPLES: |
|
> ![fig|right] [[image.png]] //minimum required information |
|
> ![fig|far-left|fire|noicon|px][[my_pixel_art.png|LOOK!|50]] cool pixel art! //maximum valid information |
|
> ![fig|left|noicon|px][[image.png|50]] //you can combine optional settings, but not styles or positions. |
|
|
|
INVALID EXAMPLES: |
|
> ![fig] [[image.png|50]] // This has no position specified. |
|
> ![fig|right|far-left] [[image.png|50]] // This has too many positions specified. Technically works, but weirdly. |
|
> ![fig|right|snail|fire] [[image.png|50]] //This has multiple styles specified, which will yield weird results. |
|
|
|
|
|
KNOWN ISSUES (Won't fix, figure it out yourself): |
|
- You can stack 'left/right' and 'far-left/right' boxes, but it might yield unexpected results. It works best, if you place the far-left/right box first, and then the inline one. But if you can help it, just avoid the headache by not doing it. |
|
- Since we're talking Callouts here, it probably completely ravages the live-preview. Best practise is to write your stuff and at the very end add your image-callouts. Best to use Source-view for that. |
|
- I personally don't use the icons, really, but you can expand this snippet by adding your own styles. I've provided a script-template below, that you can customize to your own needs. |
|
- These are callouts, so unfortunately you need to put it on its own line and have a full, empty line below, that might sometimes look weird in your text, but to me it's no big deal tbh. |
|
*/ |
|
|
|
/* Main block. Changes to this will affect all [!fig]-callouts. */ |
|
.callout[data-callout^="fig"] { |
|
--callout-color: 70,70,70; |
|
--callout-title-color: gray; |
|
--container-min-width: 64px; /*Fall back size-value if none is provided!*/ |
|
inline-size: min-content; |
|
|
|
display: inline-block; |
|
padding: 0; |
|
|
|
.callout-icon { |
|
position: absolute; left: 5px; top: 5px; |
|
display: none /* icons turned off by default. don't turn this on here, see snippet below! */ |
|
} |
|
.callout-content { |
|
/* Style attributes for the BOTTOM-BOTTOM-TEXT */ |
|
padding: 5px; |
|
margin: -1.5rem 0 -1rem 0; |
|
font-size: var(--font-smallest); |
|
color: gray; |
|
text-align: center; |
|
|
|
} |
|
|
|
.callout-title { |
|
/* Style attributes for the TOP-TEXT */ |
|
/* Note that you need to EXPLICITLY say that there's no alt-text by passing a dash '-' |
|
.callout-title-inner{ |
|
|
|
span:not([alt="-"])::before { |
|
content: attr(alt); |
|
font-size: var(--font-text-size); |
|
} |
|
} |
|
|
|
/* Style attributes for the BOTTOM-TEXT */ |
|
font-size: var(--font-smaller); |
|
text-align: center; |
|
margin: 5px; |
|
display: inline-flex; |
|
gap: 0; |
|
|
|
} |
|
|
|
/* Style attributes for the Folding-Chevron. Only matters if you put '+' or '-' after your callout-syntax. */ |
|
.callout-fold { |
|
position: absolute; top:6px;right:0px; |
|
} |
|
|
|
/* Style attributes for the Image you're linking */ |
|
img { |
|
border: 1px solid #333; |
|
margin-top: 2px; |
|
} |
|
|
|
/* This section automatically renders images from a certain folder as 'pixelated'. This is useful for me, since I work a lot with pixel art, but you may ignore this or customize it to your own needs. */ |
|
/* |
|
img[src*="/img/px/"]{ |
|
image-rendering: pixelated; |
|
} |
|
*/ |
|
} |
|
|
|
/* Style attributes for the right-aligned kind of block. Note, that changes to this block also affect how 'far-right' blocks are shown. */ |
|
.callout[data-callout^="fig"][data-callout-metadata*="right"]{ |
|
position: relative; |
|
float: right; |
|
margin-left: 1rem; |
|
} |
|
|
|
/* Style attributes for the far-right-aligned kind of block. */ |
|
.callout[data-callout^="fig"][data-callout-metadata*="far-right"]{ |
|
position: relative; |
|
left: 1rem; |
|
clear:none; |
|
transform: translate(100%, 0); |
|
margin-left: -100%; |
|
} |
|
|
|
/* Style attributes for the left-aligned kind of block. Note, that changes to this block also affect how 'far-left' blocks are shown. */ |
|
.callout[data-callout^="fig"][data-callout-metadata*="left"]{ |
|
position: relative; |
|
float: left; |
|
margin-right: 1rem; |
|
} |
|
|
|
/* Style attributes for the far-left-aligned kind of block. */ |
|
.callout[data-callout^="fig"][data-callout-metadata*="far-left"]{ |
|
position: relative; |
|
right: 1rem; |
|
clear:none; |
|
transform: translate(-100%, 0); |
|
margin-right: -100%; |
|
} |
|
|
|
/* THE YOUR-OWN-METADATA-ZONE */ |
|
|
|
/* |
|
Ok, as promised, here's your copypastable css-snippet for your own funny metadata and styling. To add your own, copy and paste the code in the comment below and fill in your values. |
|
You can also just delete the sections you don't wish to edit. |
|
As a reference, there's also the snail-example, if you're confused as to why your thing isn't working |
|
*/ |
|
|
|
|
|
/* use this snippet if you merely want to change color and icon of your box. |
|
.callout[data-callout^="fig"][data-callout-metadata*="MY-METADATA-NAME"]{ |
|
--callout-color: ??,??,??; |
|
--callout-icon: ???; |
|
|
|
.callout-icon { |
|
display: block; |
|
} |
|
} |
|
*/ |
|
|
|
/* use this snippet if you want to make more complex changes |
|
.callout[data-callout^="fig"][data-callout-metadata*="MY-METADATA-NAME"]{ |
|
--callout-color: ??,??,??; |
|
--callout-title-color: #??????; |
|
--callout-icon: ??? |
|
|
|
|
|
.callout-icon { |
|
display: block; |
|
} |
|
.callout-content { |
|
font-size: var(--font-smaller); |
|
color: #??????; |
|
text-align: ???; |
|
} |
|
|
|
.callout-title { |
|
.callout-title-inner{ |
|
|
|
span:not([alt$=".png"])::before { |
|
content: attr(alt); |
|
font-size: var(--font-text-size); |
|
color: #??????; |
|
} |
|
} |
|
|
|
font-size: var(--font-small); |
|
text-align: ???; |
|
|
|
} |
|
img { |
|
border: ?px solid? #??????; |
|
} |
|
} |
|
*/ |
|
|
|
/* paste your custom code here! */ |
|
/* paste your custom code here! */ |
|
/* paste your custom code here! */ |
|
/* paste your custom code here! */ |
|
/* paste your custom code here! */ |
|
|
|
/* FIRE-EXAMPLE Delete this if you don't wanna use it. */ |
|
.callout[data-callout^="fig"][data-callout-metadata*="fire"]{ |
|
--callout-color: 200,00,00; |
|
--callout-icon: flame-kindling; |
|
|
|
.callout-icon { |
|
display: block; |
|
} |
|
} |
|
|
|
|
|
/* SNAIL-EXAMPLE you can delete this if you don't wanna use it */ |
|
.callout[data-callout^="fig"][data-callout-metadata*="snail"]{ |
|
--callout-color: 80,80,00; |
|
--callout-title-color: #808000; |
|
--callout-icon: snail; /* go to https://lucide.dev to find your icon */ |
|
/* also note, that for your custom icon to apply, you need to "restart without saving" once, so obsidian loads it */ |
|
|
|
.callout-icon { |
|
display: block; /*this makes the icon appear.*/ |
|
} |
|
.callout-content { |
|
/* Style attributes for the BOTTOM-BOTTOM-TEXT */ |
|
font-size: var(--font-smaller); |
|
color: #707000; |
|
text-align: left; |
|
} |
|
|
|
.callout-title { |
|
/* As mentioned above: if TOP-TEXT causes issues on your end, just remove it... */ |
|
.callout-title-inner{ |
|
|
|
span:not([alt$=".png"])::before { |
|
content: attr(alt); |
|
font-size: var(--font-text-size); |
|
color: #808000; |
|
} |
|
} |
|
|
|
/* Style attributes for the BOTTOM-TEXT */ |
|
font-size: var(--font-small); |
|
text-align: center; |
|
|
|
} |
|
|
|
/* Style attributes for the Image you're linking */ |
|
img { |
|
border: 2px dotted #808000; |
|
} |
|
} |
|
|
|
/* PX-Metadata. Renders your pixel-art in the nice, crispy way */ |
|
.callout[data-callout^="fig"][data-callout-metadata*="px"]{ |
|
img { |
|
image-rendering: pixelated; |
|
} |
|
} |
|
|
|
/* NO-ICON override. put your custom stuff *before this*, otherwise your icons won't appear. */ |
|
.callout[data-callout^="fig"][data-callout-metadata*="noicon"]{ |
|
.callout-icon { |
|
display: none; |
|
} |
|
} |
