brandcaul

Hi Andrew,

I see what you’re saying. I have tried to edit the CSS and it’s just not getting pulled through onto the live site. Thats why I though the PHP might not be allowing any CSS to be applied the Pin it button?

Oops! https://addblog.co.za/

And here’s the code:

PHP:

function insert_pinterest($content) {
	global $post;
	$posturl = urlencode(get_permalink()); //Get the post URL
	$pindiv = '<div class="pinterest-button">';
	$pinurl = '<a target="_blank" href="https://pinterest.com/pin/create/button/?url='.$posturl.'&media=';
	$pindescription = '&description='.urlencode(get_the_title());
	$pinfinish = '" class="pin-it"></a>';
	$pinend = '</div>';
	$pattern = '/<img(.*?)src="(.*?).(bmp|gif|jpeg|jpg|png)"(.*?) \/>/i';
  	$replacement = $pindiv.$pinurl.'$2.$3'.$pindescription.$pinfinish.'<img$1src="$2.$3" $4 />'.$pinend;
	$content = preg_replace( $pattern, $replacement, $content );
	//Fix the link problem
	$newpattern = '/<a(.*?)><div class="pinterest-button"><a(.*?)><\/a><img(.*?)\/><\/div><\/a>/i';
	$replacement = '<div class="pinterest-button"><a$2></a><a$1><img$3\/></a></div>';
	$content = preg_replace( $newpattern, $replacement, $content );
	return $content;
}
add_filter( 'the_content', 'insert_pinterest' );

and the CSS I want for the image that I edited using Firebug:

.pinterest-button {
    position:relative;
    width: auto;
    float: left;
    overflow: hidden;
}
.pinterest-button img {
    display: block;
}
.pinterest-button .pin-it {
    display: block;
    width: 105px;
    height: 105px;
    background: url("/wp-content/uploads/2012/07/pinterest-badge.png") repeat scroll 0 0 transparent;
    z-index: 9999;
    bottom: 25px;
    right: 500px !important;
    position: relative;
}
.pinterest-button .pin-it {
    display:none;
}
.pinterest-button:hover .pin-it {
    display: block;
}

Here’s the code I used

function insert_pinterest($content) {
	global $post;

	$posturl = urlencode(get_permalink()); //Get the post URL
	$pinspan = '<span class="pinterest-button">';
	$pinurl = '<a target="_blank" href="https://pinterest.com/pin/create/button/?url='.$posturl.'&media=';
	$pindescription = '&description='.urlencode(get_the_title());
	$pinfinish = '" class="pin-it">';
	$pinend = '</span>';
	$pattern = '/<img(.*?)src="(.*?).(bmp|gif|jpeg|jpg|png)"(.*?) \/>/i';
  	$replacement = $pinspan.$pinurl.'$2.$3'.$pindescription.$pinfinish.'<img$1src="$2.$3" $4 />'.$pinend;
	$content = preg_replace( $pattern, $replacement, $content );

	//Fix the link problem
	$newpattern = '/<a(.*?)><span class="pinterest-button"><a(.*?)><\/a><img(.*?)\/><\/span><\/a>/i';
	$replacement = '<span class="pinterest-button"><a$2><a$1><img$3\/></span>';

	$content = preg_replace( $newpattern, $replacement, $content );
	return $content;
}
add_filter( 'the_content', 'insert_pinterest' );

[Moderator Note: Please post code or markup snippets between backticks or use the code button. As it stands, your posted code may now have been permanently damaged/corrupted by the forum’s parser.]

.pinterest-button {
	position:relative;
	width: auto;
	float: left;
	overflow: hidden;
}

.pinterest-button img {
	display: block;
}

.pinterest-button .pin-it {
	display: block;
	width: 105px;
	height: 105px;
	background: url('/wp-content/uploads/2012/07/pinterest-badge.png');
	z-index: 9999;
	bottom: 25px;
	right: 25px;
	position: absolute;
}
.pinterest-button .pin-it {
	display:none;
}
.pinterest-button:hover .pin-it {
	display: block;
}

.entry-header .entry-title {
    font-size: 36px;
}

div.sharedaddy .sd-content {
    float: left !important;
    margin: -2px 0 0;
    width: 82.125%;
}

Is there any way I can fix it without editing the css for the pinterest button?

Well i place the text under the image like you normally would but no matter what it always pulls it to the right around the images?

Hey guys,

Can anyone help me with this?

Thanks for the fix. Worked for me to.

Ok, never mind I fixed it. I needed to go into the actual twenty eleven theme and not the child theme.

Thanks for the help guys!

Oh ok I see. lol!

Well I’ve made the changes aclymyth but that “–>” is still there. I’m not sure what else to do? Is the only place to possibly fix it in the index.php file? I have a index.php in my child theme.

Thanks for the replies.

I’ve edited the code from Esmi but I’m not sure where to find the code from alcymyth? I still have the random “–>” there.

The other thing is how did you guys manage to see the PHP code of my site? Would be really helpful to know because I use firebug in Firefox to edit CSS at the moment.

Thanks!