r77411 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r77410‎ | r77411 | r77412 >
Date:00:11, 29 November 2010
Author:simetrical
Status:resolved
Tags:
Comment:
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.
Modified paths:
  • /trunk/extensions/Cite/citeParserTests.txt (modified) (history)
  • /trunk/phase3/CREDITS (modified) (history)
  • /trunk/phase3/RELEASE-NOTES (modified) (history)
  • /trunk/phase3/includes/DefaultSettings.php (modified) (history)
  • /trunk/phase3/includes/ImageGallery.php (modified) (history)
  • /trunk/phase3/maintenance/tests/parser/parserTests.txt (modified) (history)
  • /trunk/phase3/skins/common/shared.css (modified) (history)

Diff [purge]

Index: trunk/phase3/maintenance/tests/parser/parserTests.txt
——@@ -6607,48 +6607,44 @@
66086608 * image6
66096609 </gallery>
66106610 !! result
6611 -<table class="gallery" cellspacing="0" cellpadding="0">
6612 - <tr>
6613 - <td><div class="gallerybox" style="width: 155px;">
 6611+<ul class="gallery">
 6612+ <li class="gallerybox" style="width: 155px"><div style="width: 155px">
66146613 <div style="height: 152px;">Image1.png</div>
66156614 <div class="gallerytext">
66166615 </div>
6617 - </div></td>
6618 - <td><div class="gallerybox" style="width: 155px;">
 6616+ </div></li>
 6617+ <li class="gallerybox" style="width: 155px"><div style="width: 155px">
66196618 <div style="height: 152px;">Image2.gif</div>
66206619 <div class="gallerytext">
66216620 <p>||||
66226621 </p>
66236622 </div>
6624 - </div></td>
6625 - <td><div class="gallerybox" style="width: 155px;">
 6623+ </div></li>
 6624+ <li class="gallerybox" style="width: 155px"><div style="width: 155px">
66266625 <div style="height: 152px;">Image3</div>
66276626 <div class="gallerytext">
66286627 </div>
6629 - </div></td>
6630 - <td><div class="gallerybox" style="width: 155px;">
 6628+ </div></li>
 6629+ <li class="gallerybox" style="width: 155px"><div style="width: 155px">
66316630 <div style="height: 152px;">Image4</div>
66326631 <div class="gallerytext">
66336632 <p>300px| centre
66346633 </p>
66356634 </div>
6636 - </div></td>
6637 - </tr>
6638 - <tr>
6639 - <td><div class="gallerybox" style="width: 155px;">
 6635+ </div></li>
 6636+ <li class="gallerybox" style="width: 155px"><div style="width: 155px">
66406637 <div style="height: 152px;">Image5.svg</div>
66416638 <div class="gallerytext">
66426639 <p><a href="http://///////" class="external free" rel="nofollow">http://///////</a>
66436640 </p>
66446641 </div>
6645 - </div></td>
6646 - <td><div class="gallerybox" style="width: 155px;">
 6642+ </div></li>
 6643+ <li class="gallerybox" style="width: 155px"><div style="width: 155px">
66476644 <div style="height: 152px;">* image6</div>
66486645 <div class="gallerytext">
66496646 </div>
6650 - </div></td>
6651 - </tr>
6652 -</table>
 6647+ </div></li>
 6648+</ul>
66536649
66546650 !! end
66556651
——@@ -6662,37 +6658,33 @@
66636659 image:foobar.jpg
66646660 </gallery>
66656661 !! result
6666 -<table class="gallery" cellspacing="0" cellpadding="0">
6667 - <caption>Foo <a href="https://www.mediawiki.org/wiki/Main_Page">Main Page</a></caption>
6668 - <tr>
6669 - <td><div class="gallerybox" style="width: 95px;">
 6662+<ul class="gallery" style="max-width: 220px;_width: 220px;">
 6663+ <li class='gallerycaption'>Foo <a href="https://www.mediawiki.org/wiki/Main_Page">Main Page</a></li>
 6664+ <li class="gallerybox" style="width: 95px"><div style="width: 95px">
66706665 <div style="height: 52px;">Nonexistant.jpg</div>
66716666 <div class="gallerytext">
66726667 <p>caption
66736668 </p>
66746669 </div>
6675 - </div></td>
6676 - <td><div class="gallerybox" style="width: 95px;">
 6670+ </div></li>
 6671+ <li class="gallerybox" style="width: 95px"><div style="width: 95px">
66776672 <div style="height: 52px;">Nonexistant.jpg</div>
66786673 <div class="gallerytext">
66796674 </div>
6680 - </div></td>
6681 - </tr>
6682 - <tr>
6683 - <td><div class="gallerybox" style="width: 95px;">
 6675+ </div></li>
 6676+ <li class="gallerybox" style="width: 95px"><div style="width: 95px">
66846677 <div class="thumb" style="padding: 19px 0; width: 90px;"><div style="margin-left: auto; margin-right: auto; width: 60px;"><a href="https://www.mediawiki.org/wiki/File:Foobar.jpg" class="image"><img alt="" src="http://example.com/images/3/3a/Foobar.jpg" width="60" height="7" /></a></div></div>
66856678 <div class="gallerytext">
66866679 <p>some <b>caption</b> <a href="https://www.mediawiki.org/wiki/Main_Page">Main Page</a>
66876680 </p>
66886681 </div>
6689 - </div></td>
6690 - <td><div class="gallerybox" style="width: 95px;">
 6682+ </div></li>
 6683+ <li class="gallerybox" style="width: 95px"><div style="width: 95px">
66916684 <div class="thumb" style="padding: 19px 0; width: 90px;"><div style="margin-left: auto; margin-right: auto; width: 60px;"><a href="https://www.mediawiki.org/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>
66926685 <div class="gallerytext">
66936686 </div>
6694 - </div></td>
6695 - </tr>
6696 -</table>
 6687+ </div></li>
 6688+</ul>
66976689
66986690 !! end
66996691
——@@ -6706,40 +6698,38 @@
67076699 File:Foobar.jpg
67086700 </gallery>
67096701 !! result
6710 -<table class="gallery" cellspacing="0" cellpadding="0">
6711 - <tr>
6712 - <td><div class="gallerybox" style="width: 155px;">
 6702+<ul class="gallery">
 6703+ <li class="gallerybox" style="width: 155px"><div style="width: 155px">
67136704 <div style="height: 152px;">Nonexistant.jpg</div>
67146705 <div class="gallerytext">
67156706 <p><a href="https://www.mediawiki.org/wiki/File:Nonexistant.jpg" title="File:Nonexistant.jpg">Nonexistant.jpg</a><br />
67166707 caption
67176708 </p>
67186709 </div>
6719 - </div></td>
6720 - <td><div class="gallerybox" style="width: 155px;">
 6710+ </div></li>
 6711+ <li class="gallerybox" style="width: 155px"><div style="width: 155px">
67216712 <div style="height: 152px;">Nonexistant.jpg</div>
67226713 <div class="gallerytext">
67236714 <p><a href="https://www.mediawiki.org/wiki/File:Nonexistant.jpg" title="File:Nonexistant.jpg">Nonexistant.jpg</a><br />
67246715 </p>
67256716 </div>
6726 - </div></td>
6727 - <td><div class="gallerybox" style="width: 155px;">
 6717+ </div></li>
 6718+ <li class="gallerybox" style="width: 155px"><div style="width: 155px">
67286719 <div class="thumb" style="padding: 66px 0; width: 150px;"><div style="margin-left: auto; margin-right: auto; width: 120px;"><a href="https://www.mediawiki.org/wiki/File:Foobar.jpg" class="image"><img alt="" src="http://example.com/images/3/3a/Foobar.jpg" width="120" height="14" /></a></div></div>
67296720 <div class="gallerytext">
67306721 <p><a href="https://www.mediawiki.org/wiki/File:Foobar.jpg" title="File:Foobar.jpg">Foobar.jpg</a><br />
67316722 some <b>caption</b> <a href="https://www.mediawiki.org/wiki/Main_Page">Main Page</a>
67326723 </p>
67336724 </div>
6734 - </div></td>
6735 - <td><div class="gallerybox" style="width: 155px;">
 6725+ </div></li>
 6726+ <li class="gallerybox" style="width: 155px"><div style="width: 155px">
67366727 <div class="thumb" style="padding: 66px 0; width: 150px;"><div style="margin-left: auto; margin-right: auto; width: 120px;"><a href="https://www.mediawiki.org/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>
67376728 <div class="gallerytext">
67386729 <p><a href="https://www.mediawiki.org/wiki/File:Foobar.jpg" title="File:Foobar.jpg">Foobar.jpg</a><br />
67396730 </p>
67406731 </div>
6741 - </div></td>
6742 - </tr>
6743 -</table>
 6732+ </div></li>
 6733+</ul>
67446734
67456735 !! end
67466736
Index: trunk/phase3/skins/common/shared.css
——@@ -786,31 +786,34 @@
787787 }
788788
789789 /* Galleries */
790 -table.gallery {
791 - border: 1px solid #ccc;
 790+/* These display attributes look nonsensical, but are needed to support IE and FF2 */
 791+li.gallerybox {
 792+ vertical-align: top;
 793+ background-color: #f9f9f9;
 794+ border: solid 2px white;
 795+ display: -moz-inline-box;
 796+}
 797+ul.gallery {
792798 margin: 2px;
793799 padding: 2px;
794800 background-color: white;
 801+ display: block;
795802 }
796803
797 -table.gallery tr {
798 - vertical-align: top;
 804+ul.gallery, li.gallerybox {
 805+ display: inline-block;
 806+ zoom: 1;
 807+ *display: inline;
799808 }
800809
801 -table.gallery td {
802 - vertical-align: top;
803 - background-color: #f9f9f9;
804 - border: solid 2px white;
805 -}
806 -table.gallery caption {
 810+li.gallerycaption {
807811 font-weight: bold;
 812+ text-align: center;
 813+ display: block;
 814+ word-wrap: break-word;
808815 }
809816
810 -div.gallerybox {
811 - margin: 2px;
812 -}
813 -
814 -div.gallerybox div.thumb {
 817+li.gallerybox div.thumb {
815818 text-align: center;
816819 border: 1px solid #ccc;
817820 margin: 2px;
Index: trunk/phase3/CREDITS
——@@ -85,6 +85,7 @@
8686 * Daniel Arnold
8787 * Denny Vrandecic
8888 * Derk-Jan Hartman
 89+* DieBuche
8990 * FunPika
9091 * Ireas
9192 * Jaska Zedlik
Index: trunk/phase3/includes/DefaultSettings.php
——@@ -886,7 +886,7 @@
887887 * Default parameters for the <gallery> tag
888888 */
889889 $wgGalleryOptions = array (
890 - 'imagesPerRow' => 4, // Default number of images per-row in the gallery
 890+ 'imagesPerRow' => 0, // Default number of images per-row in the gallery. 0 -> Adapt to screensize
891891 'imageWidth' => 120, // Width of the cells containing images in galleries (in "px")
892892 'imageHeight' => 120, // Height of the cells containing images in galleries (in "px")
893893 'captionLength' => 20, // Length of caption to truncate (in characters)
Index: trunk/phase3/includes/ImageGallery.php
——@@ -85,10 +85,11 @@
8686 /**
8787 * Set how many images will be displayed per row.
8888 *
89 - * @param $num Integer > 0; invalid numbers will be rejected
 89+ * @param $num Integer >= 0; If perrow=0 the gallery layout will adapt to screensize
 90+ * invalid numbers will be rejected
9091 */
9192 public function setPerRow( $num ) {
92 - if ($num > 0) {
 93+ if ($num >= 0) {
9394 $this->mPerRow = (int)$num;
9495 }
9596 }
——@@ -198,7 +199,7 @@
199200
200201 /**
201202 * Set arbitrary attributes to go on the HTML gallery output element.
202 - * Should be suitable for a &lt;table&gt; element.
 203+ * Should be suitable for a <ul> element.
203204 *
204205 * Note -- if taking from user input, you should probably run through
205206 * Sanitizer::validateAttributes() first.
——@@ -224,15 +225,19 @@
225226
226227 $sk = $this->getSkin();
227228
 229+ if ( $this->mPerRow > 0 ) {
 230+ $maxwidth = $this->mPerRow * ( $this->mWidths + 50 );
 231+ $this->mAttribs['style'] = "max-width: {$maxwidth}px;_width: {$maxwidth}px;";
 232+ }
 233+
228234 $attribs = Sanitizer::mergeAttributes(
229235 array(
230 - 'class' => 'gallery',
231 - 'cellspacing' => '0',
232 - 'cellpadding' => '0' ),
 236+ 'class' => 'gallery'),
233237 $this->mAttribs );
234 - $s = Xml::openElement( 'table', $attribs );
235 - if( $this->mCaption )
236 - $s .= "\n\t<caption>{$this->mCaption}</caption>";
 238+ $s = Xml::openElement( 'ul', $attribs );
 239+ if ( $this->mCaption ) {
 240+ $s .= "\n\t<li class='gallerycaption'>{$this->mCaption}</li>";
 241+ }
237242
238243 $params = array( 'width' => $this->mWidths, 'height' => $this->mHeights );
239244 $i = 0;
——@@ -325,25 +330,19 @@
326331 # in version 4.8.6 generated crackpot html in its absence, see:
327332 # http://bugzilla.wikimedia.org/show_bug.cgi?id=1765 -Ævar
328333
329 - if ( $i % $this->mPerRow == 0 ) {
330 - $s .= "\n\t<tr>";
331 - }
 334+ # Weird double wrapping in div needed due to FF2 bug
 335+ # Can be safely removed if FF2 falls completely out of existance
332336 $s .=
333 - "\n\t\t" . '<td><div class="gallerybox" style="width: '.($this->mWidths+35).'px;">'
 337+ "\n\t\t" . '<li class="gallerybox" style="width: ' . ( $this->mWidths + 35 ) . 'px">'
 338+ . '<div style="width: ' . ( $this->mWidths + 35 ) . 'px">'
334339 . $thumbhtml
335340 . "\n\t\t\t" . '<div class="gallerytext">' . "\n"
336341 . $textlink . $text . $nb
337342 . "\n\t\t\t</div>"
338 - . "\n\t\t</div></td>";
339 - if ( $i % $this->mPerRow == $this->mPerRow - 1 ) {
340 - $s .= "\n\t</tr>";
341 - }
 343+ . "\n\t\t</div></li>";
342344 ++$i;
343345 }
344 - if( $i % $this->mPerRow != 0 ) {
345 - $s .= "\n\t</tr>";
346 - }
347 - $s .= "\n</table>";
 346+ $s .= "\n</ul>";
348347
349348 return $s;
350349 }
Index: trunk/phase3/RELEASE-NOTES
——@@ -213,6 +213,7 @@
214214 [[MediaWiki:Longpage-hint]] (empty per default) can be used instead.
215215 Parameters: $1 shows the formatted textsize in Byte/KB/MB, $2 is the raw
216216 number of the textsize in Byte
 217+* (bug 3276) Give image <gallery>s fluid width
217218
218219 === Bug fixes in 1.17 ===
219220 * (bug 17560) Half-broken deletion moved image files to deletion archive
Index: trunk/extensions/Cite/citeParserTests.txt
——@@ -110,15 +110,13 @@
111111 !! result
112112 <p><sup id="cite_ref-0" class="reference"><a href="#cite_note-0">[1]</a></sup>
113113 </p>
114 -<table class="gallery" cellspacing="0" cellpadding="0">
115 - <tr>
116 - <td><div class="gallerybox" style="width: 155px;">
 114+<ul class="gallery">
 115+ <li class="gallerybox" style="width: 155px"><div style="width: 155px">
117116 <div class="thumb" style="padding: 66px 0; width: 150px;"><div style="margin-left: auto; margin-right: auto; width: 120px;"><a href="https://www.mediawiki.org/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>
118117 <div class="gallerytext">
119118 </div>
120 - </div></td>
121 - </tr>
122 -</table>
 119+ </div></li>
 120+</ul>
123121 <ol class="references"><li id="cite_note-0"><a href="#cite_ref-0">↑</a> one</li></ol>
124122
125123 !! end

Follow-up revisions

RevisionCommit summaryAuthorDate
r77836Follow up to r77411. Patch by DieBuche...hartman22:41, 5 December 2010
r78158Fix bad CSS syntax from r77411catrope23:47, 9 December 2010
r82748Removed white-background from ul.gallery; Updated commonPrint gallery styles...krinkle21:16, 24 February 2011
r83965Fix overestimation of max-width when using perrow mode....hartman21:08, 14 March 2011

Status & tagging log