Truncate gallery caption filenames with CSS

Bug: T139766
Change-Id: Iba7efb8f89e132b8eb39f3c9ba76d2b1a9181b2f

diff --git a/includes/DefaultSettings.php b/includes/DefaultSettings.php
index f6611ac..5088445 100644 (file)
--- a/includes/DefaultSettings.php
+++ b/includes/DefaultSettings.php
@@ -1444,7 +1444,10 @@ $wgGalleryOptions = [
        'imagesPerRow' => 0, // Default number of images per-row in the gallery. 0 -> Adapt to screensize
        'imageWidth' => 120, // Width of the cells containing images in galleries (in "px")
        'imageHeight' => 120, // Height of the cells containing images in galleries (in "px")
-       'captionLength' => 25, // Length to truncate filename to in caption when using "showfilename"
+       'captionLength' => true, // Deprecated @since 1.28
+                                // Length to truncate filename to in caption when using "showfilename".
+                                // A value of 'true' will truncate the filename to one line using CSS
+                                // and will be the behaviour after deprecation.
        'showBytes' => true, // Show the filesize in bytes in categories
        'mode' => 'traditional',
 ];

diff --git a/includes/gallery/TraditionalImageGallery.php b/includes/gallery/TraditionalImageGallery.php
index 2fb2281..f6527b8 100644 (file)
--- a/includes/gallery/TraditionalImageGallery.php
+++ b/includes/gallery/TraditionalImageGallery.php
@@ -189,8 +189,16 @@ class TraditionalImageGallery extends ImageGalleryBase {
                                // Preloaded into LinkCache above
                                Linker::linkKnown(
                                        $nt,
-                                       htmlspecialchars( $lang->truncate( $nt->getText(), $this->mCaptionLength ) )
-                               ) . "<br />\n" :
+                                       htmlspecialchars(
+                                               $this->mCaptionLength !== true ?
+                                                       $lang->truncate( $nt->getText(), $this->mCaptionLength ) :
+                                                       $nt->getText()
+                                       ),
+                                       [
+                                               'class' => 'galleryfilename' .
+                                                       ( $this->mCaptionLength === true ? ' galleryfilename-truncate' : '' )
+                                       ]
+                               ) . "\n" :
                                '';
 
                        $galleryText = $textlink . $text . $fileSize;

diff --git a/resources/src/mediawiki/page/gallery.css b/resources/src/mediawiki/page/gallery.css
index 4d43e6a..d765144 100644 (file)
--- a/resources/src/mediawiki/page/gallery.css
+++ b/resources/src/mediawiki/page/gallery.css
@@ -45,6 +45,16 @@ div.gallerytext {
        word-wrap: break-word;
 }
 
+.galleryfilename {
+       display: block;
+}
+
+.galleryfilename-truncate {
+       white-space: nowrap;
+       overflow: hidden;
+       text-overflow: ellipsis;
+}
+
 /* new gallery stuff */
 ul.mw-gallery-nolines li.gallerybox div.thumb {
        background-color: transparent;

diff --git a/tests/parser/parserTests.txt b/tests/parser/parserTests.txt
index 2e059d7..aa5ed05 100644 (file)
--- a/tests/parser/parserTests.txt
+++ b/tests/parser/parserTests.txt
@@ -18816,7 +18816,7 @@ File:Foobar.jpg
                <li class="gallerybox" style="width: 155px"><div style="width: 155px">
                        <div class="thumb" style="height: 150px;">Nonexistent.jpg</div>
                        <div class="gallerytext">
-<p><a href="/wiki/File:Nonexistent.jpg" title="File:Nonexistent.jpg">Nonexistent.jpg</a><br />
+<p><a href="/wiki/File:Nonexistent.jpg" class="galleryfilename galleryfilename-truncate" title="File:Nonexistent.jpg">Nonexistent.jpg</a>
 caption
 </p>
                        </div>
@@ -18824,14 +18824,14 @@ caption
                <li class="gallerybox" style="width: 155px"><div style="width: 155px">
                        <div class="thumb" style="height: 150px;">Nonexistent.jpg</div>
                        <div class="gallerytext">
-<p><a href="/wiki/File:Nonexistent.jpg" title="File:Nonexistent.jpg">Nonexistent.jpg</a><br />
+<p><a href="/wiki/File:Nonexistent.jpg" class="galleryfilename galleryfilename-truncate" title="File:Nonexistent.jpg">Nonexistent.jpg</a>
 </p>
                        </div>
                </div></li>
                <li class="gallerybox" style="width: 155px"><div style="width: 155px">
                        <div class="thumb" style="width: 150px;"><div style="margin:68px auto;"><a href="/wiki/File:Foobar.jpg" class="image"><img alt="" src="http://example.com/images/thumb/3/3a/Foobar.jpg/120px-Foobar.jpg" width="120" height="14" srcset="http://example.com/images/thumb/3/3a/Foobar.jpg/180px-Foobar.jpg 1.5x, http://example.com/images/thumb/3/3a/Foobar.jpg/240px-Foobar.jpg 2x" /></a></div></div>
                        <div class="gallerytext">
-<p><a href="/wiki/File:Foobar.jpg" title="File:Foobar.jpg">Foobar.jpg</a><br />
+<p><a href="/wiki/File:Foobar.jpg" class="galleryfilename galleryfilename-truncate" title="File:Foobar.jpg">Foobar.jpg</a>
 some <b>caption</b> <a href="/wiki/Main_Page" title="Main Page">Main Page</a>
 </p>
                        </div>
@@ -18839,7 +18839,7 @@ some <b>caption</b> <a href="/wiki/Main_Page" title="Main Page">Main Page</a>
                <li class="gallerybox" style="width: 155px"><div style="width: 155px">
                        <div class="thumb" style="width: 150px;"><div style="margin:68px auto;"><a href="/wiki/File:Foobar.jpg" class="image"><img alt="Foobar.jpg" src="http://example.com/images/thumb/3/3a/Foobar.jpg/120px-Foobar.jpg" width="120" height="14" srcset="http://example.com/images/thumb/3/3a/Foobar.jpg/180px-Foobar.jpg 1.5x, http://example.com/images/thumb/3/3a/Foobar.jpg/240px-Foobar.jpg 2x" /></a></div></div>
                        <div class="gallerytext">
-<p><a href="/wiki/File:Foobar.jpg" title="File:Foobar.jpg">Foobar.jpg</a><br />
+<p><a href="/wiki/File:Foobar.jpg" class="galleryfilename galleryfilename-truncate" title="File:Foobar.jpg">Foobar.jpg</a>
 </p>
                        </div>
                </div></li>