fesomia

<p>This plugin allows adding custom captions to the featured images of the posts. It works with both Gutenberg and the classic editor.</p>
<p>That’s how it works:</p>
<ul>
<li>If no caption is indicated, the plugin will display the generic caption defined in the Media Library.</li>
<li>If a caption is indicated, the plugin will display this caption instead of the generic caption defined in the Media Library.</li>
<li>If no caption is indicated and no legend exists in the Media Library, none will be displayed (obviously).</li>
</ul>
<p>The plugin also allows to:</p>
<ul>
<li>Hide the caption, either the original from the Media Library or the custom one.</li>
<li>Entirely hide the featured image in the public view, without having to de-attach it from the post.</li>
<li>Configure several options to modify the styles used in the caption.</li>
<li>Output the text of the caption anywhere in your theme using a custom function.</li>
<li>Output the featured image with caption inside your content with a shortcode.</li>
</ul>
<p>For maintaining a semantic code, this plugin writes the caption in a <code><figcaption></code> label.</p>
<p><strong>New in version 1.21</strong>: Compatibility with Divi themes. This is an experimental feature to allow the plugin to work with Divi, as many users requested. Note that it may not work for all layouts, and that since it replaces the function divi uses to show featured images, when enabled it may potentially cause problems with older versions of Divi or if the core theme is updated. As always, it may also be necessary to add custom css to your theme to show the captions the way you want</p>
<h4>Format</h4>
<p>The caption will adopt the format specified for the <code><figcaption></code> element and the wp-caption-text CSS class, which is common in WordPress themes.</p>
<h4>Usage</h4>
<p>The plugin works out of the box. To start using it, all you need to do is activate it and play with the new options in your edit page. For advanced users, you will found a special settings page for fine-tuning some details.</p>
<p>Go to <em>Settings > FSM Custom Featured Image Caption</em> to set up the CSS and HTML parameters:</p>
<ul>
<li><strong>CSS for caption text</strong>: Choose one of the options to modify the class/styles that will be used in the caption container (by default is wp-caption-text). Note that you can indicate more than one class separated with spaces.</li>
<li><strong>Allow HTML code</strong>: Check it if you want to parse the caption text as HTML if you need the browser to parse HTML tags instead of showing them. Keep in mind that incorrect HTML code or orphan tags can break your layout.</li>
<li><strong>Allow shortcodes</strong>: Check it if you want to parse the shortcodes present in the caption text. Note that if the shortcode returns HTML it will not be filtered, regardless of the “allow html code” option state; also, complex shortcodes output may alter your layout. When activated, you can write the shortcode you want to use in the caption box in the usual way, i.e. : <code>Venetian landscape [myshortcode option1="text"]</code></li>
<li><strong>Show image captions in lists</strong>: Disabled by default. Check if you want to show the caption when the featured image appears in lists, i.e. in a category page, in a widget with latest posts, etc. Note that some themes may add containers around the image (i.e. a link tag) witch can conflict with the aspect of the caption.</li>
<li><strong>Enable compatibility with Divi themes</strong>: Disabled by default. Allows the plugin to work with Divi. Please read the description and the FAQ sections for more info about this option</li>
</ul>
<h4>Shortcode</h4>
<p>We’ve added a shortcode that allows you to put the featured image (and it’s caption) in your page. Just write <code>[FSM_featured_image]</code> anywhere in the content edit box of your post or page to display it. You can also select the size of the image with the parameter “size”. Note that defined image sizes may differ between WordPress themes. The defaults are these: thumbnail, medium, medium_large, large and full.</p>
<p>By using the shortcode, the plugin will try to remove the featured image from your theme’s default position to prevent it from appearing twice. Anyway, this is as this is an experimental feature and results may fluctuate. It also will not appear in lists.</p>
<p>Note that the usage of the shortcode is not related to the “Allow shortcodes” option in the settings page.</p>
<p>Usage example: <code>[FSM_featured_image size=thumb]</code></p>
<h4>For developers</h4>
<p>The plugin comes with two public functions that allow you to get or output the featured image caption of the current post anywhere in your template.</p>
<p>Once the plugin is activated, use <code><?php get_FSM_featured_image_caption()?></code> to return a string containing the text that you can assign to a variable or <code><?php the_FSM_featured_image_caption()?></code> where you like the caption be displayed.</p>
<p>Both functions accept parameters passed inside an array with the following keys:</p>
<ul>
<li><strong>tag</strong>: The tag (without brackets) you want to use as a container. By default is <code>div</code>. If set to false, it will remove it and will return the caption text.</li>
<li><strong>class</strong>: The name of the class/classes you want to use for the container. Use spaces to separate them. Empty by default.</li>
<li><strong>style</strong>: The CSS styles to be used in the container tag. Empty by default.</li>
<li><strong>force_visibility</strong>: When set to true, it ignores the hide caption option defined by the post editor. Useful for displaying your caption in a different place, but showing the featured image. Default: <code>false</code>.</li>
<li><strong>allow_html</strong>: like in the settings page, if set to true, allows the browser to parse the HTML code inside the caption text, else shows it as plain text. Default: <code>false</code>.</li>
<li><strong>allow_shortcodes</strong>: again the same behaviour than in the settings page. Default: <code>false</code>.</li>
<li><strong>ignore_original_caption</strong>: stops using captions defined in the media library as a substitution when the caption field is empty. Default: <code>false</code>.</li>
</ul>
<p>Usage example: `php<br />
the_FSM_featured_image_caption( array(‘tag’ => ‘p’, ‘class’ => ‘class1 class2’, ‘style’ => ‘color: red;’, ‘allow_html’=> true, ‘allow_shortcodes’=>true );</p>
<pre><code>In Gutenberg themes, the plugin generates a nested <figure> tag. If you need to ensure the resulting HTML code is syntactically proper, you can try using this filter in your theme functions.php file: add_filter('render_block_core/post-featured-image', 'FSMCFIC_featured_image_block_fix', 10, 2);`
</code></pre>
<h4>Translations</h4>
<p>The plugin comes up with three complete translations:</p>
<ul>
<li>English (en)</li>
<li>Spanish (es_ES)</li>
<li>Catalan (ca)</li>
</ul>
<p>You can contribute to translating it into more languages at https://translate.wordpress.org/projects/wp-plugins/fsm-custom-featured-image-caption/</p>
<h4>Coming soon</h4>
<ul>
<li>More options for selecting the text to be used as the caption, allowing to choose amongst image Title / Caption / Alt Text / Description and custom text.</li>
<li>Options to fine-tune the shortcode.</li>
<li>Have more ideas? We are open to hearing!</li>
</ul>


FSM Custom Featured Image Caption

It works nicely as intented and the different features are interesting. Great plugin.

Handy and useful features

Allows adding custom captions to the featured images of the posts.

huntermaster

<p>Image Formatr is a simple plugin that goes through all the content images on<br />
posts & pages, and with zero user changes:</p>
<ol>
<li>gives them a standardized thumbnail format using CSS</li>
<li>puts a caption underneath each one using the title</li>
<li>makes them linked so they popup in full size</li>
</ol>
<p>Thumbnails are not generated, but will be used if available in the media library.<br />
This plugin is driven by the <a href="http://www.no-margin-for-errors.com/projects/prettyPhoto/" rel="nofollow ugc">prettyPhoto</a><br />
library so we could call this plugin a prettyPhoto integration plugin.</p>
<p>*Note: Supports images on <strong>Flickr</strong>.</p>
<h4>Usage</h4>
<p><em>This only applies to the images you put in your content, not theme graphics.</em></p>
<pre><code><img
  src="/images/picture.jpg"
  class="alignright"
  title="A sample caption"
  link="http://example.com/"
  hint="Image borrowed from example.com"
/>
</code></pre>
<p>After the plugin runs, the output to the browser looks like:</p>
<pre><code><div class="img alignright">
  <a
    href="/images/picture.jpg"
    rel="prettyPhoto[main]">
    <img
      src="/images/picture.jpg"
      title="Image borrowed from example.com" alt=""
      width="140" height="90"/>
  </a>
  <div style="width: 100%;">
    <a href="http://example.com/" target="_blank">A sample caption</a>
  </div>
</div>
</code></pre>
<h4>Documentation</h4>
<p>You can find plugin documentation at http://warriorself.com/blog/about/image-formatr/</p>
<h4>Features</h4>
<ul>
<li>Standardizes all thumbnails without altering posts</li>
<li>Supports displaying images from Flickr: <img flickr=”1234567890″<br />
title=”The magnificent Ceiba at the Archaeological Site of Palenque.”></li>
<li>Generates image captions using the image <code>title</code> or <code>alt</code></li>
<li>Integrates WordPress media library thumbnails</li>
<li>Gives popups for WordPress gallery images (adjust priority setting to 12)</li>
<li>Shows all content images on the blog as small thumbnails<br />
(does not create new thumbnails but can use Media Library for thumbs)</li>
<li>Allows for fine-grained control of each image’s format</li>
<li>Zooms image to large size when clicked using the<br />
<a href="http://www.no-margin-for-errors.com/projects/prettyPhoto/" rel="nofollow ugc">prettyPhoto</a><br />
library</li>
<li>Outputs standard XHTML compliant markup</li>
</ul>
<h3>Gallery Support</h3>
<p>To get WordPress Gallery images to popup, this plugin must run at a priority<br />
greater (later) than the [gallery] shortcode which runs at priority 11.  Therefore<br />
set the <code>priority</code> setting to 12 in the Administration Options.</p>
<h3>Overrides</h3>
<p>The actions of the plugin are enabled and disabled with administration settings<br />
but can be overridden on each individual image.</p>
<ul>
<li><strong><code>usemysize</code></strong> – true/false – <em>true = do not ignore an image width and height</em></li>
<li><strong><code>usemya</code></strong>    – true/false – <em>true = do not ignore a parent anchor tag</em></li>
<li><strong><code>nocap</code></strong>     – true/false – <em>true = do not create a caption</em></li>
<li><strong><code>nofx</code></strong>      – true/false – <em>true = no popup effect</em></li>
<li><strong><code>link</code></strong>      – string url – <em>make the caption a link to the url</em></li>
<li><strong><code>hint</code></strong>      – string txt – <em>this will be the new image title</em></li>
<li><strong><code>asis</code></strong>      – true/false – <em>true = don’t change nuthin</em></li>
<li><strong><code>group</code></strong>     – string txt – <em>separate popup slideshows</em></li>
<li><strong><code>thumb</code></strong>     – string url – <em>image thumbnail</em> (version 0.9.7)</li>
<li><strong><code>page</code></strong>      – single/!single/front/!front – <em>page filtering</em> (version 0.9.7)</li>
</ul>
<p>If you want to surround an image with an anchor tag <code><a></code>, then you should add<br />
a <code>usemya</code> attribute within the image tag or else your anchor will be ignored<br />
and replaced.  If you do not want the popup effect at all, add a <code>nofx</code> attribute<br />
to the image.  If you do not want any caption, you can specify <code>nocap</code>, or just<br />
leave the title blank. And to have the plugin completely ignore an image and<br />
output the content directly from the post, use the <code>asis</code> attribute.</p>
<p><strong>Example</strong></p>
<pre><code><a href="http://www.example.com/">
<img
  src="/images/picture.jpg"
  title="Click to visit website"
  nocap="true"
  usemya="true"
/></a>
</code></pre>
<p>Note: concerning the <em>true/false</em> overrides, do not include “false” parameters<br />
like <code><img usemya="false"></code>, i.e these overrides should only include the attributes<br />
for which you want to designate a “true” value.</p>
<h3>Credits</h3>
<p>Image Formatr is Copyright 2014 <a href="mailto:sroth77@gmail.com" rel="nofollow ugc">Steven Almeroth</a> and<br />
licensed under a GPL license.</p>
<p>Based on: <a href="https://wordpress.org/extend/plugins/image-caption/" rel="ugc">image-caption</a><br />
by <a href="http://www.channel-ai.com/blog/" rel="nofollow ugc">Yaosan Yeo</a>.</p>
<p>PrettyPhoto: The JavaScript<br />
<a href="http://www.no-margin-for-errors.com/projects/prettyPhoto/" rel="nofollow ugc">Image thumbnail viewer</a><br />
library by Stephane Caron is licensed under GPLv2.</p>
<h3>Website</h3>
<p>More information, including how to contact me, is available at<br />
<a href="http://warriorself.com/blog/about/image-formatr/" rel="nofollow ugc">warriorself.com</a>.</p>
<h3>Translations</h3>
<ul>
<li>If you would like to contribute a translation of the administration settings<br />
screen please have a look at the<br />
<a href="https://plugins.svn.wordpress.org/image-formatr/trunk/languages/image-formatr.pot" rel="nofollow ugc">.pot</a><br />
file and post to the <a href="https://wordpress.org/support/plugin/image-formatr" rel="ugc">support forum</a><br />
of <a href="mailto:sroth77@gmail.com" rel="nofollow ugc">e-mail to me</a>.</li>
</ul>
<h3>ToDo List</h3>
<ul>
<li>add screenshot of output image with caption</li>
</ul>
<h3>Wish List</h3>
<ul>
<li>phone-home feature, activate/deactivate stats helper with version number</li>
<li>add admin option for html/xhtml <img/> closing tags</li>
<li>add admin option for moving title attribute to alt attribute should it<br />
overwrite an existing alt?</li>
<li>debug mode could show images not found and whatnots and profiling stats</li>
<li>change [flickrset id=”1234″] to [flickr set=”1234″]</li>
<li>change [flickr pid=”123″] to [flickr img=”123″]</li>
<li>show “the_content” ordering vis a vie wp-hooks-filters-flow.php<br />
Priority 8 :<br />
    WP_Embed->run_shortcode()<br />
    WP_Embed->autoembed()<br />
Priority 10 :<br />
    wptexturize()<br />
    convert_smilies()<br />
    convert_chars()<br />
    wpautop()<br />
    shortcode_unautop()<br />
    prepend_attachment()<br />
Priority 11 :<br />
    capital_P_dangit()<br />
    do_shortcode()<br />
Priority 20 :<br />
    ImageFormatr->filter()</li>
</ul>
<h3>Bug List</h3>
<ul>
<li>bug: add_settings_field() <label for=”s”> not <label for=”stdthumb”><br />
work-around is to only use unique single char id fields defined as constants</li>
</ul>


Image Formatr

Formats all content images on a page / post giving them captions and popups.

FSM Custom Featured Image Caption vs Image Formatr