Note
This is part of the Advanced Customizations.
What to expect?
This post is a curated collection of handy tips to enhance image display while using Obsidian and Quartz. Some of these extensions are delightful contributions from the community. A big thank you to those for your fantastic input.
You’ll be able to:
- center all images
- caption images
- resize external images
- add links that points to the raw images
All the extensions here are compatible with each other.
Center the images
Simply append the follows to custom.scss. All the images in your blog will be centered by default.
/* mod: centering images */
article img {
display: block;
margin-left: auto;
margin-right: auto;
}Image captions
Image captions in Obsidian
The captioning extension is based on rehype-image-caption. It’s been implemented for Quartz in issue 1367 by @roboin. For the sake of documentation and as a example for subsequent modifications, I herein outline its implementation details.
![[files/og-image.png]]*Captions*
or
![[files/og-image.png]]
*Captions*
Captions
String
Resize external images
Link to raw images
Image viewer
![[149596129484797177.JPG]]
![[DSC_3984.jpg]]
![[DSC_4093.JPG]]
