I'm not sure if this is currently a design task or an eng task.

@atgo I believe it is on eng right now.

add image description

I'm not sure how hard this is to do with the current mobileapp service (doesn't provide image description)

@Nirzar @atgo I've removed the background blurred image for the lead image in the flashcard when printing (see http://flashcard-1.surge.sh/flashcard/Wikimedia), since due to a bug in Chrome, on print a div with a background image and a blur filter, gets reduced to a tiny square, no matter what (I've tried a ton of things).

Removing the blur filter works (expands the background image properly) but it looks like crap because it is not blurred.

See http://flashcard-1.surge.sh/flashcard/Wikimedia and the pdf here

@Nirzar @atgo

• add image description

Lead image that comes from the app service is just the image, without any extra data like the description.

We don't have the image caption available in a consistent way.

@Jhernandez, given that this is a prototype this is fine with me. @Nirzar
what do you think?

@atgo @Jhernandez structure wise it looks good but needs some love. I will post mocks before lunch

https://phabricator.wikimedia.org/T148381#2737104

From T149332 let's call this "Quickfact"

• fixed height for the image for now - 375w 670h
• cut off with ellipses with space for URL
• first 2 sentences have different typesize.
• Visual design spec - https://zpl.io/Z1fHWF3

@atgo done from design....

@Nirzar awesome, dragged to "engineering" column.

@pmiazga @Jhernandez this is also somewhat covered in this other task, which is more engineering focused: T148377

@atgo - tagging this for next sprint for dev

@atgo - tagging this for next sprint for dev

@atgo - tagging this for next sprint for dev

@atgo @Nirzar:

• No infobox then, right?
• No link highlight
• No references sup links ([1], etc)

@Nirzar What happens with short lead paragraphs?

@Jhernandez

yes to all. the short lead paragraphs would have empty space on the bottom.

note on testing protocol: we should pick articles that generate good flashcards.

Sounds like you have this covered, lmk if you have any other questions.

Some advances, see http://flashcard-1.surge.sh/wiki/MediaWiki

Missing right now:

• Blue link stuck at the bottom
• Text overflow ellipsis
• Quickfact logo at the top

This should be fixed and deployed now.

@Jhernandez because the response of the service isn't a filetype jpg, you can't save it to camera roll on iPhone. can someone confirm if you can do it on android? @atgo

@Nirzar - can save to and looks good on Android. Posted a couple of tests below:

@RHo nice!

I was able to save on iPhone, but it didn't do it automatically. Is that possible?

On Android, I was able to open the image but it didn't download to Photos and I couldn't figure out how to add it manually.

I did, however, find a great photo of Moiz when I was looking in the photos for the device, so that's a win :P

Is there any way to show something on the screen during the delay?

@atgo lol i think i know what picture you are talking about. i dont think you can save to camera roll automatically. security concern. i wasn't able to even save it though. kept giving me error.

There was a few seconds of lag after tapping on "Get article summary" before the download started, which made it seem as though it wasn't working at first.
However, it does start downloading the JPEG automatically (no security qs) after that initial lag and the image is then accessible in the Photos > Download folder. Same behavior if I long press and select 'Open in new tab' or 'Download link'.

Quickfacts are saved to 'Download' album in Photos	Longpress prompt

FYI it is working on my Nexus 5 and Moto X (1st gen).

Also as an aside, it would be good to have the filename use the article title if possible rather than "render-<some number string>.jpg" – maybe something like en-Texas.jpg for the Texas article on English Wikipedia.

good point about the name @RHo just tried on android and render-id.jpg or pdf is confusing.

<article_name>_<wikipedia in that language>_QuickFact.jpg would be great

Texas_Wikipedia_QuickFact.jpg

another point on this to improve. maybe not for this round of testing but for future. we need to raise the resolution of the image to 2x or 3x based on device.

@atgo @Nirzar

In the prototypes the download links specify a filename with the title for the download, but that doesn't seem to be respected.

I've done some digging and it turns out the headers from the rendering service specify a filename and inline, so that's why the image displays in the browser instead of downloading, and it has a fixed name over the one specified in the link (mobile browsers behave that way):

Content-Disposition: 'inline; filename="render-1480411267614.jpeg"'

Reference: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition

Ideally that header could/should be changed to Content-Disposition: attachment so that it is just a downloadable, and without a fixed filename (or with a better filename like the page title).

Pinging @GWicke FYI.

@Nirzar The resolution is dependent on the rendering service's DPI configuration. It is probably a standard one so we get the old res version. Definitely a point to keep in mind if we want to use the rendering service for images.

Regarding the lack of feedback when downloading the flashcard, I set it up to open a new tab with the link url to show some feedback of something happening, but chrome mobile for example is choosing to not honor the setting given it is a download link, so the thing happens in the background without any user feedback.

In firefox for example clicking the Get Summary link opens a new tab loading, and then it triggers the file download.

As a website it can't detect when the URL has loaded or the file has finished downloading, so there's not much we can do except change the state of the UI somehow...

Maybe disable the button for a few seconds, show a loading animation for a few seconds, or something like that.

Thanks for the feedback, @Jhernandez. I'm not worried about the filename because these are prototypes, but making a task for when/if we push this to production for that: T151917

For the download, my bigger concern than there not being indicators that it's happening is that it's not automatically downloading on any mobile device that I'm testing on (it does do this on desktop). For Android I can't find the option to download.

We can definitely work on indicators when/if we go to production, but the saving to camera roll is the thing that we're conceptually testing here. Any ideas?

I wrote about the only solution I know of, changing the header in the rendering service to specify attachment instead of inline.

In T148378#2829988, @Jhernandez wrote:

Ideally that header could/should be changed to Content-Disposition: attachment so that it is just a downloadable

In T148378#2830012, @Jhernandez wrote:

Regarding the lack of feedback when downloading the flashcard, I set it up to open a new tab with the link url to show some feedback of something happening, but chrome mobile for example is choosing to not honor the setting given it is a download link, so the thing happens in the background without any user feedback.

In firefox for example clicking the Get Summary link opens a new tab loading, and then it triggers the file download.

I recently read an article about the discovery of an in-the-wild remote jailbreak for i{Phone,Pad}s last summer. The UX of the jailbreak was markedly similar: the user taps a link in an email, a new tab opens in Safari for iOS and then immediately closes, and, more'n likely, the user – "target", more accurately – doesn't dwell on it. Obviously, that UX was chosen because it's the norm. Let's help to make it an exception 💥💥💥

Non-sequiturs abound!

I've done some work to proxy the pdf requests through a server that has a 10m cache for assets (so repeat downloads should work faster) and it rewrites the Content-Disposition to be attachment, so all android and desktop problems should be mostly fixed. iOS will still render the image in the browser because Apple, and there's nothing we can do.

I've also forced a window open when clicking the download buttons so there's more feedback and indication of progress. A blank browser window will open and show loading progress, and it will automatically be closed when the download starts.

Please re-test and see if it is better @atgo.

Thanks @Jhernandez. iOS is still doing iOS (no surprised there).

The Android that I'm on is now downloading, but when it's loading it's
coming up as "jpeg.bin" and not adding to "photos." The OS is finding it
elsewhere though on sharing, so probably not the end of the world. @Catrope
helped me poke at this a bit and may have some more thoughts.

In T148378#2843281, @atgo wrote:

Thanks @Jhernandez. iOS is still doing iOS (no surprised there).

The Android that I'm on is now downloading, but when it's loading it's
coming up as "jpeg.bin" and not adding to "photos." The OS is finding it
elsewhere though on sharing, so probably not the end of the world. @Catrope
helped me poke at this a bit and may have some more thoughts.

On desktop, it's also downloading as "jpeg" in Firefox and "jpeg.jpg" or something like that in Chrome. I believe this is because there's a Content-Disposition: attachment header in the response from the service. The header doesn't specify a file name, so it's inferred from the URL, and the part of the URL before the ? is https://pdf-service-proxy-lepehkpwkj.now.sh/jpeg, so the inferred file name is jpeg.

If you want clicking the link to trigger a file download, then you should keep this header but change it to Content-Disposition: attachment; filename="nameofarticle.jpg". If you do not want clicking the link to trigger a file download, then you should remove the Content-Disposition header entirely.

[2016-12-02 17:13:10 PST] catrope:~$ curl -v 'https://pdf-service-proxy-lepehkpwkj.now.sh/jpeg?accessKey=secret&delay=5&quality=100&url=http%3A%2F%2Fflashcard-1.surge.sh%2Fflashcard%2Fcat&&browserWidth=375&browserHeight=670' -o /dev/null
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0*   Trying 52.9.120.119...
* Connected to pdf-service-proxy-lepehkpwkj.now.sh (52.9.120.119) port 443 (#0)
* found 173 certificates in /etc/ssl/certs/ca-certificates.crt
* found 697 certificates in /etc/ssl/certs
* ALPN, offering http/1.1
* SSL connection using TLS1.2 / ECDHE_RSA_AES_256_GCM_SHA384
* 	 server certificate verification OK
* 	 server certificate status verification SKIPPED
* 	 common name: *.now.sh (matched)
* 	 server certificate expiration date OK
* 	 server certificate activation date OK
* 	 certificate public key: RSA
* 	 certificate version: #3
* 	 subject: OU=Domain Control Validated,OU=PositiveSSL Wildcard,CN=*.now.sh
* 	 start date: Thu, 25 Feb 2016 00:00:00 GMT
* 	 expire date: Fri, 24 Feb 2017 23:59:59 GMT
* 	 issuer: C=GB,ST=Greater Manchester,L=Salford,O=COMODO CA Limited,CN=COMODO RSA Domain Validation Secure Server CA
* 	 compression: NULL
* ALPN, server accepted to use http/1.1
> GET /jpeg?accessKey=secret&delay=5&quality=100&url=http%3A%2F%2Fflashcard-1.surge.sh%2Fflashcard%2Fcat&&browserWidth=375&browserHeight=670 HTTP/1.1
> Host: pdf-service-proxy-lepehkpwkj.now.sh
> User-Agent: curl/7.47.0
> Accept: */*
> 
  0     0    0     0    0     0      0      0 --:--:--  0:00:07 --:--:--     0< HTTP/1.1 200 OK
< Server: nginx
< Date: Sat, 03 Dec 2016 01:27:38 GMT
< Transfer-Encoding: chunked
< Connection: keep-alive
< Content-Disposition: attachment
< Strict-Transport-Security: max-age=31536000; includeSubDomains;
< 
{ [16163 bytes data]
100  117k    0  117k    0     0  15730      0 --:--:--  0:00:07 --:--:-- 27886
* Connection #0 to host pdf-service-proxy-lepehkpwkj.now.sh left intact

I'll modify the proxy to include a proper file name on the header inferred from the url.

@atgo Alright I've fixed it and deployed it all, so it should be as good as we can make it right now.

Give it a spin and ping me back if you need anything else.