Give image <gallery>s fluid width

Bug 3276.  Patch by DieBuche, with style cleanups by me, plus a tweak
from comment 27 of the bug to fix spacing.  This incidentally removes
the border around galleries, but this was hard to notice anyway, and
could be easily readded if desired.  Tested in a few browsers, including
IE6, but more testing and/or input from CSS gurus would be appreciated.

Updates parser tests, including for Cite.

diff --git a/CREDITS b/CREDITS
index 42ef046..07968dd 100644 (file)
--- a/CREDITS
+++ b/CREDITS
@@ -85,6 +85,7 @@ following names for their contribution to the product.
 * Daniel Arnold
 * Denny Vrandecic
 * Derk-Jan Hartman
+* DieBuche
 * FunPika
 * Ireas
 * Jaska Zedlik

diff --git a/RELEASE-NOTES b/RELEASE-NOTES
index 364dbc3..83bbf7b 100644 (file)
--- a/RELEASE-NOTES
+++ b/RELEASE-NOTES
@@ -213,6 +213,7 @@ LocalSettings.php. The specific bugs are listed below in the general notes.
   [[MediaWiki:Longpage-hint]] (empty per default) can be used instead.
   Parameters: $1 shows the formatted textsize in Byte/KB/MB, $2 is the raw
   number of the textsize in Byte
+* (bug 3276) Give image <gallery>s fluid width
 
 === Bug fixes in 1.17 ===
 * (bug 17560) Half-broken deletion moved image files to deletion archive

diff --git a/includes/DefaultSettings.php b/includes/DefaultSettings.php
index 8318590..0078e5b 100644 (file)
--- a/includes/DefaultSettings.php
+++ b/includes/DefaultSettings.php
@@ -886,7 +886,7 @@ $wgThumbLimits = array(
  * Default parameters for the <gallery> tag
  */
 $wgGalleryOptions = array (
-       'imagesPerRow' => 4, // Default number of images per-row in the gallery
+       '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' => 20, // Length of caption to truncate (in characters)

diff --git a/includes/ImageGallery.php b/includes/ImageGallery.php
index b768073..31821d4 100644 (file)
--- a/includes/ImageGallery.php
+++ b/includes/ImageGallery.php
@@ -85,10 +85,11 @@ class ImageGallery
        /**
         * Set how many images will be displayed per row.
         *
-        * @param $num Integer > 0; invalid numbers will be rejected
+        * @param $num Integer >= 0; If perrow=0 the gallery layout will adapt to screensize
+        * invalid numbers will be rejected
         */
        public function setPerRow( $num ) {
-               if ($num > 0) {
+               if ($num >= 0) {
                        $this->mPerRow = (int)$num;
                }
        }
@@ -198,7 +199,7 @@ class ImageGallery
 
        /**
         * Set arbitrary attributes to go on the HTML gallery output element.
-        * Should be suitable for a <table> element.
+        * Should be suitable for a <ul> element.
         *
         * Note -- if taking from user input, you should probably run through
         * Sanitizer::validateAttributes() first.
@@ -224,15 +225,19 @@ class ImageGallery
 
                $sk = $this->getSkin();
 
+               if ( $this->mPerRow > 0 ) {
+                       $maxwidth = $this->mPerRow * ( $this->mWidths + 50 );
+                       $this->mAttribs['style'] = "max-width: {$maxwidth}px;_width: {$maxwidth}px;";
+               }
+
                $attribs = Sanitizer::mergeAttributes(
                        array(
-                               'class' => 'gallery',
-                               'cellspacing' => '0',
-                               'cellpadding' => '0' ),
+                               'class' => 'gallery'),
                        $this->mAttribs );
-               $s = Xml::openElement( 'table', $attribs );
-               if( $this->mCaption )
-                       $s .= "\n\t<caption>{$this->mCaption}</caption>";
+               $s = Xml::openElement( 'ul', $attribs );
+               if ( $this->mCaption ) {
+                       $s .= "\n\t<li class='gallerycaption'>{$this->mCaption}</li>";
+               }
 
                $params = array( 'width' => $this->mWidths, 'height' => $this->mHeights );
                $i = 0;
@@ -325,25 +330,19 @@ class ImageGallery
                        # in version 4.8.6 generated crackpot html in its absence, see:
                        # http://bugzilla.wikimedia.org/show_bug.cgi?id=1765 -Ævar
 
-                       if ( $i % $this->mPerRow == 0 ) {
-                               $s .= "\n\t<tr>";
-                       }
+                       # Weird double wrapping in div needed due to FF2 bug
+                       # Can be safely removed if FF2 falls completely out of existance
                        $s .=
-                               "\n\t\t" . '<td><div class="gallerybox" style="width: '.($this->mWidths+35).'px;">'
+                               "\n\t\t" . '<li class="gallerybox" style="width: ' . ( $this->mWidths + 35 ) . 'px">'
+                                       . '<div style="width: ' . ( $this->mWidths + 35 ) . 'px">'
                                        . $thumbhtml
                                        . "\n\t\t\t" . '<div class="gallerytext">' . "\n"
                                                . $textlink . $text . $nb
                                        . "\n\t\t\t</div>"
-                               . "\n\t\t</div></td>";
-                       if ( $i % $this->mPerRow == $this->mPerRow - 1 ) {
-                               $s .= "\n\t</tr>";
-                       }
+                               . "\n\t\t</div></li>";
                        ++$i;
                }
-               if( $i % $this->mPerRow != 0 ) {
-                       $s .= "\n\t</tr>";
-               }
-               $s .= "\n</table>";
+               $s .= "\n</ul>";
 
                return $s;
        }

diff --git a/maintenance/tests/parser/parserTests.txt b/maintenance/tests/parser/parserTests.txt
index fe718d7..88c77d1 100644 (file)
--- a/maintenance/tests/parser/parserTests.txt
+++ b/maintenance/tests/parser/parserTests.txt
@@ -6607,48 +6607,44 @@ image4    |300px| centre
 * image6
 </gallery>
 !! result
-<table class="gallery" cellspacing="0" cellpadding="0">
-       <tr>
-               <td><div class="gallerybox" style="width: 155px;">
+<ul class="gallery">
+               <li class="gallerybox" style="width: 155px"><div style="width: 155px">
                        <div style="height: 152px;">Image1.png</div>
                        <div class="gallerytext">
                        </div>
-               </div></td>
-               <td><div class="gallerybox" style="width: 155px;">
+               </div></li>
+               <li class="gallerybox" style="width: 155px"><div style="width: 155px">
                        <div style="height: 152px;">Image2.gif</div>
                        <div class="gallerytext">
 <p>||||
 </p>
                        </div>
-               </div></td>
-               <td><div class="gallerybox" style="width: 155px;">
+               </div></li>
+               <li class="gallerybox" style="width: 155px"><div style="width: 155px">
                        <div style="height: 152px;">Image3</div>
                        <div class="gallerytext">
                        </div>
-               </div></td>
-               <td><div class="gallerybox" style="width: 155px;">
+               </div></li>
+               <li class="gallerybox" style="width: 155px"><div style="width: 155px">
                        <div style="height: 152px;">Image4</div>
                        <div class="gallerytext">
 <p>300px| centre
 </p>
                        </div>
-               </div></td>
-       </tr>
-       <tr>
-               <td><div class="gallerybox" style="width: 155px;">
+               </div></li>
+               <li class="gallerybox" style="width: 155px"><div style="width: 155px">
                        <div style="height: 152px;">Image5.svg</div>
                        <div class="gallerytext">
 <p><a href="http://///////" class="external free" rel="nofollow">http://///////</a>
 </p>
                        </div>
-               </div></td>
-               <td><div class="gallerybox" style="width: 155px;">
+               </div></li>
+               <li class="gallerybox" style="width: 155px"><div style="width: 155px">
                        <div style="height: 152px;">* image6</div>
                        <div class="gallerytext">
                        </div>
-               </div></td>
-       </tr>
-</table>
+               </div></li>
+</ul>
 
 !! end
 
@@ -6662,37 +6658,33 @@ image:foobar.jpg|some '''caption''' [[Main Page]]
 image:foobar.jpg
 </gallery>
 !! result
-<table class="gallery" cellspacing="0" cellpadding="0">
-       <caption>Foo <a href="/wiki/Main_Page">Main Page</a></caption>
-       <tr>
-               <td><div class="gallerybox" style="width: 95px;">
+<ul class="gallery" style="max-width: 220px;_width: 220px;">
+       <li class='gallerycaption'>Foo <a href="/wiki/Main_Page">Main Page</a></li>
+               <li class="gallerybox" style="width: 95px"><div style="width: 95px">
                        <div style="height: 52px;">Nonexistant.jpg</div>
                        <div class="gallerytext">
 <p>caption
 </p>
                        </div>
-               </div></td>
-               <td><div class="gallerybox" style="width: 95px;">
+               </div></li>
+               <li class="gallerybox" style="width: 95px"><div style="width: 95px">
                        <div style="height: 52px;">Nonexistant.jpg</div>
                        <div class="gallerytext">
                        </div>
-               </div></td>
-       </tr>
-       <tr>
-               <td><div class="gallerybox" style="width: 95px;">
+               </div></li>
+               <li class="gallerybox" style="width: 95px"><div style="width: 95px">
                        <div class="thumb" style="padding: 19px 0; width: 90px;"><div style="margin-left: auto; margin-right: auto; width: 60px;"><a href="/wiki/File:Foobar.jpg" class="image"><img alt="" src="http://example.com/images/3/3a/Foobar.jpg" width="60" height="7" /></a></div></div>
                        <div class="gallerytext">
 <p>some <b>caption</b> <a href="/wiki/Main_Page">Main Page</a>
 </p>
                        </div>
-               </div></td>
-               <td><div class="gallerybox" style="width: 95px;">
+               </div></li>
+               <li class="gallerybox" style="width: 95px"><div style="width: 95px">
                        <div class="thumb" style="padding: 19px 0; width: 90px;"><div style="margin-left: auto; margin-right: auto; width: 60px;"><a href="/wiki/File:Foobar.jpg" class="image"><img alt="Foobar.jpg" src="http://example.com/images/3/3a/Foobar.jpg" width="60" height="7" /></a></div></div>
                        <div class="gallerytext">
                        </div>
-               </div></td>
-       </tr>
-</table>
+               </div></li>
+</ul>
 
 !! end
 
@@ -6706,40 +6698,38 @@ image:foobar.jpg|some '''caption''' [[Main Page]]
 File:Foobar.jpg
 </gallery>
 !! result
-<table class="gallery" cellspacing="0" cellpadding="0">
-       <tr>
-               <td><div class="gallerybox" style="width: 155px;">
+<ul class="gallery">
+               <li class="gallerybox" style="width: 155px"><div style="width: 155px">
                        <div style="height: 152px;">Nonexistant.jpg</div>
                        <div class="gallerytext">
 <p><a href="/wiki/File:Nonexistant.jpg" title="File:Nonexistant.jpg">Nonexistant.jpg</a><br />
 caption
 </p>
                        </div>
-               </div></td>
-               <td><div class="gallerybox" style="width: 155px;">
+               </div></li>
+               <li class="gallerybox" style="width: 155px"><div style="width: 155px">
                        <div style="height: 152px;">Nonexistant.jpg</div>
                        <div class="gallerytext">
 <p><a href="/wiki/File:Nonexistant.jpg" title="File:Nonexistant.jpg">Nonexistant.jpg</a><br />
 </p>
                        </div>
-               </div></td>
-               <td><div class="gallerybox" style="width: 155px;">
+               </div></li>
+               <li class="gallerybox" style="width: 155px"><div style="width: 155px">
                        <div class="thumb" style="padding: 66px 0; width: 150px;"><div style="margin-left: auto; margin-right: auto; width: 120px;"><a href="/wiki/File:Foobar.jpg" class="image"><img alt="" src="http://example.com/images/3/3a/Foobar.jpg" width="120" height="14" /></a></div></div>
                        <div class="gallerytext">
 <p><a href="/wiki/File:Foobar.jpg" title="File:Foobar.jpg">Foobar.jpg</a><br />
 some <b>caption</b> <a href="/wiki/Main_Page">Main Page</a>
 </p>
                        </div>
-               </div></td>
-               <td><div class="gallerybox" style="width: 155px;">
+               </div></li>
+               <li class="gallerybox" style="width: 155px"><div style="width: 155px">
                        <div class="thumb" style="padding: 66px 0; width: 150px;"><div style="margin-left: auto; margin-right: auto; width: 120px;"><a href="/wiki/File:Foobar.jpg" class="image"><img alt="Foobar.jpg" src="http://example.com/images/3/3a/Foobar.jpg" width="120" height="14" /></a></div></div>
                        <div class="gallerytext">
 <p><a href="/wiki/File:Foobar.jpg" title="File:Foobar.jpg">Foobar.jpg</a><br />
 </p>
                        </div>
-               </div></td>
-       </tr>
-</table>
+               </div></li>
+</ul>
 
 !! end
 

diff --git a/skins/common/shared.css b/skins/common/shared.css
index 34975cd..e64609e 100644 (file)
--- a/skins/common/shared.css
+++ b/skins/common/shared.css
@@ -786,31 +786,34 @@ table.mw_metadata td {
 }
 
 /* Galleries */
-table.gallery {
-       border: 1px solid #ccc;
+/* These display attributes look nonsensical, but are needed to support IE and FF2 */
+li.gallerybox {
+       vertical-align: top;
+       background-color: #f9f9f9;
+       border: solid 2px white;
+       display: -moz-inline-box;
+}
+ul.gallery {
        margin: 2px;
        padding: 2px;
        background-color: white;
+       display: block;
 }
 
-table.gallery tr {
-       vertical-align: top;
+ul.gallery, li.gallerybox {
+       display: inline-block;
+       zoom: 1;
+       *display: inline;
 }
 
-table.gallery td {
-       vertical-align: top;
-       background-color: #f9f9f9;
-       border: solid 2px white;
-}
-table.gallery caption {
+li.gallerycaption {
        font-weight: bold;
+       text-align: center;
+       display: block;
+       word-wrap: break-word;
 }
 
-div.gallerybox {
-       margin: 2px;
-}
-
-div.gallerybox div.thumb {
+li.gallerybox div.thumb {
        text-align: center;
        border: 1px solid #ccc;
        margin: 2px;