Generate links on all images in posts - is there a hook?

Question

I am looking for a way to replace all links on images. Currently when a user clicks an image it links to the source file.

What I want it to do is to ink to: example.com/editor=12&image=filename.jpg So every that encloses an should link to that site with the image filename so it can be loaded in an editor.

First, I tried to replace the links with ajax, but that does not work with lazy load and also seems less practical. The second thing I tried is to filter the $content of the post. But with that I can only replace the /wp-content/uploads/ part. I can’t filter for the first part (http://) which leads to also all src being replaced and no image shows up at all.

Is there any way to do this by hooks maybe?

Kind regards Patrick

Update: So this works for images added as single image, however it seems not to work on gallery shortcode even if the priority is 12 and short-codes are already executed.

add_filter('the_content', 'my_content_filter', 12);
function my_content_filter($content) {

if ( is_single() )

   $content = str_replace('<a href="https://example.com/wp-content/uploads/','<a href="https://example.com/?editor=82&image=',$content);
  return $content;
}

Answer 1

I've been working on a similar problem, so found a possible solution.

The issue is the 'inline' images, as opposed to images that are attachments (like a gallery), is that there is no filter for the_content() that deals specifically with the images tag. (At least, I haven't found it yet.)

So, you need to use some regex to search the_content() for the image tag, and get each image into an array, then you can loop through the image array as you need.

I found this code here: https://gist.github.com/jlord/3680879 . I have not tested it, but it may give you a start:

 // get the content from the post
  $posttext = $post->post_content;
  // next line added to process any shortcodes in the content string
  $posttext = do_shortcode($posttext);
  // make a variable for the string you're looking to find in all of the content
  $regex = '~<img [^\>]*\ />~';
  // find the first things inside of the second thing and put them inside of the third thing
  preg_match_all($regex, $posttext, $images);
  // redefine posttext as itself minus all the things you found 
  $posttext = preg_replace($regex, '', $posttext);

  // now posttext has no images, and $images is an array of image tags
  // have fun, o lord of jellies ?> <!-- this part is from issac -->

<div id="thePostText">
  <?php 
  // now spit out all the text
  echo $posttext; ?>
</div>

<div id='thePostImages'>
  <?php 
  // for each image, wrap it in the p tags and spit it out 
  foreach ( $images[0] as $image ) {
  echo '<p class="aPostImage">' . $image . '</p>'; } ?>
</div>

You would place this code in a template, inside The Loop. Then use that template for the post output.

I'd be interested if this helps. It may save you a couple of hours on the googles, which is how I found it.

Added

Since the $posttext = $post->post_content; is not using the_content() (which also processes shortcodes), then shortcodes in the post content may not be processed. In particular, the [gallery] shortcode is not processed. I suspect other shortcodes are also not processed.

So I added an additional line to the above code:

$posttext = do_shortcode($posttext);

to get shortcodes processed in the content string.

Added

The above code doesn't necessarily allow you to hook into the output of gallery images. So I found this code here, which can be used as a starting point: How to get post attachments in gallery post format template

if ( get_post_gallery() ) :
        $gallery = get_post_gallery( get_the_ID(), false );

        /* Loop through all the image and output them one by one */
        foreach( $gallery['src'] as $src ) : ?>
          <li> <img src="<?php echo $src; ?>" class="gallery-slider" alt="Gallery image" /> </li>
          <?php
        endforeach;
    endif;

Note that all of the above are code snippets, not an end-to-end solution. But they may be helpful to put together a solution that meets your needs.

Answer 2

I dont know why, but this works for gallery as well :D @Rick Hellewell, thank you very much for your help on this topic!

add_filter('the_content', 'my_content_filter', 12);

function my_content_filter($content) {

    global $post;

    if ( is_single() ) {

        // For gallery
        $content = str_replace("<a href='https://example.com/wp-content/uploads/","<a href='https://example.com/?editor=82&image=",$content);

        $content = str_replace('<a href="https://example.com//wp-content/uploads/','<a href="https://example.com/?editor=82&image=',$content);


    }

    return $content;

}