Improvements to image grids for many different edge cases

Author: kepano

Minimal.css

@@ -1477,6 +1477,11 @@ a[href*="obsidian://search"] {
   background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='17' height='17' class='search'><path fill='white' stroke='white' stroke-width='2' d='M42,6C23.2,6,8,21.2,8,40s15.2,34,34,34c7.4,0,14.3-2.4,19.9-6.4l26.3,26.3l5.6-5.6l-26-26.1c5.1-6,8.2-13.7,8.2-22.1 C76,21.2,60.8,6,42,6z M42,10c16.6,0,30,13.4,30,30S58.6,70,42,70S12,56.6,12,40S25.4,10,42,10z'></path></svg>");
 }
 
+.plain-external-links .external-link {
+  background-image: none;
+  padding-right: 0;
+}
+
 /* Reading Mode Lists	
 div > ol,
 div > ul {
@@ -3513,32 +3518,54 @@ body {
 .img-grid .image-embed.is-loaded img:active {
   background-color: transparent;
 }
-.img-grid .markdown-preview-section {
-  /*img:not(.emoji):not([width]),
-  video {
-  	width:100%;
-  }*/
+.img-grid .markdown-preview-section > div:has(img) p:empty,
+.img-grid .markdown-preview-section > div:has(img) img ~ br,
+.img-grid .markdown-preview-section > div:has(img) .image-embed ~ br {
+  display: none;
 }
-.img-grid .markdown-preview-section > div:has(.image-embed) > p {
+.img-grid .markdown-preview-section div:has(> .image-embed ~ .image-embed),
+.img-grid .markdown-preview-section p:has(> .image-embed ~ .image-embed),
+.img-grid .markdown-preview-section div:has(> img ~ img),
+.img-grid .markdown-preview-section p:has(> .image-embed ~ img),
+.img-grid .markdown-preview-section p:has(> img ~ .image-embed),
+.img-grid .markdown-preview-section p:has(> img ~ img) {
   display: grid;
   margin-block-start: var(--img-grid-gap);
   margin-block-end: var(--img-grid-gap);
   grid-column-gap: var(--img-grid-gap);
   grid-row-gap: 0;
   grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
 }
-.img-grid .markdown-preview-section > div:has(.image-embed) > p > br {
-  display: none;
-}
-.img-grid .markdown-preview-section > div:has(.image-embed) > p > img {
+.img-grid .markdown-preview-section div:has(> .image-embed ~ .image-embed) > img,
+.img-grid .markdown-preview-section p:has(> .image-embed ~ .image-embed) > img,
+.img-grid .markdown-preview-section div:has(> img ~ img) > img,
+.img-grid .markdown-preview-section p:has(> .image-embed ~ img) > img,
+.img-grid .markdown-preview-section p:has(> img ~ .image-embed) > img,
+.img-grid .markdown-preview-section p:has(> img ~ img) > img {
   object-fit: var(--image-grid-fit);
   align-self: stretch;
 }
-.img-grid .markdown-preview-section > div:has(.image-embed) > p > .internal-embed img {
+.img-grid .markdown-preview-section div:has(> .image-embed ~ .image-embed) > .internal-embed img,
+.img-grid .markdown-preview-section p:has(> .image-embed ~ .image-embed) > .internal-embed img,
+.img-grid .markdown-preview-section div:has(> img ~ img) > .internal-embed img,
+.img-grid .markdown-preview-section p:has(> .image-embed ~ img) > .internal-embed img,
+.img-grid .markdown-preview-section p:has(> img ~ .image-embed) > .internal-embed img,
+.img-grid .markdown-preview-section p:has(> img ~ img) > .internal-embed img {
   object-fit: var(--image-grid-fit);
   height: 100%;
   align-self: center;
 }
+.img-grid .markdown-preview-section > div:has(img) > p {
+  display: grid;
+  margin-block-start: var(--img-grid-gap);
+  margin-block-end: var(--img-grid-gap);
+  grid-column-gap: var(--img-grid-gap);
+  grid-row-gap: 0;
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+}
+.img-grid .markdown-preview-section > div:has(img) > p > br {
+  display: none;
+}
 
 /* Image zoom  */
 /* MIT License | Copyright (c) Stephan Ango (@kepano) */

manifest.json

@@ -1,6 +1,6 @@
 {
 	"name": "Minimal",
-	"version": "7.5.3",
+	"version": "7.5.4",
 	"minAppVersion": "1.5.4",
 	"author": "@kepano",
 	"authorUrl": "https://twitter.com/kepano",

src/css/main.css

@@ -6,3 +6,8 @@ a[href*="obsidian://search"] {
 .theme-dark a[href*="obsidian://search"] {
   background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='17' height='17' class='search'><path fill='white' stroke='white' stroke-width='2' d='M42,6C23.2,6,8,21.2,8,40s15.2,34,34,34c7.4,0,14.3-2.4,19.9-6.4l26.3,26.3l5.6-5.6l-26-26.1c5.1-6,8.2-13.7,8.2-22.1 C76,21.2,60.8,6,42,6z M42,10c16.6,0,30,13.4,30,30S58.6,70,42,70S12,56.6,12,40S25.4,10,42,10z'></path></svg>");
 }
+
+.plain-external-links .external-link {
+	background-image: none;
+	padding-right: 0;
+}

src/css/main.css.map

@@ -39,20 +39,25 @@ body {
 	}
 
 	.markdown-preview-section {
-		/*img:not(.emoji):not([width]),
-		video {
-			width:100%;
-		}*/
-		> div:has(.image-embed) > p {
+		> div:has(img) {
+			p:empty,
+			img ~ br,
+			.image-embed ~ br {
+				display:none;
+			}
+		}
+		div:has(>.image-embed ~ .image-embed),
+		p:has(>.image-embed ~ .image-embed),
+		div:has(>img ~ img),
+		p:has(>.image-embed ~ img),
+		p:has(>img ~ .image-embed),
+		p:has(>img ~ img) {
 			display: grid;
 			margin-block-start: var(--img-grid-gap);
 			margin-block-end: var(--img-grid-gap);
 			grid-column-gap: var(--img-grid-gap);
 			grid-row-gap: 0;
 			grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-			> br {
-				display:none;
-			}
 			> img {
 				object-fit: var(--image-grid-fit);
 				align-self: stretch;
@@ -63,5 +68,16 @@ body {
 				align-self: center;
 			}
 		}
+		> div:has(img) > p {
+			display: grid;
+			margin-block-start: var(--img-grid-gap);
+			margin-block-end: var(--img-grid-gap);
+			grid-column-gap: var(--img-grid-gap);
+			grid-row-gap: 0;
+			grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+			> br {
+				display:none;
+			}
+		}
 	}
 }