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.
This commit is contained in:
Aryeh Gregor
parent
57b42fb1c0
commit
05579cf0e6
6 changed files with 79 additions and 85 deletions
1
CREDITS
1
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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -786,31 +786,34 @@ table.mw_metadata td {
|
|||
}
|
||||
|
||||
/* Galleries */
|
||||
table.gallery {
|
||||
border: 1px solid #ccc;
|
||||
margin: 2px;
|
||||
padding: 2px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
table.gallery tr {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
table.gallery td {
|
||||
/* 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;
|
||||
}
|
||||
table.gallery caption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div.gallerybox {
|
||||
ul.gallery {
|
||||
margin: 2px;
|
||||
padding: 2px;
|
||||
background-color: white;
|
||||
display: block;
|
||||
}
|
||||
|
||||
div.gallerybox div.thumb {
|
||||
ul.gallery, li.gallerybox {
|
||||
display: inline-block;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
|
||||
li.gallerycaption {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
display: block;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
li.gallerybox div.thumb {
|
||||
text-align: center;
|
||||
border: 1px solid #ccc;
|
||||
margin: 2px;
|
||||
|
|
|
|||
Loading…
Reference in a new issue