mark l chaves

<p>With <strong>GIC</strong>, you can display the title, caption, and description image attributes. You can also change/filter the rendering HTML to whatever you want.</p>
<p>After installing and activating GIC, write your filter and add the WordPress <a href="https://codex.wordpress.org/Gallery_Shortcode" rel="nofollow ugc">Gallery shortcode</a> to your page.</p>
<p>If you’ve been <em>dreaming</em> of writing a filter to customise the gallery image captions, then this plugin is for you.</p>
<p><a href="https://streetphotography.blog/gallery-image-captions-demo/" rel="nofollow ugc">Visit the live demo page.</a></p>
<h4>Motivation</h4>
<p>The default WordPress gallery shortcode will only display the <strong>caption</strong> from the media’s attachment metadata. Sometimes it’s nice to display more like the title—even the description.</p>
<p>The <strong>GIC plugin</strong> overrides the WordPress gallery shortcode function to create a <a href="https://developer.wordpress.org/plugins/hooks/" rel="nofollow ugc">hook</a>. With this <em>hook</em> you can do a little bit more than just displaying the caption.</p>
<p>Some premium themes hide the caption completely. This leaves photography lovers like me scratching their head and spending precious time cobbling together makeshift caption blocks.</p>
<h3>Usage</h3>
<h4>Custom Filter For Displaying Captions</h4>
<p>The <strong>crux</strong> of this plugin is the ability to filter the gallery image caption. The <code>galimgcaps_gallery_image_caption</code> hook makes this possible.</p>
<p>For the usage examples below, this is the filter used.</p>
<pre><code>/**
 * Custom Filter for Gallery Image Captions
 *
 * Note: Avoid altering captiontag, selector, and itemtag.
 */
function mlc_gallery_image_caption($attachment_id, $captiontag, $selector, $itemtag) {

    $id = $attachment_id;

    // Grab the meta from the GIC plugin.
    $my_image_meta = galimgcaps_get_image_meta($id);

    /**
     * Here's where to customise the caption content.
     * 
     * This example uses the meta title, caption, and description. 
     * 
     * You can display any value from the $my_image_meta array. 
     * You can add your own HTML too.
     */
    return "<{$captiontag} class='wp-caption-text gallery-caption' id='{$selector}-{$id}'>" .
            "Title: " . $my_image_meta['title'] . "<br>" .
            "Caption: " . $my_image_meta['caption'] . "<br>". 
            "Description: ". $my_image_meta['description'] . 
        "</{$captiontag}></{$itemtag}>";

}
add_filter('galimgcaps_gallery_image_caption', 'mlc_gallery_image_caption', 10, 4);
</code></pre>
<p>Feel free to use this filter code as a starter template. After activating the GIC plugin, add the code above to your child theme’s <code>functions.php</code> file. Rename the function and tweak the return string to suit your needs.</p>
<h4>New Filter To Get Custom Fields</h4>
<pre><code>/**
 * New GIC 1.4.0 filter for custom meta fields.
 */
function gic_add_custom_fields( $image_meta, $attachment ) {

    // This is how you add a custom fields to the array that
    // GIC uses to display captions.
    $image_meta['credit_text'] = $attachment->credit_text;
    $image_meta['credit_link'] = $attachment->credit_link;

    return $image_meta;
}
add_filter( 'galimgcaps_image_meta', 'gic_add_custom_fields', 10, 2 );
</code></pre>
<p>To use these two custom fields, your <code>galimgcaps_gallery_image_caption</code> would look something like this.</p>
<pre><code>function mlc_gallery_image_caption($attachment_id, $captiontag, $selector, $itemtag) {

    $id = $attachment_id;

    // Grab the meta from the GIC plugin.
    $my_image_meta = galimgcaps_get_image_meta($id);

    // If there's credit, give it where it's due complete with link.
    $credit = $my_image_meta['description'] ? 
        "<br><strong>Credit</strong>: <a style='display: inline;' href='" . 
        $my_image_meta['credit_link'] . 
        "'>" . $my_image_meta['credit_text'] . "</a>" . "<br>" : 
        '';

    /**
     * With GIC 1.4.0 you can also add custom media attachment fields
     * to your captions.
     */
    return "<{$captiontag} class='wp-caption-text gallery-caption' id='{$selector}-{$id}'>" .
            "<strong>Caption</strong>: " . $my_image_meta['caption'] . "<br>" . 
            $credit .
            "</{$captiontag}></{$itemtag}>";

}
add_filter('galimgcaps_gallery_image_caption', 'mlc_gallery_image_caption', 10, 4);
</code></pre>
<p><strong>Since v1.2.0</strong>, GIC automatically adds an <strong>Image ID</strong> column to your WordPress Media Library. This is to help you add the image IDs to your GIC shortcodes.</p>
<p><a href="https://ps.w.org/gallery-image-captions/assets/screenshot-11.png" rel="nofollow ugc">See where GIC automatically adds an Image ID column to your WordPress Media Library.</a></p>
<p><strong>New in v1.4.0</strong>, GIC support custom media attachment fields.</p>
<h3>Usage Example 1</h3>
<h4>Shortcode</h4>
<p>For starters, let’s use a</p>
<pre><code><p></p> 
</code></pre>
<p>tag for the caption tag.</p>
<pre><code>[gallery size="full" columns="1" link="file" ids="114" captiontag="p"]
</code></pre>
<h4>Styling</h4>
<p>Let’s override the generated styles with our own style for one particular image.</p>
<pre><code>/* Targeting a Specific Image */

/* Add some padding all around. */
#gallery-1 .gallery-item, 
#gallery-1 .gallery-item p {
    padding: 1%;
}

/* Add some moody background with typewriter font. */
#gallery-1 .gallery-item {
    color: whitesmoke;
    background-color: black;
    font-size: 1.25rem;
    font-family: Courier, monospace;
    text-align: left !important;
}
</code></pre>
<h3>Usage Example 2</h3>
<h4>Shortcode</h4>
<p><strong>A 2 column x 1 row gallery with large size images using an H4 for the caption.</strong></p>
<pre><code>[gallery size="large" columns="2" link="file" ids="109,106" captiontag="h4"]
</code></pre>
<p><strong>A 3 column x 1 row gallery with medium size images using a blockquote for the caption.</strong></p>
<pre><code>[gallery size="medium" columns="3" link="file" ids="109,106,108" captiontag="blockquote"]
</code></pre>
<p>Did you notice that we are using</p>
<pre><code><blockquote></blockquote> 
</code></pre>
<p>in the second shortcode? Let’s give it try just for <em>kicks</em>.</p>
<h4>Styling</h4>
<pre><code>/* 1. Style the H4 Used in the Caption Example */
h4 {
    color: #777777 !important;
    font-size: 1.2rem !important;
    font-family: Helvetica, Arial, sans-serif !important;
}

/* 2. Help Align the Blockquote */
#gallery-3 .gallery-caption {
    margin-left: 40px !important;
}
</code></pre>
<h3>Responsive CSS Example</h3>
<p>I recommend adding the following media queries if you use galleries with more than one image. The two media queries below will stack 2×1 and 3×1 galleries into a 1 column x n rows or 2 column x n rows  as needed.</p>
<pre><code>/* Media Queries for Responsive Galleries */

/**
 * Styling based on article "How To: Style Your WordPress Gallery"
 * by Par Nicolas.
 * 
 * https://theme.fm/how-to-style-your-wordpress-gallery/
 */

/* Mobile Portrait Breakpoint - 1 column */
@media only screen and (max-width: 719.998px) {
    .gallery-columns-2 .gallery-item,
    .gallery-columns-3 .gallery-item { 
     width: 100% !important; 
  }
}

/* Mobile Landscape and Tablet Breakpoints - 2 columns */
@media only screen and (min-width: 720px) and (max-width: 1024px) {
  .gallery-columns-3 .gallery-item { 
     width: 50% !important; 
  }
}
</code></pre>


Gallery Image Captions (GIC)

Gallery Image Captions (GIC) allows you to customise WordPress gallery image captions.

David Gwyer

wpgoplugins

<p>The most popular HTML sitemap available for WordPress just got even simpler to use. You can now build and preview your sitemap visually directly in the post editor!</p>
<p>There’s no need to use confusing and complicated shortcodes anymore. Constant swapping back and forth between the editor and front end is a thing of the past.</p>
<p>Simple Sitemap helps improve your SEO ranking by automatically generating an HTML sitemap of your content. Add a full sitemap literally in seconds. No coding or setup required. Works straight out of the box and includes plenty of flexible customization options.</p>
<p>The latest version now also includes a responsive tabbed layout option that looks fantastic. We’re super excited to share this with you.</p>
<h4>KEEPS ON GETTING BETTER</h4>
<p>Simple Sitemap is a well-established plugin and has been consistently developed and maintained for several years. It’s currently used on over 75,000 websites.</p>
<p>The big news is that we’ve recently completely overhauled the plugin and added some great new features. Two dedicated editor blocks have been added that allow you to add and edit your sitemap directly inside the new WordPress editor codenamed <a href="https://wordpress.org/gutenberg/" rel="ugc">Gutenberg</a>. You no longer need to leave the editor to preview your sitemap like you do when using shortcodes.</p>
<p>There are also new plugin settings available to determine how parent page links are managed.</p>
<h4>INTRODUCING THE NEW SITEMAP EDITOR BLOCKS</h4>
<p>The two new sitemap blocks have been added to replace the following shortcodes:</p>
<ul>
<li><code>[simple-sitemap]</code></li>
<li><code>[simple-sitemap-group]</code></li>
</ul>
<p>This means you don’t have to remember a long list of obscure shortcode attributes or go hunting in the documentation to see what features are available.</p>
<p>Simply add a sitemap block to the editor and configure the sitemap settings in the block inspector panel to the right. Everything is managed visually and is very intuitive. If you thought the plugin was easy to use before just wait until you try out the new sitemap blocks!</p>
<p>Be prepared to be blown away at just how quick and easy it is to add a sitemap and configure settings.</p>
<h4>SHORTCODES ARE STILL AVAILABLE</h4>
<p>Alternatively, if you’re using an older version of WordPress, or you have the Classic Editor plugin installed, then you can still use shortcodes to display a sitemap. Just add the <code>[simple-sitemap]</code> or <code>[simple-sitemap-group]</code> to any page and the sitemap will be visible when the page is viewed on the front end of your site.</p>
<p>However, wherever possible we recommend you switch to using the new sitemap blocks instead as they are just so much easier to use than shortcodes.</p>
<h4>WHAT’S THIS? TABBED LAYOUT YOU SAY?</h4>
<p>That’s right. We’ve added support for a fully tabbed layout in Simple Sitemap. While a lot of users are happy with displaying a sitemap in one long list you can now optionally display each post type in a separate tab too.</p>
<p>The ordering of sitemap tabs can be controlled via the block inspector panel along with all the other sitemap settings.</p>
<p>The tabs have been implemented via pure CSS and no JavaScript code is needed to render them. This means there’s less to go wrong and the tabs load quicker – they just have a nice snappy rock-solid feel to them.</p>
<p>As a bonus, the tabs are 100% responsive so on mobile devices you can be sure your sitemap still looks great!</p>
<h4>FEATURES GALORE</h4>
<p>Here’s a breakdown of the features included with Simple Sitemap.</p>
<ul>
<li>Build sitemap visually. No Shortcodes needed!</li>
<li>Preview sitemap directly in the editor.</li>
<li>Choose from standard or tabbed layouts.</li>
<li>Beautiful 100% CSS sitemap tabs. (no JavaScript)</li>
<li>Display any number of posts or pages.</li>
<li>List sitemap items in ascending or descending order.</li>
<li>Sort by field. (e.g. title, author, date, ID)</li>
<li>Optionally display post excerpt.</li>
<li>Toggle post type label.</li>
<li>Display individual sitemap items as text or links.</li>
<li>Sitemap shortcodes available as an alternative to blocks.</li>
<li>Plugin settings to manage parent page links.</li>
<li>Intelligent script handling.</li>
<li>Support for multiple sitemaps per page.</li>
</ul>
<p>Scripts used by the plugin will only be added to posts or pages that contain a sitemap block. They will NOT be added globally to all pages which would be inefficient.</p>
<p>Also, each sitemap has a unique ID assigned to it which is used to namespace the CSS. This enables you to add multiple sitemaps to a page and apply different settings/styles to each one.</p>
<h4>ADVANCED SITEMAP FEATURES</h4>
<p><a href="https://wpgoplugins.com/plugins/simple-sitemap-pro/" rel="nofollow ugc">Simple Sitemap Pro</a> has been designed for sitemaps that need more features and advanced configuration options.</p>
<p>It contains more blocks, more shortcodes, and plenty of user interface controls for fine-grained control over exactly what’s included in the sitemap and how it’s rendered. This added flexibility allows you to generate almost any type of sitemap you can think of!</p>
<p>In particular the following <a href="https://wpgoplugins.com/plugins/simple-sitemap-pro/" rel="nofollow ugc">additional features</a> are available.</p>
<ul>
<li>Add any custom post types to a sitemap.</li>
<li>List posts sorted by any custom taxonomies.</li>
<li>Tabbed layout is fully responsive.</li>
<li>Advanced tabbed layout options.</li>
<li>Set dynamic max, and responsive breakpoint, widths for tabs.</li>
<li>Horizontal sitemap layout.</li>
<li>Exclude specific posts/pages.</li>
<li>Include ONLY specified posts/pages.</li>
<li>Customize styles via user interface. (e.g. color pickers)</li>
<li>Filter hooks for fine-grain control over sitemap.</li>
<li>2 sitemap blocks (3 more will be added soon).</li>
<li>5 sitemap shortcodes.</li>
<li>Shortcode aliases for quicker entry.</li>
<li>No coding required for customizations.</li>
</ul>
<p>There are plenty of great options to choose from here. To see the full range of sitemap features in action take a look at the <a href="https://demo.wpgothemes.com/flexr/simple-sitemap-pro-demo/" rel="nofollow ugc">live demo</a>.</p>
<h4>ACKNOWLEDGEMENTS & LINKS</h4>
<p>A big thankyou to everyone who uses and supports this plugin. A lot of time and effort has been put into it over the years. We couldn’t do it without your support!</p>
<p>Please consider <a href="https://wordpress.org/support/view/plugin-reviews/simple-sitemap" rel="ugc"><strong>rating</strong></a> the plugin if you find it useful. It only takes a moment but it’s very much appreciated. 🙂</p>
<p>View the <a href="https://demo.wpgothemes.com/flexr/simple-sitemap-pro-demo/" rel="nofollow ugc">sitemap live demo</a> to view all the different types of sitemap available and the various configuration options.</p>
<p>Checkout the <a href="https://wordpress.org/plugins/simple-sitemap/screenshots/" rel="ugc">screenshots</a> below, or click <a href="https://wpgoplugins.com/plugins/simple-sitemap-pro" rel="nofollow ugc">here</a> for more details.</p>
<p>For more top plugins see our <a href="https://www.wpgoplugins.com" rel="nofollow ugc">WordPress plugin site</a>. Why not stop by and say hello, we’d love to hear about your needs for an HTML sitemap or anything else WordPress related.</p>


Simple Sitemap – Create a Responsive HTML Sitemap

I upgraded to the Pro version so that I could have support for custom post types.

Easy to use and does exactly what it says!


Plugin is outdated. Works fine if you're using a classic editor or haven't updated WordPress since 6.5.5. If you've updated to 6.7 or higher, beware. This plugin may break your site. Especially if you utilize WP Blocks. Very disappointing.


Outdated

Create a HTML sitemap and preview directly inside the editor! No more complicated shortcodes. Boost the SEO performance of your WordPress site.

Gallery Image Captions (GIC) vs Simple Sitemap – Create a Responsive HTML Sitemap