/* === README ===
Snippet: MCL Gallery Cards / Author: Faiz Khuzaimah / twitter: @faizkhuzaimah / github: https://github.com/efemkay
Version 0.8.0 (updated 2022-11-28)
- adjustment for SNW plugin indicators in image gallery. Option to hide (default) or show.
- fix gap between the images in image gallery (especially the vertical vs horizontal gap)
Version 0.6.2 (updated 2022-10-22)
- rollover main branch to support Obsidian 1.0.0
Version 0.5.0 (updated 2022-09-17)
- added mermaid scale and zoom feature. FR #19 on GH.
version 0.3.1 (2022-06-26)
- fix table mis-formatting
- completed callout and paragraph-based image gallery
- added dimension control for images in lists
This snippet is part of MCL collection of snippets for customising layout, and it provides the following
- "gallery" callout-metadata i.e. [!<any-callout>|gallery] for flex/grid layout
- use together with MCL Multi Column [!blank-container] for invisible container
- YAML `cssClass: image-gallery` to achieve similar to callout but using only Contextual Typography plugin & <p>
- Image Zoom via css
- Dimension control for images in lists <ul>
Credits to @kepano Minimal Theme and @SlRvb ITS Theme for inspiration
*/
/* === Master Setting === */
/* set the defaults */
body{
--img-border-radius: 15px;
--img-max-height: 300px;
--img-max-width: 350px;
--img-max-height-list: 270px;
--img-max-width-list: 300px;
--callout-gallery-gap: 5px;
--gallery-snw-display: none;
}
img {border-radius: var(--img-border-radius);}
img[alt*="right"] {float: right; margin-left: 0.5em; }
/* === Image Gallery using <p> and Callout === */
/* Editing and Reading View - Gallery using <p> and Callout. Using <p> (in Reading View) to contain and format as gallery view using metadata="gallery" to contain and format as gallery view */
/* Create display: flex and key adjustment on margin and gap */
.image-gallery div[data-embed-type="image"] > p,
div[data-callout-metadata*="gallery"].callout > .callout-content > p
{ display: flex; gap: var(--callout-gallery-gap); margin-top: calc( var(--callout-gallery-gap) ); margin-bottom: 0; }
.image-gallery div[data-embed-type="image"].el-embed-image.el-p { margin-top: var(--callout-gallery-gap); }
div[data-callout-metadata*="gallery"].callout > .callout-content { --callout-content-padding: 0.5rem 0 0 0; }
/* Introduce subtle border and make the gallery as object-fit: cover */
.image-gallery div[data-embed-type="image"] > p img,
div[data-callout-metadata*="gallery"].callout > .callout-content > p img
{ max-height: var(--img-max-height); border: 1px solid var(--background-modifier-border); object-fit: cover; display: block;}
/* display: block for img is important to control the hidden margin-bottom but for Minimal, it uses display: flex for top level divs which pose another "margin" issues no plan to solve yet as this is not critical */
/* Editing View - as alternate to <p> in Reading View since there's no natural container in Editing View using <p> */
.image-gallery div:not(.cm-callout):not(.HyperMD-list-line).image-embed img
{ max-height: calc(var(--img-max-height)/1.5); display: unset; object-fit: cover; margin-right: var(--callout-gallery-gap); }
/* previously i have max-width: 50% */
/* Special Adjustment for Shimmering Focus. Reading View. Overriding max-width */
body:not(.is-mobile) .app-container.app-container .image-gallery p img[src],
body:not(.is-mobile) .app-container.app-container div[data-callout-metadata*="gallery"].callout img[src]
{ max-width: 100%; width: unset; margin-block: unset;}
/* Special Adjustment for Minimal theme. Left margin. Editing Live Preview. */
.markdown-source-view.mod-cm6.is-readable-line-width .internal-embed
{ margin-left: 0 !important; width: unset;}
/* Special Adjustment for Minimal theme. Override width: 100% */
.full-width-media .image-gallery .image-embed img:not(.emoji):not([width]) { width: unset; }
/* Special Adjustment - for SNW plugin */
.image-gallery div[data-embed-type="image"] > p .snw-embed-preview,
.image-gallery .internal-embed.image-embed ~ .snw-reference.snw-embed,
div[data-callout-metadata*="gallery"].callout > .callout-content > p .snw-embed-preview
{ display: var(--gallery-snw-display); width: min-content; height: min-content; }
div[data-callout-metadata*="gallery"].callout > .callout-content > p .internal-embed.image-embed ~ br {display: none;}
/* === Images in Lists === */
/* limit the width when in a list (ul only) */
body:not(.list-image-control-off) :is(.HyperMD-list-line,ul) .image-embed.image-embed img:not([width])
{ max-height: var(--img-max-height-list); max-width: var(--img-max-width-list); margin-inline: 0; display: unset; object-fit: cover; }
/* clamping max width to viewport when in mobile. possibly can adopt for desktop as well */
body.is-mobile:not(.list-image-control-off) :is(.HyperMD-list-line,ul) .image-embed.image-embed img:not([width])
{ max-width: clamp(calc(var(--img-max-width-list)/2), var(--img-max-width-list), 100%);}
/*
div:not(.cm-callout).image-embed img { max-height: 200px; max-width: 300px; height: 200px; object-fit: cover;}
*/
/* === Image Zoom === */
/* must check "Enable Image Zoom via CSS" via Style Settings */
/* set scale to 100% for images */
.image-zoom .view-content :is(.cm-editor, .markdown-preview-view) img { max-width: 100%; cursor: zoom-in; }
/* css zoom for images */
body.image-zoom:not(.is-mobile) .view-content :is(.cm-editor,.markdown-preview-view) img:active,
body.image-zoom:not(.is-mobile) .view-content .image-embed:active,
.image-zoom :is(.HyperMD-list-line,ul) .image-embed.image-embed img:active {
cursor: zoom-out; display: block; background: rgba(0,0,0,0.5);
max-height: calc(100% + 1px); max-width: calc(100% - 20px); height: calc(100% + 1px); width: 100%;
object-fit: contain; margin: -0.5px auto 0; padding: 0; text-align: center;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
}
/* === Mermaid SVG max-width 100% and zoom on click === */
/* for Mermaid SVG zoom, must check "Enable Mermaid Zoom via CSS" via Style Settings */
/* set scale to 100% for mermaid diagram */
body:not(.mermaid-scale-off) .view-content :is(.cm-editor, .markdown-preview-view) .mermaid svg { max-width: 100%; height: 100%}
.mermaid-zoom .view-content :is(.markdown-preview-view) .mermaid svg { cursor: zoom-in; }
/* css zoom for mermaid diagram */
body.mermaid-zoom:not(.is-mobile) .view-content :is(.cm-edito,.markdown-preview-view) .mermaid svg:active {
cursor: zoom-out; display: block; object-fit:contain; margin: -0.5px auto 0; padding: 0;
max-height: calc(100% + 1px); max-width: calc(100% - 20px); height: calc(100% + 1px); width: 100%;
text-align: center; z-index: 100; position: fixed; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8);
}
/* === ALPHA VERSION table-card === */
/* setting the borders */
.table-card table > tbody > tr,
.table-card.markdown-source-view.mod-cm6 .dataview.table-view-table .table-view-tbody tr {border: 1px solid black; border-radius: 0.5em;}
.table-card.markdown-source-view.mod-cm6 .dataview.table-view-table .table-view-tbody td {border-right: unset;}
:is(.theme-light, .theme-dark) .table-card table,
.table-card:is(*,.is-live-preview.is-live-preview) table :is(td,tr) {background-color: unset;}
.table-card .dataview.table-view-table.dataview.table-view-table {border: unset;} /* for primary */
.table-card table tbody { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 0.5em; clear: both;}
.table-card table > tbody > tr {display: flex; flex-direction: column; padding-inline: 0.5em;}
.table-card:is(*,.is-live-preview) table.table-view-table > tbody > tr > td:not(:first-child) {border-top: 1px solid gray; }
.table-card table.table-view-table > tbody > tr {margin: unset;}
/* thead adjustment */
/* table > thead {display: flex; } */
.table-card table > thead {float: right;}
.table-card table.table-view-table > thead > tr {margin: unset;}
.table-card table.table-view-table > thead > tr > th {border: unset;}
.table-card .dataview.table-view-table.dataview.table-view-table :is(thead, th) {padding-block: unset;}
/* === ALPHA VERSION testing Timeline in lists === */
/*
.tag-mcltimeline > ul > li > *:not(ul) { text-align: center; align-self: baseline; }
.tag-mcltimeline > ul > li {
display: grid;
grid-template-columns: 0 3fr 7fr;
grid-template-rows: auto;
grid-template-areas:
"indicator timeline details"
"indicator . details";
grid-column-gap: 1em;
}
.tag-mcltimeline > ul > li > ul { grid-area: details; text-align: left; }
.tag-mcltimeline > ul > li > .collapse-indicator { grid-area: indicator; }
.tag-mcltimeline > ul ul { margin-left: 0.5em; }
*/
/* @settings
name: Modular CSS Layout - Gallery Cards
id: modular-css-layout-gc
settings:
-
id: gc-general-title
title: General Image Settings
type: heading
level: 2
collapsed: true
-
id: image-zoom
title: Enable Image Zoom via CSS
type: class-toggle
-
id: img-border-radius
title: Image Border Radius (any unit, no space)
type: variable-text
default: 15px
-
id: gc-callout-title
title: Image Gallery Settings
description: For image gallery using `gallery` callout-metadata and `image-gallery` YAML
type: heading
level: 2
collapsed: true
-
id: gallery-snw-display
title: Hide Strange New World Indicators in Image Gallery
type: variable-select
default: none
options:
-
label: Show
value: inline-block
-
label: Hide
value: none
-
id: callout-gallery-gap
title: Gallery Callout Gap (any unit, no space)
type: variable-text
default: 5px
-
id: img-max-height
title: Max Height for Images (any unit, no space)
type: variable-text
default: 300px
-
id: img-max-width
title: Max Width for Images (any unit, no space)
type: variable-text
default: 350px
-
id: gc-list-title
title: Image in List Settings
type: heading
level: 2
collapsed: true
-
id: list-image-control-off
title: Disable Control for Image in List
description: Disabling will revert image dimension to Obsidian default behaviour
type: class-toggle
-
id: img-max-height-list
title: Max Height for Images (any unit, no space)
type: variable-text
default: 270px
-
id: img-max-width-list
title: Max Width for Images (any unit, no space)
type: variable-text
default: 300px
-
id: gc-mermaid-title
title: Mermaid SVG Settings
type: heading
level: 2
collapsed: true
-
id: mermaid-scale-off
title: Disable scaling for Mermaid diagram
description: Disabling will revert Mermaid diagram dimension to Obsidian default behaviour
type: class-toggle
-
id: mermaid-zoom
title: Enable Image Zoom via CSS
type: class-toggle
*/