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.
* Daniel Arnold
* Denny Vrandecic
* Derk-Jan Hartman
* Daniel Arnold
* Denny Vrandecic
* Derk-Jan Hartman
* FunPika
* Ireas
* Jaska Zedlik
* FunPika
* Ireas
* Jaska Zedlik
[[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
[[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
=== Bug fixes in 1.17 ===
* (bug 17560) Half-broken deletion moved image files to deletion archive
* Default parameters for the <gallery> tag
*/
$wgGalleryOptions = 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)
'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)
/**
* Set how many images will be displayed per row.
*
/**
* 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 ) {
*/
public function setPerRow( $num ) {
$this->mPerRow = (int)$num;
}
}
$this->mPerRow = (int)$num;
}
}
/**
* Set arbitrary attributes to go on the HTML gallery output element.
/**
* 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.
*
* Note -- if taking from user input, you should probably run through
* Sanitizer::validateAttributes() first.
+ if ( $this->mPerRow > 0 ) {
+ $maxwidth = $this->mPerRow * ( $this->mWidths + 50 );
+ $this->mAttribs['style'] = "max-width: {$maxwidth}px;_width: {$maxwidth}px;";
+ }
+
$attribs = Sanitizer::mergeAttributes(
array(
$attribs = Sanitizer::mergeAttributes(
array(
- 'class' => 'gallery',
- 'cellspacing' => '0',
- 'cellpadding' => '0' ),
- $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;
$params = array( 'width' => $this->mWidths, 'height' => $this->mHeights );
$i = 0;
# in version 4.8.6 generated crackpot html in its absence, see:
# http://bugzilla.wikimedia.org/show_bug.cgi?id=1765 -Ævar
# 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
- "\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>"
. $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>";
- }
- if( $i % $this->mPerRow != 0 ) {
- $s .= "\n\t</tr>";
- }
- $s .= "\n</table>";
* image6
</gallery>
!! result
* 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 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 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 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 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 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 style="height: 152px;">* image6</div>
<div class="gallerytext">
</div>
- </div></td>
- </tr>
-</table>
image:foobar.jpg
</gallery>
!! result
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 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 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 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 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>
File:Foobar.jpg
</gallery>
!! result
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 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 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 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 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>
-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;
margin: 2px;
padding: 2px;
background-color: white;
-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 {
+ 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;
text-align: center;
border: 1px solid #ccc;
margin: 2px;