Fix image(attachment and media) width change from editor (#5725)

* Read and write image and media width

* Insert media width in acp template

diff --git a/com.woltlab.wcf/bbcode.xml b/com.woltlab.wcf/bbcode.xml
index 5f84ea27a5f5273876e3c55f655bbc93015ab496..58d1c19bd63b8e089584f7de661df270beb4a50a 100644 (file)
--- a/com.woltlab.wcf/bbcode.xml
+++ b/com.woltlab.wcf/bbcode.xml
@@ -192,6 +192,9 @@
                                <attribute name="2">
                                        <validationpattern><![CDATA[^(left|right|none)$]]></validationpattern>
                                </attribute>
+                               <attribute name="3">
+                                       <validationpattern><![CDATA[^\d+$]]></validationpattern>
+                               </attribute>
                        </attributes>
                </bbcode>
                <bbcode name="wsp">

diff --git a/com.woltlab.wcf/templates/mediaBBCodeTag.tpl b/com.woltlab.wcf/templates/mediaBBCodeTag.tpl
index 848f068fe0b688560b44e8e32187a01527dc22ac..cb55423f3c11d66a3b1f469e1deaca6b1981a9eb 100644 (file)
--- a/com.woltlab.wcf/templates/mediaBBCodeTag.tpl
+++ b/com.woltlab.wcf/templates/mediaBBCodeTag.tpl
@@ -1,5 +1,5 @@
 {if !$removeLinks|isset}{assign var='removeLinks' value=false}{/if}
-<span class="mediaBBCode{if $float != 'none'} messageFloatObject{$float|ucfirst}{/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'}
                        {if !$removeLinks}

diff --git a/wcfsetup/install/files/acp/templates/mediaBBCodeTag.tpl b/wcfsetup/install/files/acp/templates/mediaBBCodeTag.tpl
index 848f068fe0b688560b44e8e32187a01527dc22ac..cb55423f3c11d66a3b1f469e1deaca6b1981a9eb 100644 (file)
--- a/wcfsetup/install/files/acp/templates/mediaBBCodeTag.tpl
+++ b/wcfsetup/install/files/acp/templates/mediaBBCodeTag.tpl
@@ -1,5 +1,5 @@
 {if !$removeLinks|isset}{assign var='removeLinks' value=false}{/if}
-<span class="mediaBBCode{if $float != 'none'} messageFloatObject{$float|ucfirst}{/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'}
                        {if !$removeLinks}

diff --git a/wcfsetup/install/files/lib/system/bbcode/AttachmentBBCode.class.php b/wcfsetup/install/files/lib/system/bbcode/AttachmentBBCode.class.php
index e4a22067bd0bb41d45f9683941af44adf2aa0eb7..c71ab227fe09e3d333e8df87d5827a6651e7d3fd 100644 (file)
--- a/wcfsetup/install/files/lib/system/bbcode/AttachmentBBCode.class.php
+++ b/wcfsetup/install/files/lib/system/bbcode/AttachmentBBCode.class.php
@@ -110,7 +110,7 @@ final class AttachmentBBCode extends AbstractBBCode
         }
 
         return \sprintf(
-            '<span title="%s" class="%s" style="width: %s">%s</span>',
+            '<span title="%s" class="%s" style="width: %s; display: inline-flex;">%s</span>',
             $title,
             $class,
             $width,
@@ -168,7 +168,7 @@ final class AttachmentBBCode extends AbstractBBCode
         }
 
         return \sprintf(
-            '<span class="%s" stlye="width: %s">%s%s</span>',
+            '<span class="%s" style="width: %s; display: inline-flex">%s%s</span>',
             $class,
             $width,
             $imageElement,

diff --git a/wcfsetup/install/files/lib/system/bbcode/WoltLabSuiteMediaBBCode.class.php b/wcfsetup/install/files/lib/system/bbcode/WoltLabSuiteMediaBBCode.class.php
index 4fdb9e2bec5a5e562ea681580bd95d87819314d8..b77b796ed2a0e45752f98d6544ef1b213bd9621c 100644 (file)
--- a/wcfsetup/install/files/lib/system/bbcode/WoltLabSuiteMediaBBCode.class.php
+++ b/wcfsetup/install/files/lib/system/bbcode/WoltLabSuiteMediaBBCode.class.php
@@ -60,6 +60,7 @@ final class WoltLabSuiteMediaBBCode extends AbstractBBCode
                 if ($media->isImage) {
                     $thumbnailSize = (!empty($openingTag['attributes'][1])) ? $openingTag['attributes'][1] : 'original';
                     $float = (!empty($openingTag['attributes'][2])) ? $openingTag['attributes'][2] : 'none';
+                    $width = (!empty($openingTag['attributes'][3])) ? $openingTag['attributes'][3] : 'auto';
 
                     return WCF::getTPL()->fetch('mediaBBCodeTag', 'wcf', [
                         'mediaLink' => $this->getLink($media),
@@ -71,6 +72,7 @@ final class WoltLabSuiteMediaBBCode extends AbstractBBCode
                         'float' => $float,
                         'media' => $media->getLocalizedVersion(MessageEmbeddedObjectManager::getInstance()->getActiveMessageLanguageID()),
                         'thumbnailSize' => $thumbnailSize,
+                        'width' => $width,
                     ]);
                 } elseif ($media->isVideo() || $media->isAudio()) {
                     return WCF::getTPL()->fetch('mediaBBCodeTag', 'wcf', [

diff --git a/wcfsetup/install/files/lib/system/html/input/node/HtmlInputNodeImg.class.php b/wcfsetup/install/files/lib/system/html/input/node/HtmlInputNodeImg.class.php
index 707aefb8aba136b5cbb653c2fa4f8c9b8a2f4b4a..eacd22e92e2a341763151b4624a0ebe0159c3a2c 100644 (file)
--- a/wcfsetup/install/files/lib/system/html/input/node/HtmlInputNodeImg.class.php
+++ b/wcfsetup/install/files/lib/system/html/input/node/HtmlInputNodeImg.class.php
@@ -162,6 +162,12 @@ class HtmlInputNodeImg extends AbstractHtmlInputNode
 
         $float = 'none';
         $thumbnail = 'original';
+        $width = $element->getAttribute("data-width");
+        if (\preg_match('~(?<width>\d+)px$~', $width, $matches)) {
+            $width = (int)$matches['width'];
+        } else {
+            $width = "auto";
+        }
 
         if (
             \preg_match(
@@ -188,6 +194,7 @@ class HtmlInputNodeImg extends AbstractHtmlInputNode
             $mediumID,
             $thumbnail,
             $float,
+            $width,
         ];
 
         $newElement = $element->ownerDocument->createElement('woltlab-metacode');