seamonsterdeneb

A spinnaker is a special type of sail that is flown in front of the main sails. It’s packed away when not in use, but when the wind is right, it can be unfurled to provide a powerful boost. This plugin is named Spinnaker because it allows you to keep your images and PDFs neatly tucked away, ready to be “unfurled” into a beautiful, accessible lightbox when your users need them.
Spinnaker is a lightweight, modern, and highly accessible plugin that turns any image or PDF link into a fully-featured dialog lightbox. It’s built with accessibility as a priority, ensuring a seamless experience for users with keyboards and screen readers.
Image Lightbox Features:
<ul>
<li>Converts any <code><img></code> tag into a clickable lightbox trigger.</li>
<li>Displays a large, scrollable version of your image that fills the viewport without forcing double-scrollbars.</li>
<li>Adds scroll-arrow buttons for easy navigation of oversized images.</li>
<li>Supports custom initial image positioning (e.g., center, top, bottom, left, right).</li>
<li>Displays image credits as a “placard,” with support for links.</li>
<li>Provides a “Download” button for the full-size image.</li>
<li>Fully localizable UI text in Spanish, Russian, Vietnamese, Simplified Chinese, Arabic, Korean, and Somali.</li>
</ul>
PDF Lightbox Features:
<ul>
<li>Converts any <code><a></code> tag pointing to a PDF into a lightbox trigger.</li>
<li>Displays the PDF in an embedded viewer right on your site.</li>
<li>Includes a “Download” button.</li>
<li>Supports page builder modules (like DIVI) where you can only add a class to the container.</li>
<li>Tracks PDF views and downloads, with stats available in the WordPress admin.</li>
<li>Fully localizable UI text in Spanish, Russian, Vietnamese, Simplified Chinese, Arabic, Korean, and Somali.</li>
</ul>
<h3>Usage</h3>
<h3>Image Lightbox</h3>
To make an image open in a lightbox, add the class <code>image-lightbox-trigger</code> to the <code><img></code> tag itself.
For Gutenberg Block Editor: 
Gutenberg wraps images in a <code><figure></code> element. Add the class <code>image-lightbox-trigger-container</code> to the figure wrapper: Select the image block, open the “Advanced” panel in the block settings, and add <code>image-lightbox-trigger-container</code> to the “Additional CSS class(es)” field. For screen reader descriptions, you can use the image’s “Title” field (available in the image block settings). For advanced features like credits and positioning, switch to HTML editing mode.
For Page Builders (like DIVI): 
If you can only add a class to the container/module holding the image, add the class <code>image-lightbox-trigger-container</code> to the container. The plugin will find the first image inside it and turn it into a lightbox.
Optional Attributes (add to the <code><img></code> tag):
<ul>
<li><code>data-description="…"</code>: A longer description for screen readers. Note: Users of Gutenberg and other page builders that don’t allow custom attributes to be added can use the image’s “Title” field. The plugin will automatically use the title text for the screen reader description and remove the title attribute from the image to prevent duplicate announcements.</li>
<li><code>data-credit="…"</code>: The text for the credit placard. Requires HTML editing mode in Gutenberg.</li>
<li><code>data-credit-link="…"</code>: A URL to make the entire credit placard a link. Requires HTML editing mode in Gutenberg.</li>
<li><code>data-position="…"</code>: Set the initial scroll position. Options: <code>top</code>, <code>bottom</code>, <code>left</code>, <code>right</code>, or <code>center</code> (default). Requires HTML editing mode in Gutenberg.</li>
</ul>
Localization: 
To translate the UI text, add a language-specific class like <code>-es</code> (for Spanish) to the trigger class (e.g., <code>image-lightbox-trigger-es</code>).
<ul>
<li>Supported languages: Spanish (<code>-es</code>), Russian (<code>-ru</code>), Vietnamese (<code>-vi</code>), Simplified Chinese (<code>-zh</code>), Arabic (<code>-ar</code>), Korean (<code>-ko</code>), and Somali (<code>-so</code>).</li>
</ul>
Example HTML:
<pre><code><img class="image-lightbox-trigger-es" src="…" alt="…" 
 data-description="Una descripción detallada de la imagen." 
 data-credit="Foto por Jane Doe" 
 data-credit-link="[https://example.com](https://example.com)"
 data-position="right">
</code></pre>
<h3>PDF Lightbox</h3>
To make a link to a PDF open in a lightbox, add the class <code>pdf-lightbox-trigger</code> to the <code><a></code> tag itself.
For Page Builders (like DIVI): 
If you can only add a class to the container/module holding the link, add the class <code>pdf-lightbox-trigger-container</code> to the container. The plugin will find the correct PDF link inside it.
Localization: 
To translate the UI text, add a language-specific class like <code>-es</code> (for Spanish) to the trigger class (e.g., <code>pdf-lightbox-trigger-es</code>).
<ul>
<li>Supported languages: Spanish (<code>-es</code>), Russian (<code>-ru</code>), Vietnamese (<code>-vi</code>), Simplified Chinese (<code>-zh</code>), Arabic (<code>-ar</code>), Korean (<code>-ko</code>), and Somali (<code>-so</code>).</li>
</ul>
Example HTML:
<pre><code><a href="/path/to/file.pdf" class="pdf-lightbox-trigger-es">Directorio</a>
</code></pre>

Spinnaker Dialog Lightboxes

Accessible lightboxes for images and PDFs using the HTML dialog element. Add classes to create instant lightboxes!

John Dorner

Steven Ayers

It is increasingly important for you to make your images meet accessibility standards. Images must have alternative text (alt text) added so that the visually impaired can use screen readers to understand the purpose and context of the image displayed on the screen.
In addition to making your site more accessible, using alt text helps your site rank better in search engines. This is an added SEO benefit for marketers.
Unfortunately, as a site grows, it becomes difficult and time-consuming to edit and maintain image alt text. Fix Alt Text plugin can help you discover where alt text is needed, quickly fix issues, and even force users to input alt text as images are used throughout the site in the future.
<h3>Features:</h3>
<ul>
<li>Find Usage: Easily find all uses of alt text by scanning the site</li>
<li>Find keyword usage: Search for specific keywords used in alt text</li>
<li>Inline Editing: Instantly edit alt text without manually editing and searching through the content of a post, attachment, or custom post type</li>
<li>Detect Issues: Quickly identify issues with your alt text to assist you in ADA compliance</li>
<li>Toggle Features: Control which features are active for maximum flexibility</li>
<li>Tool Access: Control which user roles have access to the plugin</li>
<li>Settings Access: Control which user roles have access to changing settings</li>
<li>Global Settings: In a multisite setup, save time by using global settings and select which sites will inherit those settings</li>
<li>Fully Multisite Compatible: Force sites within the network to use global network settings for easy management</li>
</ul>
<h3>Bonus Features</h3>
<ul>
<li>Privacy: It does not use any 3rd-party tracking</li>
<li>No Sales Pitches: It does not sell or promote any pro plugins</li>
<li>Free: It’s currently and will continue to be a Free plugin!</li>
<li>No Littering: It cleans up after itself if uninstalled or when a blog is removed from a multisite network.</li>
</ul>
<h3>Compatible With</h3>
<ul>
<li>Multisite Installations</li>
<li>WP Gutenberg Editor</li>
<li>WP Classic Editor</li>
<li>PHP Versions 7.4, 8.0, 8.1, 8.2</li>
<li><a href="https://wordpress.org/plugins/where-used/" rel="ugc">WhereUsed</a></li>
<li><a href="https://wordpress.org/plugins/advanced-custom-fields/" rel="ugc">Advanced Custom Fields – ACF</a></li>
<li><a href="https://github.com/humanmade/network-media-library" rel="nofollow ugc">Network Media Library</a></li>
</ul>
<h3>Language Support</h3>
<ul>
<li>English (default)</li>
<li><a href="https://translate.wordpress.org/projects/wp-plugins/fix-alt-text" rel="nofollow ugc">Translate this plugin in your language.</a></li>
</ul>

Fix Alt Text


This is a great little plugin that does exactly what it says on the tin, and does it very well!Fixes a very real world problem we had.Thanks guys.


Amazing And Really Useful Little Plugin

Manage alt text site-wide easily with Fix Alt Text. You can also force users to use alt text when adding images in Gutenberg and Classic editors.

Spinnaker Dialog Lightboxes vs Fix Alt Text