WordPress.org

Ready to get started?Download WordPress

Forums

Add Code Before Each Image (6 posts)

  1. Mitchell Wischmann
    Member
    Posted 1 year ago #

    I'm working on a custom Pin It button for a client. They would like a Pin It button to be displayed when the user hovers over the image in a post.

    To do this, I need to insert some HTML code before each image is displayed in the post.

    Can someone help me come up with a way to insert the following before each image within the post:

    <span class="pinterest-button"><a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php echo catch_that_image(); ?>&description=<?php the_title(); ?>" class="pin-it-post"></a>
    And the following after each image within the post:

    </span>

    An example of what I'm looking to achieve can be found on this site.

    Thanks in advance!

  2. kjodle
    Member
    Posted 1 year ago #

    You will need to use a custom function in your theme's functions.php file to do that. How much php do you know?

  3. A little explanation about my answer below: people are encouraged here to write their own code. It's the best way to learn and this is a self-help forum.

    Okay, now that that's out of the way, that's a kinda neat problem and I like recycling old code. ;)

    Inside the_content() you want all the <img ...> HTML to become wrapped like so:

    <span class="pinterest-button"><a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php echo catch_that_image(); ?>&description=<?php the_title(); ?>" class="pin-it-post"></a>
    <img ...>
    </span>

    And it looks like from the example link you provide that you want to use catch_that_image() from http://www.wprecipes.com/how-to-get-the-first-image-from-the-post-and-display-it to get the img URL to.

    I'm not using that function as I was able to get the image URL via some more regex.

    What you want can be implemented via a plugin and by filtering the_content. Download this code and save it to wp-content/plugins as wrap-img-pinterest.php.

    http://pastebin.com/PJ9S4zWe

    <?php
    /*
    Plugin Name: Pinterest Img Tag Button
    Description: This will wrap images in the_content with Pinterest Button code
    Author: Jan Dembowski
    Author URI: http://blog.dembowski.net/
    Version: 0.1
    
    From http://wordpress.org/support/topic/add-code-before-each-image
    
    */
    
    add_filter( 'the_content' , 'mh_wrap_image' );
    
    function mh_wrap_image( $content ) {
    global $post;
    // Regex to find all <img ... > tags
    $mh_url_regex = "/\<img [^>]*src=\"([^\"]+)\"[^>]*>/";
    
    // If we get any hits then put the code before and after the img tags
    if ( preg_match_all( $mh_url_regex , $content, $mh_matches ) ) {;
            for ( $mh_count = 0; $mh_count < count( $mh_matches[0] ); $mh_count++ )
                    {
                    // Old img tag
                    $mh_old = $mh_matches[0][$mh_count];
    
                    // Get the img URL, it's needed for the button code
                    $mh_img_url = preg_replace( '/^.*src="/' , '' , $mh_old );
                    $mh_img_url = preg_replace( '/".*$/' , '' , $mh_img_url );
    
                    // Put together the pinterest code to place before the img tag
                    $mh_pinterest_code = '<span class="pinterest-button"><a href="http://pinterest.com/pin/create/button/?url=' . urlencode( get_permalink() ) . '&media=' . $mh_img_url . '&description=' . urlencode( get_the_title() ) . '" class="pin-it-post"></a>';
    
                    // Replace before the img tag in the new string
                    $mh_new = preg_replace( '/^/' , $mh_pinterest_code , $mh_old );
                    // After the img tag
                    $mh_new = preg_replace( '/$/' , '</span>' , $mh_new );
    
                    // make the substitution
                    $content = str_replace( $mh_old, $mh_new , $content );
                    }
            }
    return $content;
    }

    Once you've saved that then visit your WordPress dashboard and activate the plugin called Pinterest Img Tag Button.

    This using this plugin the_content gets filtered and any img tags that are found get wrapped in that span. The URL to the post gets urlencode() as well as the title. The &media part did not get encoded in your example so I'm going to assume that's correct.

    This plugin works for images but does not work for gallery images. I'm not sure why, it may need to be applied to another filter besides the_content.

  4. Mitchell Wischmann
    Member
    Posted 1 year ago #

    That is exactly what I was looking for!! Thanks so much!!

    I do have one question though: how can I get it to work if the image is hyperlinked within the post? For example, I installed the plugin on my dev site, and the following is how the output looked when the image was hyperlinked:

    <a href="http://google.com">
    <span class="pinterest-button"></span>
    </a>
    <a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Flocalhost%3A8888%2F%3Fp%3D85&media=http://localhost:8888/wp-content/uploads/Tide-Pods2.jpg&description=P%26%23038%3BG+Products+from+VitaCost" class="pin-it-post"></a>
    <img class="aligncenter size-full wp-image-88519" title="Tide Pods" src="http://localhost:8888/wp-content/uploads/Tide-Pods2.jpg" width="186" height="200">

    when the code should look like:

    <span class="pinterest-button">
    <a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Flocalhost%3A8888%2F%3Fp%3D85&media=http://localhost:8888/wp-content/uploads/Tide-Pods2.jpg&description=P%26%23038%3BG+Products+from+VitaCost" class="pin-it-post"></a>
    <a href="http://google.com">
    <img class="aligncenter size-full wp-image-88519" title="Tide Pods" src="http://localhost:8888/wp-content/uploads/Tide-Pods2.jpg" width="186" height="200">
    </a>
    </span>

    Any ideas? Again, thank you SO much for all of your help! I really appreciate it!

    I realize this is a self-help forum; I'm not that great with PHP yet and am trying to learn more! :)

  5. Hrm. That'll need a slightly different regex to account for the link.

    So you want

    <a href="http://google.com"><img ...></a>

    to become wrapped in the span too like so

    <span class="pinterest-button">
    <a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Flocalhost%3A8888%2F%3Fp%3D85&media=http://localhost:8888/wp-content/uploads/Tide-Pods2.jpg&description=P%26%23038%3BG+Products+from+VitaCost" class="pin-it-post"></a>
    
    <a href="http://google.com"><img ...></a>
    
    </span>

    Blank lines added for illustration. Let me give that some thought, I think I can adjust the regex that grabs the img tags.

  6. As I said earlier, we encourage people to learn this sort of thing but this type of filtering the_content is one of my favorite tricks. ;)

    So here's the solution: run 2 preg_match_all() (second one for the second case) and compare the two. Remove from the first case any hits that are also inside of the 2nd case and the combine the array into $mh_matches.

    Once you've the new array just run though that loop and you're in the "Happy Place".

    All of which is not that difficult to do. But I'm somewhere (or more accurately on the way) to a place where I can't work on that code for ~15 hours or so. Give it a try or perhaps someone else will provide some pointers. ;)

    Edit: Updated the code on http://pastebin.com/PJ9S4zWe so it should now work for <a href=...><img ...></a> tags as well.

Topic Closed

This topic has been closed to new replies.

About this Topic