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 — no reflow, 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