/**
* 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;
}
}
/**
* 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.
$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;
# 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;
}
* 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
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
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