Merge pull request #125 from ar0x4/dev

perlite/.styles/perlite.css

@@ -82,14 +82,25 @@ 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;
   position: relative;
   left: 3px;
 }
 
-
 #loading-text {
   position: absolute;
   top: 8px;

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
 
 

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*)(\]\])/');