CODEWITHSUNDEEP
htmlpinterest
Ram
Ram

Reputation: 45

Pinit button with unique URL for each image (category page with images linking to post pages)

I am trying to give users the ability to pin posts from category pages:

Functionality: Hover over a post image and the pin button shows up which pins that specific post URL with title pulled from post.

The only way they should be able to pin is clicking the button, clicking anywhere on the image should take the user to the post page itself.

I know I can't have two HREF attributes but I'm stuck - this code is breaking the images entirely and none of the data is being pulled as specified (description, post url, etc).

script async defer src="//assets.pinterest.com/js/pinit.js"></script>

<a data-pin-do="buttonPin" data-pin-hover="true" data-pin-url="<?php the_permalink(); ?>" data-pin-description="<?php the_title(); ?>" href="https://www.pinterest.com/pin/create/button/" href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__('%s', 'minti'), the_title_attribute('echo=0') ); ?>" rel="bookmark">
    <?php the_post_thumbnail(); ?>
</a>

Thank you!

Figured out the solution in case anyone ever needs:

<div class="entry-image">
        <script async defer src="//assets.pinterest.com/js/pinit.js"></script>
        <?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
        <div class="pinbutton" style="position: absolute; top: 10px; right: 10px; display: none;"><a data-pin-do="buttonPin" data-pin-hover="true" data-pin-media="<?php echo $feat_image; ?>" data-pin-url="<?php the_permalink(); ?>" data-pin-description="<?php the_title(); ?>" href="https://www.pinterest.com/pin/create/button/"></a></div>
        <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__('%s', 'minti'), the_title_attribute('echo=0') ); ?>" rel="bookmark">
            <?php the_post_thumbnail(); ?>
        </a>
    </div>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        $('.entry-image').mouseenter(function() {
            $(this).children('.pinbutton').fadeIn('fast');
        }); 
        $('.entry-image').mouseleave(function() {
            $(this).children('.pinbutton').fadeOut('fast');
        });
    });
    </script>
    <?php } ?>

Upvotes: 0

Views: 300

Answers (2)

Ram
Ram

Reputation: 45

The solution requires some js/css and (in this case) wordpress calls:

<div class="entry-image">
        <script async defer src="//assets.pinterest.com/js/pinit.js"></script>
        <?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
        <div class="pinbutton" style="position: absolute; top: 10px; right: 10px; display: none;"><a data-pin-do="buttonPin" data-pin-hover="true" data-pin-media="<?php echo $feat_image; ?>" data-pin-url="<?php the_permalink(); ?>" data-pin-description="<?php the_title(); ?>" href="https://www.pinterest.com/pin/create/button/"></a></div>
        <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__('%s', 'minti'), the_title_attribute('echo=0') ); ?>" rel="bookmark">
            <?php the_post_thumbnail(); ?>
        </a>
    </div>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        $('.entry-image').mouseenter(function() {
            $(this).children('.pinbutton').fadeIn('fast');
        }); 
        $('.entry-image').mouseleave(function() {
            $(this).children('.pinbutton').fadeOut('fast');
        });
    });
    </script>
    <?php } ?>

Upvotes: 0

Stefan Đorđević
Stefan Đorđević

Reputation: 595

I guess answer is waiting for you here: Pinterest Developers

Upvotes: 0

Related Questions