Added settings to turn off special image handling

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "yesterday",
 	"name": "Yesterday",
-	"version": "1.0.9",
+	"version": "1.0.10",
 	"minAppVersion": "0.12.0",
 	"description": "Transform your notes into a visually stunning diary, integrating dialogs, chat logs, and media content blocks for a seamless journaling experience.",
 	"author": "Dominik Mayer",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-yesterday",
-	"version": "1.0.9",
+	"version": "1.0.10",
 	"description": "Plugin that provides Yesterday journaling support to Obsidian",
 	"main": "main.js",
 	"scripts": {

src/main.ts

@@ -7,12 +7,16 @@ interface YesterdaySettings {
 	colorMarkdownFiles: boolean;
 	hideMediaFiles: boolean;
 	showTodoCount: boolean;
+	showMediaGrid: boolean;
+	maximizeMedia: boolean;
 }
 
 const DEFAULT_SETTINGS: YesterdaySettings = {
 	colorMarkdownFiles: true,
 	hideMediaFiles: false,
-	showTodoCount: false
+	showTodoCount: false,
+	showMediaGrid: true,
+	maximizeMedia: true
 }
 
 let todoCount = 0;
@@ -65,7 +69,11 @@ export default class Yesterday extends Plugin {
 			this.registerDomEvent(document, 'click', (event: MouseEvent) => {
 				let target = event.target as HTMLElement;
 
-				if (target.tagName === 'IMG' && target.closest('.media-embed')) {
+				if (
+					target.tagName === 'IMG' && 
+					target.closest('.media-embed') && 
+					this.settings.maximizeMedia
+				) {
 					let imgSrc = (target as HTMLImageElement).src;
 					new ImageModal(this.app, imgSrc).open();
 				}
@@ -308,11 +316,11 @@ export default class Yesterday extends Plugin {
 
 	async loadSettings() {
 		this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
-		this.setMediaClasses();
+		this.setHideMediaClasses();
 		this.setColorClasses();
 	}
 
-	setMediaClasses() {
+	setHideMediaClasses() {
 		if (this.settings.hideMediaFiles) {
 			document.body.classList.add('hide-media-files');
 		} else {
@@ -328,6 +336,14 @@ export default class Yesterday extends Plugin {
 		}
 	}
 
+	setGridClasses() {
+		if (this.settings.showMediaGrid) {
+			document.body.classList.add('enable-media-grid');
+		} else {
+			document.body.classList.remove('enable-media-grid');
+		}
+	}
+
 	async saveSettings() {
 		await this.saveData(this.settings);
 	}
@@ -418,7 +434,7 @@ class YesterdaySettingTab extends PluginSettingTab {
 				.onChange(async (value) => {
 					this.plugin.settings.hideMediaFiles = value;
 					await this.plugin.saveSettings();
-					this.plugin.setMediaClasses();
+					this.plugin.setHideMediaClasses();
 				}));
 
 		new Setting(containerEl)
@@ -431,5 +447,31 @@ class YesterdaySettingTab extends PluginSettingTab {
 					await this.plugin.saveSettings();
 					this.plugin.setStatusBar();
 				}));
+
+		containerEl.createEl('br');
+		const mediaSection = containerEl.createEl('div', {cls: 'setting-item setting-item-heading'});
+		const mediaSectionInfo =  mediaSection.createEl('div', {cls: 'setting-item-info'});
+		mediaSectionInfo.createEl('div', {text: 'Media', cls: 'setting-item-name'});
+
+		new Setting(containerEl)
+			.setName('Show media files in a grid')
+			.setDesc('Shows media files that are not separated by a new line in a grid')
+			.addToggle(toggle => toggle
+				.setValue(this.plugin.settings.showMediaGrid)
+				.onChange(async (value) => {
+					this.plugin.settings.showMediaGrid = value;
+					await this.plugin.saveSettings();
+					this.plugin.setGridClasses();
+				}));
+
+		new Setting(containerEl)
+			.setName('Maximize image')
+			.setDesc('Lets you click on an image to maximize it (only on desktop)')
+			.addToggle(toggle => toggle
+				.setValue(this.plugin.settings.maximizeMedia)
+				.onChange(async (value) => {
+					this.plugin.settings.maximizeMedia = value;
+					await this.plugin.saveSettings();
+				}));
 	}
 }

styles.css

@@ -1,20 +1,20 @@
-.image-grid {
+.enable-media-grid .image-grid {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   margin-left: 0px !important;
 }
 
-.image-grid figure {
+.enable-media-grid .image-grid figure {
   margin: var(--size-2-1) !important;
   height: 20vw;
   position: relative;
   overflow: hidden;
   /* Removed flex-grow: 1; to stop figures from trying to fill the available space */
 }
 
-.image-grid img,
-.image-grid video {
+.enable-media-grid .image-grid img,
+.enable-media-grid .image-grid video {
   height: 20vw;
   margin: 0 var(--size-2-1) var(--size-2-1) 0;
   max-width: 100%;
@@ -23,12 +23,12 @@
   border-radius: var(--radius-xl);
 }
 
-.is-mobile:not(.is-tablet) .image-grid img,
-.is-mobile:not(.is-tablet) .image-grid video {
+.enable-media-grid .is-mobile:not(.is-tablet) .image-grid img,
+.enable-media-grid .is-mobile:not(.is-tablet) .image-grid video {
   height: 40vw;
 }
 
-.media-embed img:hover {
+.enable-media-grid .media-embed img:hover {
   opacity: 0.8;
 }