Skip to content

Instantly share code, notes, and snippets.

@jaredatch
Created June 7, 2018 14:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jaredatch/29c6a93ec33bd39ea3d748132c329d7e to your computer and use it in GitHub Desktop.
Save jaredatch/29c6a93ec33bd39ea3d748132c329d7e to your computer and use it in GitHub Desktop.
Pin button overlays for content images
/* Pinterest images */
.pin-it-image {
display: block;
position: relative;
img {
display: block;
}
.circle {
width: 75px;
height: 75px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -37px;
margin-left: -37px;
background-color: red;
color: #fff;
font-family: 'Oswald', Arial, sans-serif;
font-weight: 300;
text-transform: uppercase;
font-size: 18px;
letter-spacing: 2px;
line-height: 74px;
z-index: 9;
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
text-align: center;
}
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(255,255,255,0.4);
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
&:hover {
&:after {
opacity: 1;
}
.circle {
opacity: 1;
&:hover {
background-color: #000;
}
}
}
}
<?php
/**
* Enqueue scripts
*/
function ja_enqueues() {
// Single Post.
if ( is_singular( array( 'post') ) ) {
wp_enqueue_script(
'js-single-post',
get_template_directory_uri() . '/js/single-post.min.js',
array( 'jquery' ),
THEME_VERSION,
true
);
wp_localize_script(
'ja-single-post',
'ja_single_post',
array(
'post_title' => get_the_title(),
'post_url' => get_permalink(),
)
);
}
}
add_action( 'wp_enqueue_scripts', 'ja_enqueues', 20 );
jQuery(function($){
/**
* Pinterest button image overlay
*/
// Add Pinterest link to content images.
if ( $( window ).width() > 700 ) {
$('.entry-content img').each( function( index, el ) {
var $this = $( this ),
media = $this.prop( 'src' );
if ( $this.hasClass( 'no-pin' ) || $this.hasClass( 'alignleft' ) || $this.hasClass( 'alignright' ) ) {
return;
}
if ( $this.is( ':hidden' ) ) {
return;
}
if ( $this.parent().is( 'a' ) ) {
return;
}
var title = encodeURI( ja_single_post.post_title ),
url = encodeURI( ja_single_post.post_url ),
link = '<a href="https://pinterest.com/pin/create/button/?url='+url+'&media=' + media + '&description=' + title + '" class="pin-it-image" title="Pin this image"></a>';
$this.wrap( link ).after( '<span class="circle">Pin It</span>' );
});
}
// Click trigger to new image Pinterest links.
$( document ).on( 'click', '.pin-it-image', function( event ) {
event.preventDefault();
window.open( $( this ).attr( 'href' ), '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=750,height=550') ;
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment