From 51e3e4f519ade7a98b43af8e428b2960e4a7367d Mon Sep 17 00:00:00 2001
From: ar0x4 <reisi@ar0x.com>
Date: Tue, 28 May 2024 02:21:53 +0200
Subject: [PATCH] Added parsing support for 'center' and 'right' alignment
 directives in Markdown

---
 perlite/.styles/perlite.css           | 13 ++++++++++++-
 perlite/Demo/Demo Documents/Images.md |  8 ++++++++
 perlite/content.php                   | 15 +++++++++++++++
 3 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/perlite/.styles/perlite.css b/perlite/.styles/perlite.css
index e0eb2d60..0293e2e9 100644
--- a/perlite/.styles/perlite.css
+++ b/perlite/.styles/perlite.css
@@ -82,6 +82,18 @@ img {
   max-width: 100%;
 }
 
+.images.center {
+  display: block !important;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.images.right {
+  display: block !important;
+  margin-left: auto;
+  margin-right: 0;
+}
+
 .popup-icon {
   padding-bottom: 1px;
   top: -6px;
@@ -89,7 +101,6 @@ img {
   left: 3px;
 }
 
-
 #loading-text {
   position: absolute;
   top: 8px;
diff --git a/perlite/Demo/Demo Documents/Images.md b/perlite/Demo/Demo Documents/Images.md
index 2678a88e..8449fbac 100644
--- a/perlite/Demo/Demo Documents/Images.md	
+++ b/perlite/Demo/Demo Documents/Images.md	
@@ -10,6 +10,14 @@ Image with a alternate text and size
 
 ![[background.png|This is a description|100]]
 
+Centered image
+
+![[background.png|center]]
+
+Right aligned image with a custom size
+
+![[background.png|right|200]]
+
 ## External images
 
 
diff --git a/perlite/content.php b/perlite/content.php
index dc5c78ec..a2c632b3 100644
--- a/perlite/content.php
+++ b/perlite/content.php
@@ -142,6 +142,21 @@ function parseContent($requestFile)
 	$pattern = array('/(\!?\[\[)(.*?)(.png|.jpg|.jpeg|.svg|.gif|.bmp|.tif|.tiff)\|?(\d*)x?(\d*)(\]\])/');
 	$content = preg_replace($pattern, $replaces, $content);
 
+	// centerise or right align images with "center"/"right" directive
+	$pattern = '/(\!?\[\[)(.*?)(.png|.jpg|.jpeg|.svg|.gif|.bmp|.tif|.tiff)\|?(center|right)\|?(\d*)x?(\d*)(\]\])/';
+	$replaces = function ($matches) use ($path) {
+		$class = "images";  // Default class for all images
+		if (strpos($matches[4], 'center') !== false) {
+			$class .= " center";  // Add 'center' class
+		} elseif (strpos($matches[4], 'right') !== false) {
+			$class .= " right";  // Add 'right' class
+		}
+		$width = $matches[5] ?? 'auto';
+		$height = $matches[6] ?? 'auto';
+		return '<p><a href="#" class="pop"><img class="' . $class . '" src="' . $path . '/' . $matches[2] . $matches[3] . '" width="' . $width . '" height="' . $height . '"/></a></p>';
+	};
+	$content = preg_replace_callback($pattern, $replaces, $content);
+
 	// img links with captions and size
 	$replaces = '<p><a href="#" class="pop"><img class="images" width="\\5" height="\\6" alt="\\4" src="' . $path . '/\\2\\3' . '"/></a></p>';
 	$pattern = array('/(\!?\[\[)(.*?)(.png|.jpg|.jpeg|.svg|.gif|.bmp|.tif|.tiff)\|?(.+\|)\|?(\d*)x?(\d*)(\]\])/');