Custom visualization for specific attachment types


(Mikhail Rybalkin) #1

I’d like to know if it possible to write a plugin, that would treat specific attachment extensions and present an image for them instead of text link? For example it could be a preview image for PDF file, similar to what Gmail is doing. I’m asking as a developer, but I’m not sure that Discourse API allows that. Are there any examples that can be used as a reference?


(Jeff Atwood) #2

You mean for file attachments only? Not links to that document type on the web elsewhere as an URL?


(Michael Brown) #3

Sounds like a suitable job for a onebox-type extension.

Can we see a mockup of what you intend?


(Mikhail Rybalkin) #4

In Gmail if you receive an e-mail with PDF attachment then it is shown with preview.
Here is how it looks:

Actually I wanted to understand how to add functionality to render chemical structures from molecule files, but I thought that an example with PDF is better. I wants to find good forum engine for chemistry-related discussions, and it would be great if a user can insert a file with molecule structure, and the system automatically generate an image for it. For example if I insert benzene.txt (but with.mol extension) (655 Bytes) I’d like to get an image for it automatically:

There are different tools to render molecule images, but I’d like to know if it is possible to do such thing in Discourse.

I can imagine that such kind of extensions can be useful to generate images for different documents: pdf, doc, etc.


(Mikhail Rybalkin) #5

I didn’t think about arbitrary URL, but this could be a nice feature too.


(Brian Adams) #6

This is what one of my community members manually did to generate a preview of the pdf that was uploaded to the topic:

https://virtual-host-discourse.global.ssl.fastly.net/uploads/openrov/_optimized/055/e95/18d2ca006f_690x481.jpg

Agreed it would be nice if onebox was able to do this.


(Sam Saffron) #7

Fancy and quite cool, technically it would not be easy at all :frowning: you would probably have to fork out just to calculate it so you don’t end up with 50 libraries in memory just to do this.


(Brian Adams) #8

Bummer. I saw hoping that since ImagemagicK supports PDFs if you have ghostscript installed it wouldn’t be a huge stretch.


(Sam Saffron) #9

Can you try your hands at a shell script that would achieve this ?

We are lucky with docker, we can carry a lot of dependencies that everyone has.


(Dean Taylor) #10

I had a little go at generating a preview of several PDF’s

Please find below some test samples and linked PDF files.

The output isn’t perfect - I’m not sure about the background colour of pages turning grey - it works well for visuals but really it’s just a side effect.

The command only outputs the first 8 pages of a PDF, the image size is different if there are less pages or orientation or page size within the PDF is different.

##Command

montage -mode concatenate -auto-orient -background white -frame 1 -geometry 170x+10+10 -colorspace RGB test4.pdf[0-7] output4.jpg

##Test 1
http://goo.gl/sy6ESj

##Test 2
http://www.niceic.com/Uploads/File10200.pdf

##Test 3


##Test 4
Barclays Form


(Marcus Baw) #11

I’d like to second the suggestion for (optional?) previewing of uploaded documents in Topics, but I think that rather than image previews, could we actually have the documents in an iframe in the thread? I have used inline PDF.js previews of documents in MediaWiki and users loved it - the documents are right there, instead of behind a further click and another tab opening.

I found this library http://viewerjs.org/ which is based on mozilla’s PDF.js and WebODF by someone else, which allows embedding of this content in line, but because iframes can’t be used in posts, this would have to be part of the UI code


(Michael Downey) #12

Would this slow down page rendering for big files and/or slow connections? If so, it’s a non-starter for us.


(Ted Strauss) #13

It’s been a year since there’s been any activity on this thread. But I wanted to chime in that having PDF embedding in a post would be a big plus for my community. Are oneboxes for external services like scribd available?


(Simon Cossar) #14

I just tried embedding a pdf on a WordPress site (using the PDF Embedder plugin) and then embedded it from there into Discourse with a simple onebox. It seems to work well and is easy to set up.


(Ted Strauss) #15

Is there a thread about making a simple onebox?
Could you share the details of how you did it?


(Simon Cossar) #16

The onebox I’m using is just this plugin.rb file in a folder called pdf-onebox

# name: PDF Onebox

class Onebox::Engine::PDFOnebox
  include Onebox::Engine

      matches_regexp /^(http:\/\/localhost\:8888\/pdf\/.*)/

      def to_html
        "<iframe width=\"670\" height=\"580\" src=\"#{@url}\" frameborder=\"0\" allowfullscreen></iframe>"
      end

end

The only tricky part is getting the matches_regexp right for wherever you are serving the file from.

On WordPress I created a custom page template for embedding the content. The template has no header or footer. To embed pdf content on Discourse, create a new page in WordPress, add the pdf to that page, and then choose the ‘PDF Embed’ template as that pages template. Visit the new WordPress page and copy and past its URL into the Discourse composer. That should give you a onebox.

<?php
/* Template Name: PDF Embed */

?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
		<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
	<?php endif; ?>
	<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<?php

while ( have_posts() ) : the_post();

	the_content();

endwhile;

wp_footer();
?>
</body>
</html>

To make things a bit more organized, I am giving the pdf pages on WordPress a common parent page called ‘PDF’.


Oneboxing of PDFs and other attachments
(Sunny) #17

Would be good if we can just paste a iFrame code from google docs to embed a document and if 3rd party like Scribd are allowed.

Would also be cool if we can use simple html like

<embed src="URL_of_the_PDF_file.pdf" width="550" height="750"></embed>

Is that doable?

Thanks!


(Joshua Rosenfeld) #18

You need to put your HTML inside a code block or else it can’t be seen.

For reference, here is the HTML @Sunny has:

<embed src="URL_of_the_PDF_file.pdf" width="550" height="750"></embed>

(Stephen Chung) #19

PDF previews would be nice, but previews of PowerPoint files will be great!

Can we use something like Docsplit to extract the title, text and thumbnail of documents?

Inside a low-priority background job of course.


(Jeff Atwood) #20

It’s a dangerous and heavy overhead dependency on the server with lots of possible exploits. Would have to be a plugin.