# PDF Gallery Viewer

**Contributors:** panezio923  
**Tags:** pdf, gallery, responsive, modal, javascript  
**Requires at least:** 6.6  
**Tested up to:** 6.7  
**Stable tag:** 1.3.0  
**Requires PHP:** 7.0  
**License:** GPLv2 or later  
**License URI:** https://www.gnu.org/licenses/gpl-2.0.html  

A simple plugin that creates a responsive PDF gallery with live thumbnail previews and modal PDF viewer.

## Description

PDF Gallery Viewer is a WordPress plugin that allows you to create a beautiful and responsive PDF gallery on your website. It generates a live preview of the **first page of each PDF** directly in the browser using **PDF.js**, without relying on server-side libraries like Imagick. Each document includes a customizable title and a "View" link that opens the full PDF in a **modal lightbox viewer**.

The gallery layout is fully responsive, adapting from a grid view on larger screens to a single-column layout on mobile devices. Perfect for showcasing catalogs, portfolios, reports, and other downloadable documents in a clean and professional layout.

### Font Awesome Integration
Font Awesome 6 is used for professional-looking icons in the Gutenberg block and modal PDF viewer.
- Ensure you are online to load icons from CDN.
- Icons include: delete (trash), navigation (chevrons), zoom, download, close.

### Gutenberg Block Support

PDF Gallery Viewer includes a native Gutenberg block to easily add multiple PDFs to a single gallery without writing shortcodes.

**Block Features:**
- Add multiple PDFs in one block
- Inline title editing
- Drag-and-drop Media Library integration for PDF selection
- Layout selector (grid, list, slider)
- Clean, minimal interface with remove buttons
- Automatically generates the corresponding shortcodes:
  `[pdf_gallery_container layout="grid"]...[/pdf_gallery_container]`

This makes it even easier to manage galleries visually within the WordPress editor.

### Features

- ✅ Thumbnail preview of the first page of each PDF using JavaScript (no server dependencies).
- ✅ Fully responsive layout using Flexbox and CSS Grid.
- ✅ Clean and modern modal viewer with:
  - Navigation between PDF pages
  - Zoom in/out
  - Download button
  - Automatic memory of last page and zoom per PDF (per session)
- ✅ Support for dynamic gallery generation by category, tag, or post.
- ✅ Layout options: Grid / List / Slider (Swiper.js)
- ✅ Simple shortcode system for inserting PDF galleries anywhere.
- ✅ Lightweight and easy to use.

### Usage

To add a PDF to your gallery:

```
[pdf_gallery url="PDF_URL" title="Document Title"]
```

Wrap multiple shortcodes inside a container (optional):

```
[pdf_gallery_container layout="grid"]
[pdf_gallery url="..." title="..."]
[pdf_gallery url="..." title="..."]
[/pdf_gallery_container]
```

To create a dynamic gallery by category:

```
[pdf_gallery_container category="brochures" layout="slider"]
```

### Requirements

- WordPress 6.6 or later
- JavaScript must be enabled
- PDFs must be publicly accessible

## Installation

1. Upload the plugin folder to `/wp-content/plugins/pdf-gallery-viewer/`
2. Activate the plugin via the WordPress admin panel
3. Use the `[pdf_gallery]` shortcode in posts or pages

## Frequently Asked Questions

### Does this plugin require Imagick?

No. All previews are generated directly in the browser using PDF.js.

### Will this work on mobile?

Yes, the gallery and modal viewer are fully responsive.

### Can I display multiple PDFs?

Yes! Use multiple `[pdf_gallery]` shortcodes inside a container.

## 📸 Screenshots

### 🖼️ 1. Responsive gallery grid layout
A clean and flexible grid layout ideal for showcasing multiple PDFs at once.
![Grid Layout](./images/grid.png)

---

### 📖 2. PDF modal viewer with zoom and navigation
Clicking "View" opens the PDF in a modal with page navigation, zoom, and download.
![Modal Viewer](./images/modal-viewer.png)

---

### 🎠 3. Slider layout using Swiper.js
Display your PDFs in an elegant carousel layout for quick browsing.
![Slider Layout](./images/slider.png)

---

### ✍️ 4. Gutenberg block editor with layout selector and media library integration
Easily manage your PDFs inside the block editor with dynamic layout selection.
![Gutenberg Block Editor](./images/gut-block.png)
![Block View](./images/block-view.png)

---

### ✂️ 5. Tooltip and truncated long titles
Titles are truncated and tooltips show the full value, keeping the layout neat.    
![Tooltip Example](./images/tooltip.png)

## Changelog

### v1.3.0
* Added dynamic gallery support by category, tag, and post ID
* Added layout selector: Grid, List, Slider
* Integrated Swiper.js for modern carousel layout
* Added title truncation and tooltips for long PDF titles
* Improved shortcode output and styling consistency

### v1.2.1
* Integrated Font Awesome for block icons and modal controls

### v1.2.0
* Removed Imagick dependency
* Added real-time PDF thumbnail previews using PDF.js
* Introduced modal PDF viewer with:
  - Navigation between pages
  - Zoom in/out
  - Download PDF
  - Session-based memory for last page/zoom
* Added Gutenberg block:
  - Add/edit/remove multiple PDFs in a visual interface
  - Generates shortcodes automatically
  - Live preview and cleaner editing UI

### v1.0.0
* Initial release with responsive gallery layout and static thumbnail support

## Upgrade Notice

### 1.3.0
Added dynamic gallery by category, layout selector, Swiper slider, and improved title truncation.

### 1.2.1
UI enhancement: Font Awesome icons integrated into block and modal viewer.

### 1.2.0
Major upgrade: thumbnails now rendered client-side using PDF.js. Modal viewer added with full controls. Imagick no longer required.