From ccdcfdccd2be182f3f1bf5cecd559394df618ebc Mon Sep 17 00:00:00 2001
From: Arlo Breault <abreault@wikimedia.org>
Date: Wed, 31 May 2023 19:25:42 -0400
Subject: [PATCH] Fix thumb styling on file description page

The styling to date only considered parser contexts, where the page
content language would be set.  However, thumbnails are used in other
places, like the file description page.

Bug: T337804
Change-Id: I23a2c4f812c57cbd7801c4d5aae84ca4d696d542
---
 includes/linker/Linker.php                         |  6 ++++--
 includes/page/ImagePage.php                        |  1 +
 .../mediawiki.skinning/content.media-common.less   | 14 ++++++++++++--
 .../mediawiki.skinning/content.media-screen.less   | 14 ++++++++++++++
 4 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/includes/linker/Linker.php b/includes/linker/Linker.php
index 1ef43244845..17313518949 100644
--- a/includes/linker/Linker.php
+++ b/includes/linker/Linker.php
@@ -812,9 +812,11 @@ class Linker {
 					'img-class' => 'mw-file-element',
 				];
 				// Only thumbs gets the magnify link
-				if ( $rdfaType === 'mw:File/Thumb' && $parser ) {
+				if ( $rdfaType === 'mw:File/Thumb' ) {
 					$params['magnify-resource'] = $url;
-					$parser->getOutput()->addModules( [ 'mediawiki.page.media' ] );
+					if ( $parser ) {
+						$parser->getOutput()->addModules( [ 'mediawiki.page.media' ] );
+					}
 				}
 			}
 			$params = self::getImageLinkMTOParams( $frameParams, $query, $parser ) + $params;
diff --git a/includes/page/ImagePage.php b/includes/page/ImagePage.php
index 8f1dc401f3a..8fc7accec49 100644
--- a/includes/page/ImagePage.php
+++ b/includes/page/ImagePage.php
@@ -485,6 +485,7 @@ class ImagePage extends Article {
 					$linkPrev = $linkNext = '';
 					$count = $this->displayImg->pageCount();
 					$linkRenderer = MediaWikiServices::getInstance()->getLinkRenderer();
+					$out->addModules( 'mediawiki.page.media' );
 
 					if ( $page > 1 ) {
 						$label = $context->msg( 'imgmultipageprev' )->text();
diff --git a/resources/src/mediawiki.skinning/content.media-common.less b/resources/src/mediawiki.skinning/content.media-common.less
index ab9f53f1674..b7298bd747a 100644
--- a/resources/src/mediawiki.skinning/content.media-common.less
+++ b/resources/src/mediawiki.skinning/content.media-common.less
@@ -56,8 +56,6 @@ figure[ typeof~='mw:File/Frameless' ] {
 
 figure[ typeof~='mw:File/Thumb' ],
 figure[ typeof~='mw:File/Frame' ] {
-	margin: 0;  // Maybe belongs in element.css for figure
-	margin-bottom: @margin-bottom-thumb;
 	display: table;
 	text-align: center;
 	border-collapse: collapse;
@@ -71,6 +69,12 @@ figure[ typeof~='mw:File/Frame' ] {
 		}
 	}
 
+	// Default where page content language is not set
+	// Allow to flip
+	margin: @margin-tright;
+	clear: right;
+	float: right;
+
 	// Defaults for page content language
 
 	.mw-content-ltr & {
@@ -176,6 +180,12 @@ figure[ typeof~='mw:File/Frame' ] {
 		 */
 		word-break: break-word;
 
+		// Default where page content language is not set
+		// Allow to flip
+		text-align: left;
+
+		// Defaults for page content language
+
 		.mw-content-ltr & {
 			/* @noflip */
 			text-align: left;
diff --git a/resources/src/mediawiki.skinning/content.media-screen.less b/resources/src/mediawiki.skinning/content.media-screen.less
index c2b541c8dbf..dac79cfa32c 100644
--- a/resources/src/mediawiki.skinning/content.media-screen.less
+++ b/resources/src/mediawiki.skinning/content.media-screen.less
@@ -33,6 +33,13 @@ figure[ typeof~='mw:File/Thumb' ] {
 		width: 15px;
 		height: 11px;
 
+		// Default where page content language is not set
+		// Allow to flip
+		margin-left: 3px;
+		float: right;
+
+		// Defaults for page content language
+
 		.mw-content-ltr & {
 			/* @noflip */
 			margin-left: 3px;
@@ -60,6 +67,13 @@ figure[ typeof~='mw:File/Thumb' ] {
 			position: absolute;
 			bottom: -11px;
 
+			// Default where page content language is not set
+			// Allow to flip
+			right: 6px;
+			background-image: @background-image-magnify-ltr;
+
+			// Defaults for page content language
+
 			.mw-content-ltr & {
 				/* @noflip */
 				right: 6px;