Merge pull request #5726 from WoltLab/image-center

Fix centering for images and attachments

Author: dtdesign

com.woltlab.wcf/bbcode.xml

@@ -171,7 +171,7 @@
 					<usetext>1</usetext>
 				</attribute>
 				<attribute name="1">
-					<validationpattern><![CDATA[^(left|right|none)$]]></validationpattern>
+					<validationpattern><![CDATA[^(left|right|center|none)$]]></validationpattern>
 				</attribute>
 				<attribute name="2">
 					<validationpattern><![CDATA[^(\d+|true|false)$]]></validationpattern>
@@ -190,7 +190,7 @@
 					<validationpattern><![CDATA[^(small|medium|large|original)$]]></validationpattern>
 				</attribute>
 				<attribute name="2">
-					<validationpattern><![CDATA[^(left|right|none)$]]></validationpattern>
+					<validationpattern><![CDATA[^(left|right|center|none)$]]></validationpattern>
 				</attribute>
 				<attribute name="3">
 					<validationpattern><![CDATA[^\d+$]]></validationpattern>

com.woltlab.wcf/templates/mediaBBCodeTag.tpl

@@ -1,4 +1,5 @@
 {if !$removeLinks|isset}{assign var='removeLinks' value=false}{/if}
+{if $float === 'center'}<p class="text-center">{/if}
 <span class="mediaBBCode{if $float != 'none'} messageFloatObject{$float|ucfirst}{/if}"{if $width !== 'auto'} style="width: {$width}px; display: inline-flex"{/if}>
 	{if $media->isImage}
 		{if $thumbnailSize != 'original'}
@@ -33,3 +34,4 @@
 		</span>
 	{/if}
 </span>
+{if $float === 'center'}</p>{/if}

wcfsetup/install/files/acp/templates/mediaBBCodeTag.tpl

@@ -1,4 +1,5 @@
 {if !$removeLinks|isset}{assign var='removeLinks' value=false}{/if}
+{if $float === 'center'}<p class="text-center">{/if}
 <span class="mediaBBCode{if $float != 'none'} messageFloatObject{$float|ucfirst}{/if}"{if $width !== 'auto'} style="width: {$width}px; display: inline-flex"{/if}>
 	{if $media->isImage}
 		{if $thumbnailSize != 'original'}
@@ -33,3 +34,4 @@
 		</span>
 	{/if}
 </span>
+{if $float === 'center'}</p>{/if}

wcfsetup/install/files/lib/system/bbcode/AttachmentBBCode.class.php

@@ -91,7 +91,7 @@ private function showImage(Attachment $attachment, string $outputType, array $at
         );
 
         if (!$hasParentLink && ($attachment->width > ATTACHMENT_THUMBNAIL_WIDTH || $attachment->height > ATTACHMENT_THUMBNAIL_HEIGHT)) {
-            return \sprintf(
+            $result = \sprintf(
                 <<<'HTML'
                     <a href="%s" title="%s" class="embeddedAttachmentLink jsImageViewer %s" style="width: %s">
                         %s
@@ -107,15 +107,22 @@ private function showImage(Attachment $attachment, string $outputType, array $at
                 $imageElement,
                 FontAwesomeIcon::fromValues('magnifying-glass')->toHtml(24),
             );
+        } else {
+            $result = \sprintf(
+                '<span title="%s" class="%s" style="width: %s; display: inline-flex;">%s</span>',
+                $title,
+                $class,
+                $width,
+                $imageElement,
+            );
         }
-
-        return \sprintf(
-            '<span title="%s" class="%s" style="width: %s; display: inline-flex;">%s</span>',
-            $title,
-            $class,
-            $width,
-            $imageElement,
-        );
+        if ($alignment === 'center') {
+            return \sprintf(
+                '<p class="text-center">%s</p>',
+                $result,
+            );
+        }
+        return $result;
     }
 
     private function showImageAsThumbnail(Attachment $attachment, string $alignment, bool $hasParentLink, string $width): string
@@ -156,7 +163,7 @@ private function showImageAsThumbnail(Attachment $attachment, string $alignment,
         );
 
         if (!$hasParentLink && $attachment->hasThumbnail() && $attachment->canDownload()) {
-            return \sprintf(
+            $result = \sprintf(
                 '<a href="%s" title="%s" class="embeddedAttachmentLink jsImageViewer %s" style="width: %s">%s%s</a>',
                 StringUtil::encodeHTML(LinkHandler::getInstance()->getLink('Attachment', ['object' => $attachment])),
                 StringUtil::encodeHTML($attachment->filename),
@@ -165,15 +172,23 @@ private function showImageAsThumbnail(Attachment $attachment, string $alignment,
                 $imageElement,
                 $enlargeImageControls,
             );
+        } else {
+            $result = \sprintf(
+                '<span class="%s" style="width: %s; display: inline-flex">%s%s</span>',
+                $class,
+                $width,
+                $imageElement,
+                \str_contains($imageClasses, 'embeddedAttachmentLink') ? $enlargeImageControls : '',
+            );
+        }
+        if ($alignment === 'center') {
+            return \sprintf(
+                '<p class="text-center">%s</p>',
+                $result,
+            );
         }
 
-        return \sprintf(
-            '<span class="%s" style="width: %s; display: inline-flex">%s%s</span>',
-            $class,
-            $width,
-            $imageElement,
-            \str_contains($imageClasses, 'embeddedAttachmentLink') ? $enlargeImageControls : '',
-        );
+        return $result;
     }
 
     /**

wcfsetup/install/files/lib/system/html/input/node/HtmlInputNodeImg.class.php

@@ -119,6 +119,8 @@ protected function handleAttachment(\DOMElement $element, $class)
         if ($parent->tagName === "figure") {
             if (\preg_match('~\b(?<float>image-style-side-left|image-style-side)\b~', $parent->getAttribute('class'), $matches)) {
                 $float = ($matches['float'] === 'image-style-side-left') ? 'left' : 'right';
+            } else {
+                $float = 'center';
             }
 
             $replaceElement = $parent;
@@ -185,6 +187,8 @@ protected function handleMedium(\DOMElement $element, $class)
         if ($parent->tagName === "figure") {
             if (\preg_match('~\b(?<float>image-style-side-left|image-style-side)\b~', $parent->getAttribute('class'), $matches)) {
                 $float = ($matches['float'] === 'image-style-side-left') ? 'left' : 'right';
+            } else {
+                $float = 'center';
             }
 
             $replaceElement = $parent;