Page MenuHomePhabricator

Use origin parameter to precisely define a center focus position in JavaScript
Closed, ResolvedPublic

Description

An editor can use the following code on a portrait image or another image that is not panoramic:
{{PAGEBANNER:Albert Einstein.jpg|origin=0.125,-0,5}}
The origin corresponds to a vector from the center of the image where top left corner is -1,-1 and bottom right corner 1,1. This defines a banner focal point.

This demonstrates how an origin position can be calculated.
{

Einstein_1921_by_F_Schmutzer_-_restoration.jpg (3×2 px, 3 MB)
}
The client then can center the image at this point. The center point will be in the middle of the banner at all times where it can be shown without whitespace (it's worth considering what happens when an editor uses 1,0 - would it not be centered or would we show whitespace on the left?)

The focus point also allows the rendering of responsive banners that work better on smaller screens.

Event Timeline

Jdlrobson raised the priority of this task from to Needs Triage.
Jdlrobson updated the task description. (Show Details)
Jdlrobson moved this task to Blocked on the Wikidata-Page-Banner board.
Jdlrobson subscribed.
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Change 230050 had a related patch set uploaded (by Jdlrobson):
WPB followup - fine tune banner position using js

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

Jdlrobson set Security to None.
Jdlrobson added subscribers: Mhurd, BGerstle-WMF, Dbrant.

I've added some people from apps who have this same problem. Would be interested in their input and whether this is something with a Parsoid API that would make sense to them. They may have a better idea on storage mechanism/parameters.

Making banners usually involves resizing the image, and sometimes rotating it a bit. I guess further parameters would be needed for this? At least resizing would be very nice to have.

This will just focus on centering. Let's do this and if it seems useful iterate further on it with rotation/resizing :)

Change 230050 merged by jenkins-bot:
WPB followup - fine tune banner position using js

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

Looks great! Not closing till we have client side tests though!