Explicit dimensions of the small page logo

diff --git a/com.woltlab.wcf/templates/pageHeaderLogo.tpl b/com.woltlab.wcf/templates/pageHeaderLogo.tpl
index 5b4253509d7643da9e9163fa38819a2f466a1706..42f19137c35eacf51c50758d846e3d658ea09718 100644 (file)
--- a/com.woltlab.wcf/templates/pageHeaderLogo.tpl
+++ b/com.woltlab.wcf/templates/pageHeaderLogo.tpl
@@ -6,7 +6,10 @@
                        *}{if $__wcf->getStyleHandler()->getStyle()->getVariable('pageLogoHeight')} height="{@$__wcf->getStyleHandler()->getStyle()->getVariable('pageLogoHeight')}"{/if}{*
                        *}{if $__wcf->getStyleHandler()->getStyle()->getVariable('pageLogoWidth')} width="{@$__wcf->getStyleHandler()->getStyle()->getVariable('pageLogoWidth')}"{/if}{*
                        *} loading="eager">
-               <img src="{$__wcf->getStyleHandler()->getStyle()->getPageLogoMobile()}" alt="" class="pageHeaderLogoSmall" loading="eager">
+               <img src="{$__wcf->getStyleHandler()->getStyle()->getPageLogoMobile()}" alt="" class="pageHeaderLogoSmall"{*
+                       *}{if $__wcf->getStyleHandler()->getStyle()->getPageLogoSmallHeight()} height="{@$__wcf->getStyleHandler()->getStyle()->getPageLogoSmallHeight()}"{/if}{*
+                       *}{if $__wcf->getStyleHandler()->getStyle()->getPageLogoSmallWidth()} width="{@$__wcf->getStyleHandler()->getStyle()->getPageLogoSmallWidth()}"{/if}{*
+                       *} loading="eager">
                
                {event name='headerLogo'}
        </a>

diff --git a/wcfsetup/install/files/lib/data/style/Style.class.php b/wcfsetup/install/files/lib/data/style/Style.class.php
index be269fb652e9e46d6ae73ec325f217a0f1558c05..4611e19d7296d51703d7ad6f93e01a6d05d24ad1 100644 (file)
--- a/wcfsetup/install/files/lib/data/style/Style.class.php
+++ b/wcfsetup/install/files/lib/data/style/Style.class.php
@@ -40,6 +40,16 @@ use wcf\util\ImageUtil;
  */
 class Style extends DatabaseObject
 {
+    /**
+     * @since 5.4
+     */
+    protected $pageLogoSmallHeight = 0;
+
+    /**
+     * @since 5.4
+     */
+    protected $pageLogoSmallWidth = 0;
+
     /**
      * list of style variables
      * @var string[]
@@ -180,6 +190,25 @@ class Style extends DatabaseObject
         if (empty($this->variables['wcfPageThemeColor'])) {
             $this->variables['wcfPageThemeColor'] = $this->variables['wcfHeaderBackground'];
         }
+
+        // Fetch the dimensions of the small logo, avoding calls to `getimagesize` with every request.
+        $filename = \WCF_DIR . 'images/default-logo-small.png';
+        if ($this->getVariable('pageLogoMobile')) {
+            $filename = \WCF_DIR;
+            if ($this->imagePath) {
+                $filename .= $this->imagePath;
+            }
+
+            $filename .= $this->getVariable('pageLogoMobile');
+        }
+
+        if (\file_exists($filename)) {
+            $data = \getimagesize($filename);
+            if ($data !== false) {
+                $this->pageLogoSmallWidth = $data[0];
+                $this->pageLogoSmallHeight = $data[1];
+            }
+        }
     }
 
     /**
@@ -296,6 +325,21 @@ class Style extends DatabaseObject
         return WCF::getPath() . 'images/coverPhotos/' . $this->getCoverPhoto();
     }
 
+    /**
+     * @since 5.4
+     */
+    public function getPageLogoSmallHeight(): int {
+        return $this->pageLogoSmallHeight;
+    }
+
+    /**
+     * @since 5.4
+     */
+    public function getPageLogoSmallWidth(): int
+    {
+        return $this->pageLogoSmallWidth;
+    }
+
     /**
      * Serve the WebP variant of the cover photo if the browser supports
      * it and the original cover photo is not a GIF.

diff --git a/wcfsetup/install/files/style/layout/pageHeader.scss b/wcfsetup/install/files/style/layout/pageHeader.scss
index df7e323484ca93318f568c631182420fef8fb4fa..7b1ec4fdba91869d95abf190c46165c791d0b432 100644 (file)
--- a/wcfsetup/install/files/style/layout/pageHeader.scss
+++ b/wcfsetup/install/files/style/layout/pageHeader.scss
@@ -325,9 +325,8 @@
 
                .pageHeaderLogoSmall {
                        max-height: 30px;
-
-                       /* prevent over-sized logos from overlapping the user panel buttons */
                        max-width: 100%;
+                       object-fit: contain;
                }
        }
 }