MaxtDesign

Features

How It Works

  • 1.Upload a PDF → Plugin extracts first page as WebP preview via ImageMagick
  • 2.Insert embed → Gutenberg block or [pdf_viewer] shortcode
  • 3.Page loads → Preview image displays instantly (< 10KB JS)
  • 4.User activates → Full PDF.js viewer loads on demand
  • 5.Interactive viewing → Navigation, zoom, download, print, fullscreen

    • Server-Side Preview Generation

    When a PDF is uploaded to the Media Library:

  • 1.ImageMagick reads the PDF's first page
  • 2.Renders it at the configured DPI (72/150/300)
  • 3.Converts to optimized WebP format
  • 4.Stores alongside the original PDF in the uploads directory
  • 5.Extracts page count and dimensions as metadata

    • Preview generation runs automatically on upload. For existing PDFs, use Settings → PDF Viewer → Tools → Process Unprocessed PDFs.

    Zero Layout Shift (CLS)

    The viewer container uses CSS aspect-ratio calculated from the PDF's actual page dimensions. The browser reserves the exact space before any content renders, with no reflow and no jump.

    This is measured at the page level: your Lighthouse CLS score is unaffected by PDF embeds.

    Three Load Behaviors

    Click (Default)

    Preview image shown with "View Document" activation button. Full viewer loads only when clicked. Best for:

  • Multiple PDF embeds on one page
  • Performance-sensitive pages
  • PDFs that most visitors won't open

    • Visible (IntersectionObserver)

    Full viewer loads automatically when the embed scrolls into the viewport. Best for:

  • Single primary PDF on the page
  • Below-the-fold embeds that should load before user reaches them

    • Immediate

    Full viewer loads on page load. Best for:

  • Pages where the PDF IS the content (document portals)
  • Single-PDF pages where load time is acceptable

    • Gutenberg Block

    The native block provides:

  • PDF selection from Media Library with live preview
  • All settings in the block sidebar panel
  • Wide and full alignment support
  • Margin spacing controls
  • Anchor and custom CSS class support

    • Block name: maxtdesign/pdf-viewer

    Shortcode

    [pdf_viewer id="123" width="100%" load="click" toolbar="true"]

    Works in classic editor, text widgets, and any page builder that processes shortcodes.

    Toolbar

    The interactive viewer toolbar includes:

  • Page navigation: Previous/next page, page number input
  • Zoom: Zoom in/out, fit-to-width, fit-to-page
  • Download: Download the original PDF file (toggleable)
  • Print: Print the PDF (toggleable)
  • Fullscreen: Enter fullscreen mode (toggleable)

    • Each button can be toggled globally in settings or per-embed in block/shortcode attributes.

    Accessibility

  • Full keyboard navigation (Tab, Enter, arrow keys, Escape)
  • ARIA labels on all controls
  • Screen reader announcements for state changes
  • Respects prefers-reduced-motion for animations
  • Proper focus management when entering/exiting fullscreen

    • Bulk Processing

    Go to Settings → PDF Viewer → Tools to:

  • Process Unprocessed PDFs: Generate previews for all PDFs in your media library that don't have previews yet
  • Clear Cache: Remove cached preview metadata

    • REST API

    The plugin registers endpoints under /wp-json/mdpv/v1/:

  • GET /pdf/{id}: Get PDF info (page count, dimensions, preview URL)
  • POST /pdf/{id}/process: Trigger preview generation for a specific PDF

    • Both endpoints require upload_files capability.

    ConfigurationDeveloper Guide