Will this entry-point be Minerva-only or will there be a corresponding set of desktop designs?

I say we target Minerva for the initial implementation's hook, with an eye toward using the same horizontal gallery entry point on the desktop article space or sidebar later once we settle on final desktop designs.

(Eg, just make sure the styles for the gallery aren't Minerva-specific and can be dropped into the appropriate part of the desktop skin.)

Change #1171728 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/extensions/ReaderExperiments@master] [WIP] Image Browsing: introduce basic front-end code

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

In T400078#11024841, @egardner wrote:

Will this entry-point be Minerva-only or will there be a corresponding set of desktop designs?

cc @bvibber

Good question! Thanks for raising this. I worked through the wider viewport version of this this morning. Assuming we have a minimum of 3 images on the articles where we show the gallery, this is what it would look like:

With infobox:

No infobox:

Notes:

• • The good news is that the content area on our wider viewport interface isn't that much wider because we "save" a column for the infobox. So I think the design works more or less as is as long as it's in line with the content area.
• If we only have 3 images and no explore link for now, it might look a bit funny because we don't have enough images to "fill" the width of the page.
  • We might consider only showing the gallery on articles that have enough images to take up the space of the content area. So the logic looks something like

galleryWidth = numImages x (175 + margin); 
If galleryWidth <= contentWidth, 
  showGallery == false;

• We should consider hiding the gallery when the reader has the "wide" preference enabled for width on Vector, or just accept that it'll look a bit funny.

I'll add these wide designs to the ticket description.

Another requirement idea that we encountered while implementing dark mode. We need to copy the thumbnail template's background colour logic for images that have transparent backgrounds so the images remain visible in dark mode. This came up a lot with black svg illustrations in dark mode on dark backgrounds.

Change #1172425 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/extensions/ReaderExperiments@master] [WIP] ImageBrowsing: Introduce Carousel component

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

Is anyone aware of a properly-sanctioned way (MW hook or similar API) to inject an arbitrary <div> element just below the hatnote (so inside of the article content)?

Also, @JScherer-WMF in practice we're going to see the first 2 or 3 images from the Infobox twice on most pages here – once in the infobox and once in the carousel. Is this a problem?

Change #1171728 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] Image Browsing: introduce basic front-end code

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

Change #1172425 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] ImageBrowsing: Introduce App, Carousel and CarouselItem components

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

@egardner - what QA would we like for this task? Is there anywhere (patchdemo, beta cluster) we can look at it as a part of signoff

Here are some screenshots of the entry point in desktop and mobile scenarios:

For now we are just placing the carousel at the top of the page as opposed to trying to interact with the infobox. We can spend some time refining the layout once more of the functionality is in place for the Image Browsing prototype as a whole.

Test wiki created on Patch demo by LWatson-WMF using patch(es) linked to this task:
https://a7d75d00b0.catalyst.wmcloud.org/wiki/Main Page

Test wiki on Patch demo by LWatson-WMF using patch(es) linked to this task was deleted:

https://a7d75d00b0.catalyst.wmcloud.org/w/