Forcing the use of the tag <figure>in WordPress</figure>

Post on PHP?! Is, who has seen and who sees you. Open-mouthed smile

Well, it’s been a while that I use WordPress as my blogging platform and Windows Live Writer as my editor of posts.

One thing is undeniable: this combination (WP + WLW) is fantastic! However, there’s a little something that is to be desired: there is no easy way to put subtitles on my images! Is there any way to make WP + WLW generate semantic HTML to properly display the subtitles of my images?

Of course you have!

First, an example for you to understand what I’m talking about:

Caption being displayed under an image in a post
550

Technically speaking, there is nothing exceptional about it. This image above is constructed as follows, using the new tag semantics <figure>of HTML 5:</figure>

<figure></figure>
    <img style="..." title="Disco virtual montado no host. style="..." title=""></img style="..." title="Disco virtual montado no host.> Note that in this example the volume is the G: "src =" ... "alt =" ... ">
    <figcaption>Virtual disk mounted on the host.</figcaption> Note that in this example the volume is the g:

That is, to insert an image with caption in a post would suffice I entered this HTML, put a little bit of CSS for formatting and get the desired result. However …

413

So these are the “acceptance criteria” that I set to consider acceptable a solution to include images with captions in my posts:

  1. Work for any image uploaded in Windows Live Writer;
  2. Use the title (title attribute) informed on Alt Text dialog box to generate the tags <figure>/ <figcaption></figcaption> </figure>
  3. Do not use client-side code (like jQuery or the like).

That is, I don’t want to change my workflow. I’m used to always use the dialog box Alt text (“Alt text“) to inform the attributes title and alt of my images. Even if the caption of an image does not need to be identical to its title, it makes sense that are equal. Why I chose to use title to automatically generate the caption.

To include the title and the alternate text for an image, you must first select the image (1), click the Alt text (2) and then report the values of the attributes alt and title (3) (4)
451

As I commented, I don’t want to use jQuery (or any other client-side solution). In addition to the inherent problems of performance (after all would need to handle the gift to create the tag <figure>on-the-fly, which would lead to a costly recalculation of the layout of the page), I’d lose the semantics of the page.</figure>

Yes, there are already solutions for creating images with captions in WordPress using semantic HTML. However, they assume the use of posts WordPress native editor, which obviously won’t take my calls. The way it’s going to be writing a little. PHP!

The solution

“Igor loves PHP?!” Well, not really. Smile But to be honest I have nothing against. As happens most often with tools to prioritize flexibility and convenience, PHP has gained a bad reputation (mostly unfairly, IMHO) because of bad programmers who have made bad use of the tool.

The solution I created (inspired by this post) is actually quite simple: when WordPress has finished generating the HTML of the post (but before it sends it to the browser) I change occurrences of <img> to involve them in tags <figure>with <figcaption>.</figcaption> </figure> And to get to know the right moment to change the HTML of the post, use the filter the_content in WordPress.

WordPress Filters

Filters, in the universe WordPress, are “hooks” for various events that occur during execution of WordPress. These filters are the central part of the mechanism of plugins WordPress, because it is through them that the plugins can interfere with the native behavior of the WP.

This is what makes the filter the_content, according to the documentation of WordPress:

The “the_content” filter is used to filter the content of the post after it is retrieved from the database and before it is printed to the screen.

To create a filter, you must:

  1. Create a child theme (outside the scope of this post);
  2. Activate the theme-son;
  3. Include code in your functions.php file filter.

So here we go: once you have created your child theme, add the following code at the end of your functions.php file:

https://gist.github.com/igoravl/3d5b759a358986fa94494ccf5ac96e1f

And that’s it. A bit of Regex magic and voila! Images with captions, using the new tag <figure>!</figure>

Formatting

Though now we’re generating the correct HTML, there’s a good chance that your WordPress template do not have CSS code needed to format your new tags. Thus follows as an example of formatting the CSS I’m using on my site based on template Twenty Sixteen. If you are using another template, you should adjust the CSS to your need.

figcaption {
    font-style: italic;
    font-size: small;
    text-align: center;
    margin-bottom: 1:00 pm;
}

Figure {
    text-align: center;
}

Conclusion

PHP is the language that I more domino – on the contrary, I have only a minimum of knowledge, totally beginner. However, as a user of WordPress, I’ve been involved increasingly in understanding how it works your plugins API. Is cool as hell!

If you know PHP and WordPress and noticed something wrong in my solution, please do not hesitate to criticize! Oh, and if you decide to use in your site, tell then here in the comments if it worked or not.

A hug,
Igor

Author: Igor Abade

Igor Abade V. Leite ([email protected]) is a Visual Studio ALM MVP (Microsoft Most Valuable Professional) since 2006. Speaker at various Software Development community events (TechEd Brasil, The Developers’ Conference, DevOps Summit Brasil, Agile Brazil, Visual Studio Summit, QCON among others), has also written articles in magazines and websites such as MSDN Brazil. Since March/2011 is one of the owners of Lambda3, a Brazilian consulting company specialized in ALM, software development and training. Visit his blog about VS ALM at http://www.tshooter.com.br/ and follow him on Twitter @igorabade.

Leave your comment!