From 02d95fc21b5fb0368021f0513f9638ee1f9d9f3d Mon Sep 17 00:00:00 2001
From: "Mark A. Hershberger" <mah@users.mediawiki.org>
Date: Tue, 15 Feb 2011 19:39:45 +0000
Subject: [PATCH] * (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.
---
 includes/ImageGallery.php | 17 ++++++++---------
 skins/common/shared.css   |  4 ++++
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/includes/ImageGallery.php b/includes/ImageGallery.php
index 62f9eedb36..7148e407da 100644
--- 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 aec2e07431..19f5d4ae96 100644
--- 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%;
-- 
2.20.1