0

I'm setting up a wordpress site for someone who is going to be continually editing and expanding the pages. Right now we have sometimes up to 50 images per page all manually labeled "figure x.x". He wants to be able to add images and have the page automatically renumber the figures so that he doesn't have to update all of the figures each time he adds one. I've read that you can do this through CSS, but he also wants references to the figures in the text update in turn. So that if we have a moment in the text that says, "see figure 1.27" with a link to figure 1.27 it will change if figure 1.27 becomes 1.28, for example.

Is that possible? I haven't found anyone who has done something like this through my searches, but if you know of something that might help, please let me know.

Thank you so much.

0

If the images are always linked and not actually embedded/included on the page itself, you could do it like this:

  1. Determine what post type this needs to happen on. Consider creating a specific post type where the figures always renumber, so that you aren't renumbering on other parts of the site where it might not be desired. Or, consider creating a different Page Template so that you'll only renumber when that particular template is used.

  2. Have the author always link to the figures with the same text - i.e. always have the link text be "see figure" or "See figure". Go back and edit existing links so they are always consistent, and make sure that the words "see figure" are only used within the links you want to number.

  3. Create a JavaScript, which you enqueue only on whatever post type or template you need it on. Using jQuery you can find all links with link text "see figure" and increment a counter so you'll replace the link text as "see figure 1.1", "see figure 1.2", and so on.

The JS is a bit out of scope on this site, but basically you need to select all links ("a" elements) that contain the text "see figure" (or your chosen text), then create a variable to hold your number, then do a foreach loop to replace the link text with "see figure 1.x" and increment x.

  • The downside, of course, is that this only works for visitors with JavaScript enabled. You might be able to run a filter on the_content() so that PHP grabs all the links with text "see figure" and does the same thing the JS would do - this would ensure your actual HTML would be what you want, and everyone would see the correct figure numbers. – WebElaine Apr 25 '18 at 22:07
  • Thanks, but unfortunately I don't think this would work for our project. It's important that the figures be on the page, and I'm also not sure that javascript can be added through our CMS. I appreciate your taking the time to offer help though! – Devin Curtis Apr 26 '18 at 20:27
0

Here's the general approach if you want to have the actual HTML reference the right numbers. Similar to the JS but changes the actual HTML.

  1. Determine what post type this needs to happen on. Consider creating a specific post type where the figures always renumber, so that you aren't renumbering on other parts of the site where it might not be desired. Or, consider creating a different Page Template so that you'll only renumber when that particular template is used.

  2. Have the author always link to the figures with the same text - i.e. always have the link text be "see figure" or "See figure". Go back and edit existing links so they are always consistent, and make sure that the words "see figure" are only used within the links you want to number.

  3. Set up a filter in functions.php to take care of the numbering. This example assumes you are using a custom post type called "figurelist" but you could change your condition to only run when a particular Page Template is used.


// callback function to add number: 1.1, 1.2, etc.
function figure_count($matches) {
    static $i = 1;
    return 'see figure 1.' . $i++ . '<';
}
// add a filter on the_content
add_filter('the_content', 'wpse_301865_figure_numbers', 10, 1);
function wpse_301865_figure_numbers($content) {
    // only make changes if this is the main query on a 'figurelist' cpt
    if(is_singular('figurelist') && is_main_query()) {
        // reduce any "see figure" links - change "see figure x.x" to "see figure"
        $content = preg_replace('/see figure (.*?).</', 'see figure<', $content);
        // now add new numbers
        $content = preg_replace_callback('/see figure</', 'figure_count', $content);
    }
}

So again you'll have to be careful about capitalization, but you could adjust the preg_replace to match variable case.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.