Indicate that PDF thumbnail previews are just previews

[helen]

As I test and use the PDF thumbnail preview more (lots of music scores), I find myself feeling a little nervous sometimes when I see the thumbnail and either think I've uploaded just an image or my PDF has gotten chopped off, as there aren't really any indicators about page count or anything like that, only hints in the file name/type that it's a PDF.

I think it'd be great to have some kind of indicator that you are looking at a thumbnail preview and not something that's supposed to be a full representation of the file you uploaded. Would need to decide which places to display this. Hacky example that already made me feel better as a user: ​http://s.hyhs.me/i3Ke

[folletto]

Excellent point. Question: is there any way we can determine the number of pages of the PDF programmatically?
I'm asking because I feel the ideal UI would be that for any PDF with more than one page should have the indicator, and the indicator could be a confirmation of the number of pages, which gives two informations at once: the safety of what has been uploaded, and an indicator of the total pages.

Assuming the above is possible, brainstorming:

1. A "pages" indicator, either just textual or visual or a mix of the two
2. Change some of the texts, like instead of "Attachment Details" "Multi-Page Attachment Details"
3. Just a text as you referred for all the filetypes that are "more" than the thumbnail.

Slightly related: I feel the image should be centered in the area — both vertically and horizontally, at the very least horizontally centered. That would make any contextual text better grouped with the thumbnail as it would align to it instead of the frame borders.

[lukecavanagh]

@folletto

Seems like it possible to determine the number of pages in a PDF file.

​http://stackoverflow.com/questions/14644353/get-the-number-of-pages-in-a-pdf-document

$image = new Imagick();
$image->pingImage('myPdfFile.pdf');
echo $image->getNumberImages();

[kirasong]

I like this idea. Let's start with the notice that @helen has suggested.

I also like the idea of showing the number of pages, but If we move to only reading the first page (which is what the current approach in #38522 takes), I'm not sure if getNumberPages() will still do what we'd want, so it'd need some additional testing and performance checks.

Thinking it's probably best to start with the simplest approach, and go from there.

[kirasong]

Replying to folletto:

Slightly related: I feel the image should be centered in the area — both vertically and horizontally, at the very least horizontally centered. That would make any contextual text better grouped with the thumbnail as it would align to it instead of the frame borders.

Agreed.

[johnbillion]

I think a highly visible link through to the full PDF would also help make it clearer that this is just a thumbnail preview.

[helen]

38717.diff​ is a starter patch to make it quicker for somebody else to pick up on whatever the final decision is about text and appearance (within limit, please, just because of time). The CSS is just for centering, so if not centering anything, we don't need it.

It was originally decided not to futz with centering because of the edit image button and the left-aligned nature of the image edit tools. If that flop back and forth is acceptable (more noticeable with portrait-oriented images), I'm not opposed to centering things. It does look really weird with an icon fallback, but perhaps not any more weird than it currently looks up at the top left.

Screenshots:

[melchoyce]

Looks good to me.

[folletto]

I think it's a good start, shippable.

I'm wondering about the specifics of the wording, maybe we can find something that makes more explicit that it's just the pre-rendered view of the first page of the document?

Brainstorming for the label:

1. Document cover preview
2. Cover preview
3. Cover thumbnail
4. Document preview

The word "Document" might be helpful in hinting it's a kind of media that is different from a standard image, and similarly "Cover" implies both being a first page, as well as a document kind of media.

What do you think?

[helen]

Replying to folletto:

I like "Document preview" quite a bit, agree that using "document" helps understand that it's a different kind of file. "Document cover preview" is slightly unwieldy and in PDFs a cover page is an actual separate concept, which is probably not widely known but may be confusing to somebody who is uploading PDFs to WP.

Per @johnbillion's comment, there could also be a "View full PDF" link or some such underneath instead (or in addition?), although between having a URL field already and perhaps needing to open it in a new window, it may not end up making sense at the moment. Thoughts?

[Presskopp]

I prefer "Document preview". In german, we currently translate "thumbnail" as "Vorschaubild", back to english this would be "preview image", so a "Thumbnail Preview" would make us a bit nervous translating, "Document preview" is much better for that.

[helen]

In 39213:

Media: Clearly indicate that PDF thumbnails are just document previews.

This helps affirm that your upload is fine, and has not been reduced down to the first page or changed into an image. This applies to the attachment details modal in the media library, where media is also now centered in the preview area.

props folletto, helen.
fixes #38717.