* (bug 27338) Gallery in 1.17 breaks for audio/video + ogghandler

Patch by DieBuche, who explains the CSS:

    If the image height is lower than the line-height, the margin-top
    is applied to the top of the line.  a very short image will not
    follow for 3-4px laters, thus leading to a bigger distance from
    the top than it should be.  vertical-align:text-top moves the
    picture up, so this problem doesn't happen

I've not tested this, but DieBuche and Derk-Jan Hartman tested and
provided screenshots in the bug.

diff --git a/includes/ImageGallery.php b/includes/ImageGallery.php
index 62f9eed..7148e40 100644 (file)
--- a/includes/ImageGallery.php
+++ b/includes/ImageGallery.php
@@ -156,11 +156,11 @@ class ImageGallery
        }
 
        /**
-       * Add an image at the beginning of the gallery.
-       *
-       * @param $title Title object of the image that is added to the gallery
-       * @param $html  String:  Additional HTML text to be shown. The name and size of the image are always shown.
-       */
+       * Add an image at the beginning of the gallery.
+       *
+       * @param $title Title object of the image that is added to the gallery
+       * @param $html  String:  Additional HTML text to be shown. The name and size of the image are always shown.
+       */
        function insert( $title, $html='' ) {
                if ( $title instanceof File ) {
                        // Old calling convention
@@ -286,14 +286,13 @@ class ImageGallery
                                        $imageParameters['alt'] = $nt->getText();
                                }
 
-                               # Set both fixed width and height. Otherwise we might have problems
-                               # with the vertical centering of images where height<line-size
+                               # Set both fixed width and min-height.
                                $thumbhtml = "\n\t\t\t".
-                                       '<div class="thumb" style="width: ' .($this->mWidths+30).'px; height: ' .($this->mHeights+30).'px;">'
+                                       '<div class="thumb" style="width: ' .($this->mWidths+30).'px; min-height: ' .($this->mHeights+30).'px;">'
                                        # Auto-margin centering for block-level elements. Needed now that we have video
                                        # handlers since they may emit block-level elements as opposed to simple <img> tags.
                                        # ref http://css-discuss.incutio.com/?page=CenteringBlockElement
-                                       . '<div style="margin:'.$vpad.'px auto;">'
+                                       . '<div style="margin:'.$vpad.'px auto 0;">'
                                        . $thumb->toHtml( $imageParameters ) . '</div></div>';
 
                                // Call parser transform hook

diff --git a/skins/common/shared.css b/skins/common/shared.css
index aec2e07..19f5d4a 100644 (file)
--- a/skins/common/shared.css
+++ b/skins/common/shared.css
@@ -780,6 +780,10 @@ li.gallerybox div.thumb {
        margin: 2px;
 }
 
+li.gallerybox div.thumb a.image img {
+       vertical-align: text-top;
+}
+
 div.gallerytext {
        overflow: hidden;
        font-size: 94%;