I have updated different variations of Wikipedia previews along with CTA and branding. I will be updating it further where lead images are positioned differently.

From the description

• Attribution and licensing for images

Please add more details or extract it to another task.

A call to action to direct readers to read the full article on Wikipedia
[...]
If an article(with/without thumbnail) has other images then show them when users tap on continue reading.

What is the "continue reading" link doing, is it navigating to the article on Wikipedia or is it showing more images?

@SBisson I have updated the task with some more information, hope that would clear understanding about "continue reading".

It ends with a CTA to read the entire article by visiting mobile Wikipedia.

Should the article open in the Wikipedia app (iOS, Android, KaiOS(?)) if installed on device?

In T250796#6191215, @eamedina wrote:

It ends with a CTA to read the entire article by visiting mobile Wikipedia.

Should the article open in the Wikipedia app (iOS, Android, KaiOS(?)) if installed on device?

I don't think that's within our control. iOS and Android apps try to handle Wikipedia URLs but that's configurable by the users. Deep-linking on KaiOS is not possible.

@SGautam_WMF what should happen to the thumbail when it is not square?

@SBisson we can resize them and align them on the center. I did try with George Clooney's article and this is how it looks like.

@hueitan initial work in on this branch: https://github.com/wikimedia/wikipedia-previews/tree/T250796-layout

Try to think of a way to keep this lightweight but have some sort of component encapsulation so that individual components remain small and unit-testable

The WikipediA logo in the header, is that an image or text?

Do we always use the same image/text, or it changes rely on the language given? for example in french it should be WikipédiA logo

Options :

1. If it is a text that rely on the i18n language file, then it uses the logo as a text, which means we need a list of the logo text in all the language; OR
2. If it is a image, then need a list of the logo image given different languages; OR
3. is there any existing url for us to fetch the logo image?

@hueitan that's an image, I have a list of logo images available with me, I would try to find out if there is a URL for us to fetch it.

@hueitan would this link be helpful for logo images?

https://gerrit.wikimedia.org/r/plugins/gitiles/operations/mediawiki-config/+/refs/heads/master/static/images/mobile/copyright/

Attribution and Images - Please add more details or extract it to another task.

The ticket on image attribution is here T240007

Issue when the article expands up instead of down, it hides the image and wikipedia logo when there's still space below the popup.
According to the description, if there is no more space, it should show the image and show a vertical scroll.

1	2

this is what I found out related to the view port dimensions.
I first saw the issue on my computer with this dimensions.

Good catch @Jpita

In a short discussion with @SGautam_WMF, @SGautam_WMF will make the some changes in description to make it clear what/how to show in desktop and mobile.

@Jpita Would you please create a bug report/ticket on the issue above?

created T257648

@hueitan how are we defining which font-family to use? for instance, in some cases, summary text paragraph is using Lato font whereas in some cases it's Roboto, CTAs(continue reading, read more on Wikipedia) using Noto serif font family. Also, I think our partners might prefer using the same font-family which they are using it on their website. Anyway, I pointed it out to discuss our strategy around it.

Another point I have is regarding the blur rectangle which is there to indicate to read more text, I think visually it looks different, is there any way we can make it look same across the preview? Or if it's difficult then shall we consider using ellipses(...) to indicate more text.

In T250796#6299966, @SGautam_WMF wrote:

@hueitan how are we defining which font-family to use? for instance, in some cases, summary text paragraph is using Lato font whereas in some cases it's Roboto, CTAs(continue reading, read more on Wikipedia) using Noto serif font family. Also, I think our partners might prefer using the same font-family which they are using it on their website. Anyway, I pointed it out to discuss our strategy around it.

Good point! The summary text is currently font-family set to 'Lato', sans-serif;, and no settings for CTAs. I agree that our partners might use their own, we can have our own font-family, then suggest partner to change it to fit into their website.

Another point I have is regarding the blur rectangle which is there to indicate to read more text, I think visually it looks different, is there any way we can make it look same across the preview? Or if it's difficult then shall we consider using ellipses(...) to indicate more text.

We cannot 100% guarantee that the gradient will be on the text (either full/half or partial) due to the different font size / height / space. Yes, we can append the ellipses without the problem here.

Alright, thanks for your inputs, I will check it out with Angie and see what we decide on it.

We will rely on system fonts.

Layout is as expected.