Wikidata page banner should make use of object-position
Open, LowPublic
Actions

Assigned To

None

Authored By

	TheDJ
	May 31 2023, 11:52 AM

Description

Much of what wikidata page banner does is now possible with much simpler CSS

.wpb-topbanner .wpb-banner-image {
width: 100%;
height: auto;
max-height: 200px;
object-fit: cover;
min-height: 120px;
}

Then instead of applying transform and margin offsets on a parent item, we should be able to use object-position, for which the values should be determinable based on the difference in the aspect ratios before and after scaling, with initial being center center

We should also add width/height attributes to the initial banner image being served, as this provides aspect ratio to browsers to base their initial layout'ing on.

Details

	Subject	Repo	Branch	Lines +/-
	Initial cleanup of CSS	mediawiki/extensions/WikidataPageBanner	master	+54 -55

Customize query in gerrit

Event Timeline

TheDJ created this task.May 31 2023, 11:52 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 31 2023, 11:52 AM

TheDJ added a project: User-TheDJ.May 31 2023, 11:53 AM

One problem with working on this is that I lack a good set of images and banner function parser function examples, which demonstrate all the different modes. Do you have some old cases lying around @Jdlrobson ?

Change 925014 had a related patch set uploaded (by TheDJ; author: TheDJ):

[mediawiki/extensions/WikidataPageBanner@master] Initial cleanup of CSS

https://gerrit.wikimedia.org/r/925014

gerritbot added a project: Patch-For-Review.May 31 2023, 7:53 PM

bwang added a project: Web-Team-Backlog.Jun 8 2023, 4:25 PM

LGoto triaged this task as Low priority.Jun 8 2023, 5:21 PM

LGoto moved this task from Incoming to Groomed on the Web-Team-Backlog board.

Change 925014 merged by jenkins-bot:

[mediawiki/extensions/WikidataPageBanner@master] Initial cleanup of CSS

https://gerrit.wikimedia.org/r/925014

Maintenance_bot removed a project: Patch-For-Review.Jun 9 2023, 5:10 PM