Add width to smileys (#4145)

As of now, the smiley width is unknown, which may lead in unwanted layout shifting. The proposed change will add the width property to smileys' HTML output.

diff --git a/wcfsetup/install/files/lib/data/smiley/Smiley.class.php b/wcfsetup/install/files/lib/data/smiley/Smiley.class.php
index 0d065591db610938c50309f23b2cb3328a480948..9b1b57e6ff24c70c44962a7d04ae252a712bbad4 100644 (file)
--- a/wcfsetup/install/files/lib/data/smiley/Smiley.class.php
+++ b/wcfsetup/install/files/lib/data/smiley/Smiley.class.php
@@ -19,7 +19,7 @@ use wcf\util\StringUtil;
  * @property-read   int $packageID  id of the package which delivers the smiley
  * @property-read   int|null $categoryID id of the category the smiley belongs to or `null` if it belongs to the default category
  * @property-read   string $smileyPath path to the smiley file relative to wcf's default path
- * @property-read       string $smileyPath2x   path to the smiley file relative to wcf's default path (2x version)
+ * @property-read   string $smileyPath2x   path to the smiley file relative to wcf's default path (2x version)
  * @property-read   string $smileyTitle    title of the smiley or name of language item that contains the title
  * @property-read   string $smileyCode code used for displaying the smiley
  * @property-read   string $aliases    alternative codes used for displaying the smiley
@@ -29,6 +29,8 @@ class Smiley extends DatabaseObject implements ITitledObject
 {
     protected $height;
 
+    protected $width;
+
     public $smileyCodes;
 
     /**
@@ -75,26 +77,51 @@ class Smiley extends DatabaseObject implements ITitledObject
     }
 
     /**
-     * Returns the height of the smiley.
+     * Returns the dimensions of the smiley.
      *
-     * @return  int
+     * @since   5.4
+     * @return  int[]
      */
-    public function getHeight()
+    public function getDimensions()
     {
         if ($this->height === null) {
-            $this->height = 0;
+            $this->height = $this->width = 0;
 
             $file = WCF_DIR . $this->smileyPath;
             if (\file_exists($file) && \preg_match('~\.(gif|jpe?g|png)$~', $file)) {
                 $data = \getimagesize($file);
                 if ($data !== false) {
-                    // index '1' contains the height of the image
-                    $this->height = $data[1];
+                    // The first two indices of `getimagesize()` represent the image dimensions.
+                    [$this->width, $this->height] = $data;
                 }
             }
         }
 
-        return $this->height;
+        return [
+            'width' => $this->width,
+            'height' => $this->height,
+        ];
+    }
+
+    /**
+     * Returns the height of the smiley.
+     *
+     * @return  int
+     */
+    public function getHeight()
+    {
+        return $this->getDimensions()['height'];
+    }
+
+    /**
+     * Returns the width of the smiley.
+     *
+     * @since   5.4
+     * @return  int
+     */
+    public function getWidth()
+    {
+        return $this->getDimensions()['width'];
     }
 
     /**
@@ -107,10 +134,11 @@ class Smiley extends DatabaseObject implements ITitledObject
     {
         $srcset = ($this->smileyPath2x) ? ' srcset="' . StringUtil::encodeHTML($this->getURL2x()) . ' 2x"' : '';
         $height = ($this->getHeight()) ? ' height="' . $this->getHeight() . '"' : '';
+        $width = ($this->getWidth()) ? ' width="' . $this->getWidth() . '"' : '';
         if ($class !== '') {
             $class = ' ' . $class;
         }
 
-        return '<img src="' . StringUtil::encodeHTML($this->getURL()) . '" alt="' . StringUtil::encodeHTML($this->smileyCode) . '" title="' . WCF::getLanguage()->get($this->smileyTitle) . '" class="smiley' . $class . '"' . $srcset . $height . '>';
+        return '<img src="' . StringUtil::encodeHTML($this->getURL()) . '" alt="' . StringUtil::encodeHTML($this->smileyCode) . '" title="' . WCF::getLanguage()->get($this->smileyTitle) . '" class="smiley' . $class . '"' . $srcset . $height . $width . '>';
     }
 }

diff --git a/wcfsetup/install/files/lib/system/html/input/node/HtmlInputNodeTextParser.class.php b/wcfsetup/install/files/lib/system/html/input/node/HtmlInputNodeTextParser.class.php
index cf631486b0b1062a79df620c1cd0fa7d1f3aff3f..7c9366b4a881575743a02976a9f0ed78bbc8687f 100644 (file)
--- a/wcfsetup/install/files/lib/system/html/input/node/HtmlInputNodeTextParser.class.php
+++ b/wcfsetup/install/files/lib/system/html/input/node/HtmlInputNodeTextParser.class.php
@@ -613,6 +613,7 @@ class HtmlInputNodeTextParser
                 $element->setAttribute('class', 'smiley');
                 $element->setAttribute('alt', $smileyCode);
                 $element->setAttribute('height', (string)$smiley->getHeight());
+                $element->setAttribute('width', (string)$smiley->getWidth());
                 if ($smiley->getURL2x()) {
                     $element->setAttribute('srcset', $smiley->getURL2x() . ' 2x');
                 }