PDF-Preview inside File-Block

by nicmare

Description

Did you know that WordPress generates a thumbnail image file when uploading a PDF-file? This works when the PHP Extension imagick and Ghostscript is available! It won’t work with GD library! You know they are present and it’s working, when you upload a PDF-file in the media library and you immediately see a thumbnail of the file. Now that thumbnails are available my plugin hooks into the Gutenberg file-block to automagically inserting that thumbnail right before the file block. Besides that it also provides some more options:

a toggle to insert an preview image before the file block
a toggle to link the preview image with the “link to” settings value of the file block
a toggle to link the preview image with itself to the full-size image
a toggle to enable the Lightbox-Effect on the preview image (enable in settings)
a setting to choose the size of the preview image: thumbnail, medium, large
a settings page to define default for image size and “show inline embed” default value and a “height in pixels” default value
when activating the plugin, the “show inline embed” option of the file block gets disabled by default
the preview image link target is based on setting of file-block (“open in new tab”)
adds new block styles to file block with just a few inline css code
this plugins main goal is to be very lightweight and avoid loading any additional assets and saving DOM performance. It just uses 3 files.

This plugin requires imagick and Ghostscript! A good WordPress web hosting has it installed by default.

Installation

Be sure imagick and ghostscript are present in your web hosting
Upload the plugin files to the /wp-content/plugins/pdf-preview-inside-file-block directory, or install the plugin through the WordPress plugins screen directly.
Activate the plugin through the Plugins screen in WordPress
Use the Settings PDF Preview screen to configure the file block defaults
Use the plugin functions through the new options in file block sidebar panel

Screenshots

Plugin usage in Gutenberg Editor
Plugin settings in detail
Additional block style variation
Plugin settings with default values
Usage in Block-Editor
Plugin General Settings

Faq

Will that work on my web hosting server?

You need imagick extension and Ghostscript in order to get auto generated thumbnails preview images of uploaded PDF-files. If so, the plugins settings will work for you.

Does it create a new block?

It just extends the existing file-block. It uses the build in image block for the preview image only.

What are use cases for this plugin?

Imagine uploading restaurant menu pdfs, pricelists, marketing flyers and so on… you do not need to create screenshots by hand and you do not need to upload them. All that is done by WordPress and the plugin.

Does it load any additional assets in the frontend?

No, it just modifies the output of the existing file block and uses all known & existing functions of WordPress. It does not load any css, js or img files. Therefore it is super lightweight and has almost no footprint.

It’s no image preview available – what should I do?

Talk to your web hosting provider if they can install imagick. After that you need to regenerate thumbnails. There are other plugins doing that! And even if not you can still use the plugin default settings for pdf inline embed state and height. You can use the blocks style variation as well.

After placing a PDF-File in the Editor, there is an additional thumbnail in the media library

By default this can not happen. It’s only happening if you enable the Lightbox Support in Plugin Settings. This thumbnail is generated by the plugin in order to seamlessly build the preview including the lightbox effect. If you delete the PDF-file, the plugin will also delete the thumbnail.

Who is the author of PDF Preview?

The WordPress-User “nicmare” vibe coded it. Means he had the idea of the plugin and uses AI to craft the code.

Reviews

Changelog

1.0

first release of the plugin