From 05579cf0e60449528b9ee6a5aba35da3b225ce6b Mon Sep 17 00:00:00 2001 From: Aryeh Gregor Date: Mon, 29 Nov 2010 00:11:19 +0000 Subject: [PATCH] Give image 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. --- CREDITS | 1 + RELEASE-NOTES | 1 + includes/DefaultSettings.php | 2 +- includes/ImageGallery.php | 41 ++++++------ maintenance/tests/parser/parserTests.txt | 80 +++++++++++------------- skins/common/shared.css | 33 +++++----- 6 files changed, 76 insertions(+), 82 deletions(-) diff --git a/CREDITS b/CREDITS index 42ef046a22..07968dd3a3 100644 --- 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 364dbc3fd6..83bbf7bf89 100644 --- 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 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 8318590f18..0078e5b77a 100644 --- a/includes/DefaultSettings.php +++ b/includes/DefaultSettings.php @@ -886,7 +886,7 @@ $wgThumbLimits = array( * Default parameters for the 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 b768073f6d..31821d4a76 100644 --- 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
    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{$this->mCaption}"; + $s = Xml::openElement( 'ul', $attribs ); + if ( $this->mCaption ) { + $s .= "\n\t
  • {$this->mCaption}
    • "; + } $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"; - } + # 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" . '
    ' + "\n\t\t" . '
  • ' + . '
    ' . $thumbhtml . "\n\t\t\t" . '
    ' . "\n" . $textlink . $text . $nb . "\n\t\t\t
    " - . "\n\t\t
    "; - if ( $i % $this->mPerRow == $this->mPerRow - 1 ) { - $s .= "\n\t"; - } + . "\n\t\t
    • "; ++$i; } - if( $i % $this->mPerRow != 0 ) { - $s .= "\n\t"; - } - $s .= "\n"; + $s .= "\n
"; return $s; } diff --git a/maintenance/tests/parser/parserTests.txt b/maintenance/tests/parser/parserTests.txt index fe718d761c..88c77d12e7 100644 --- a/maintenance/tests/parser/parserTests.txt +++ b/maintenance/tests/parser/parserTests.txt @@ -6607,48 +6607,44 @@ image4 |300px| centre * image6 !! result - - - - - - - - - - - -
+
    +
  • Image1.png
    -
+
+
  • Image2.gif

    ||||

    -
    • +
    +
  • Image3
    -
    • +
    +
  • Image4

    300px| centre

    -
    • +
    +
  • Image5.svg

    http://///////

    -
    • +
    +
  • * image6
    -
    • + + !! end @@ -6662,37 +6658,33 @@ image:foobar.jpg|some '''caption''' [[Main Page]] image:foobar.jpg     !! result - - - - - - - - - - -
    Foo Main Page
    +
      +
    • Foo Main Page
      • +
    • Nonexistant.jpg

      caption

      -
    +
    +
  • Nonexistant.jpg
    -
    • +
    +

  • some caption Main Page

    -
    • +
    +
  • Foobar.jpg
    -
    • + + !! end @@ -6706,40 +6698,38 @@ image:foobar.jpg|some '''caption''' [[Main Page]] File:Foobar.jpg     !! result - - - - - - - -
    +
    +
    +
  • Nonexistant.jpg

    Nonexistant.jpg

    -
    • +
    +

  • Foobar.jpg
    some caption Main Page

    -
    • +
    +
    • + + !! end diff --git a/skins/common/shared.css b/skins/common/shared.css index 34975cd5f7..e64609ebe0 100644 --- 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; -- 2.20.1