wpplugged

<p>Picnote lets you easily manage and display image credits, attributions, and licenses on your WordPress website. Perfect for photographers, news sites, magazines, and any content creator who needs to properly attribute their images.</p>
<h4>Use Cases</h4>
<ul>
<li>Photography Portfolios: Properly credit photographers and maintain image rights</li>
<li>News & Magazine Sites: Display source attributions professionally</li>
<li>Educational Websites: Maintain academic integrity with proper image citations</li>
<li>Agency Websites: Track and display image licenses across client projects</li>
<li>Content Publishers: Streamline image attribution workflow</li>
</ul>
<h4>Core Features</h4>
<ul>
<li>Add custom annotations (credits, sources) to any image in your media library</li>
<li>Display annotations as overlays on images or below them</li>
<li>Create a list of image credits at the bottom of posts</li>
<li>Global annotations list via shortcode <code>[pn_global_list]</code></li>
<li>Default annotation text to speed up the process of adding new images of the same author</li>
<li>Support for Creative Commons licenses</li>
<li>Predefined styles</li>
</ul>
<h4>Pro Features</h4>
<p>Upgrade to PRO for advanced customization and time-saving features:</p>
<ul>
<li>
<p>Enhanced Customization</p>
<ul>
<li>Custom header tags (h2-h6) for annotation lists</li>
<li>Full appearance control (colors, fonts, spacing)</li>
<li>More predefined styles</li>
</ul>
</li>
<li>
<p>Advanced Control</p>
<ul>
<li>Support for inline and CSS background images</li>
<li>Choose post types for indexing and overlay display</li>
<li>Additional shortcode <code>[pn_list]</code> for flexible placement</li>
</ul>
</li>
<li>
<p>Bulk Management</p>
<ul>
<li>Dedicated image annotations management page</li>
<li>Bulk edit titles, annotations, licenses and links</li>
<li>Quick preview of image usage across your site</li>
<li>Filters to help you find images you are looking for</li>
</ul>
</li>
</ul>
<h4>Easy to Set Up</h4>
<ol>
<li>Install and activate the plugin</li>
<li>Add annotations in your media library</li>
<li>Choose your preferred display style</li>
<li>Optional: Configure global settings and customize appearance</li>
</ol>


Picnote Image Annotations

Add professional source attributions and licenses to images in your WordPress content with overlays and organized lists.

setzer

<p>Side Matter turns footnotes into sidenotes, magically aligning each note in the sidebar next to its corresponding reference in the text. Unlike hyperlinked footnotes, sidenotes don’t require jumping down the page to follow up on each reference; instead, they perch humbly and accessibly beside the material to which they refer.</p>
<p>To use, place the Side Matter widget in your sidebar, then enclose sidenote text in a page or post using the <code>[ref]</code> shortcode, like so:</p>
<pre><code>Here's the text to annotate.[ref]Note text goes here.[/ref]
</code></pre>
<p>To change default settings, use the Side Matter options page linked under the Appearance menu on your admin screen.</p>
<h3>Styling Side Matter with CSS</h3>
<p>Changing the appearance of Side Matter elements—for example, editing your notes’ typeface or indentation—requires using CSS. The simplest way to go about this is to install a custom CSS plugin that will preserve your rules even when Side Matter or your theme is updated. (<a href="https://wordpress.org/plugins/simple-custom-css/" rel="ugc">Simple Custom CSS</a> is a good example.)</p>
<p>Side Matter comes with a set of built-in class selectors. As an example, all sidenote and reference elements may be styled at once using the class <code>side-matter</code>. The following CSS will render all Side Matter elements in blue serif text:</p>
<pre><code>.side-matter {
    color: blue;
    font-family: serif;
}
</code></pre>
<p>Notes and figures may be formatted with greater precision using element-specific class selectors. For example, the following CSS will render reference and list numerals in green and sidenote text in black:</p>
<pre><code>a.side-matter-ref, ol.side-matter-list {
    color: green;
}

div.side-matter-text {
    color: black;
}
</code></pre>
<h4>List of Class Selectors</h4>
<p>Here is a full list of Side Matter class selectors and their uses:</p>
<ul>
<li><code>a.side-matter-ref</code> selects the link elements that enclose in-text reference numerals. Use this class to modify the links’ colors, underline, etc.</li>
<li><code>sup.side-matter-sup</code> selects the <code>sup</code> (superscript) elements that enclose in-text reference numerals. Use this class to modify the numerals’ typographic properties, such as size, offset, and font.</li>
<li><code>.widget_side_matter</code> (note the underscores) selects the widget container element, which may be an <code>aside</code> or a <code>div</code>.</li>
<li><code>ol.side-matter-list</code> selects the <code>ol</code> (ordered list) element that encloses notes in the sidebar, including list numerals.</li>
<li><code>li.side-matter-note</code> selects sidenote <code>li</code> (list item) elements, including each note’s numeral.</li>
<li><code>div.side-matter-text</code> selects the <code>div</code> elements that enclose sidenote text, but not sidenote list numerals. Use this to style sidenote text separately from numerals.</li>
</ul>
<p>Each paragraph within a note is further wrapped in a <code>p</code> tag. However, as they’re generated outside the plugin, these <code>p</code> elements cannot be selected directly using the <code>side-matter</code> class. Instead, select them indirectly, e.g. <code>div.side-matter-text > p</code>.</p>
<h4>Default CSS</h4>
<p>Side Matter sets a few rules by default in the included stylesheet <code>side-matter.css</code>. These rules will generally defer to your theme stylesheet in the event of a conflict.</p>
<p>The first rule removes underlines from reference numeral links:</p>
<pre><code>a.side-matter:link,
a.side-matter:visited,
a.side-matter:hover,
a.side-matter:active {
    text-decoration: none;
}
</code></pre>
<p>The second rule specifies a consistent cross-browser, cross-theme format for superscript figures:</p>
<pre><code>sup.side-matter-sup {
    position: relative;
    top: -0.5em;
    vertical-align: baseline;
    font-size: 0.75em;
    line-height: 0;
}
</code></pre>


Side Matter

Turns footnotes into sidenotes, magically aligning each note in the sidebar next to its corresponding reference in the text.

Picnote Image Annotations vs Side Matter