getting a “pin it” button on each image

Ok, this works for my site. Each site is different and I'm not responsible as you go and play with things. This should be pretty easy but don't attempt it if you don't want to.

1 – What does this do?

Here's what the final product looks like:
https://andystenz.com/andy/test-php/

This gives you both a quick way to post your images (without having to hard code them) and also the pin button.

2 – Install this plugin

You will need to install the Exec-PHP plugin (plugins > add new > search for it). This isn't mine, it's just needed.

3 – The pin it button

You will want to download the pin button here (right click to save) and put it on your server. Please don't pull it from mine.
https://andystenz.com/images/example/pin-angle.png

4 – The Main Code

[code]
<?php
// WHAT IS THE LAST IMG NUMBER
$LastImage=109;

// WHAT IS THE IMAGE FILE NAME BEFORE THE NUMBER – INCLUDE THE DASH IF NEEDED
$ImageName=”dr-beach-session-“;

// WHERE ARE THEY LOCATED – INCLUDE THE LAST SLASH
$ImagePath=”https://andystenz.com/images/example/”;

// SET YOUR ALT TEXT
$AltText=”Example ALT text for SEO”;

// SET YOUR TITLE TEXT – THIS IS WHAT IS USED ON PINTEREST
$TitleText=”Some Awesome image text”;

// WHAT IS THE BLOG POST ADDRESS
$BlogUrl=”https://andystenz.com/andy/test-php/”;

// DO YOU HAVE ANY GIF IMAGES INSTEAD OF JPGS – PUT THEIR NUMBER HERE, IF NOT JUST LEAVE THE 1
$GifImages=array(1,106);

// WHERE IS THE PIN IMAGE – THIS WON'T CHANGE AFTER YOU SET IT ONCE
$PinImg=”https://andystenz.com/images/example/pin-angle.png”;

// DON'T CHANGE THIS
// THIS IS THE MAGIC

$FirstImage=101;
while($FirstImage<=$LastImage) { if (in_array($FirstImage, $GifImages)) { echo "\"$AltText\"
“;
$FirstImage++;}

else{
echo “\"$AltText\"
“;
$FirstImage++;
}
}
?>
[/code]

It might look confusing, but it's really not ;-)

Basically, each of the first lines is just a bunch of variables. You copy this whole thing into your post and then change the variables you need to. Each time the page runs the script will write out the code. So, unlike my excel file option, this isn't hard coded and can be changed later.

A few things:

  1. Your images need to be in numeric order starting at 101
  2. There is a call for the pin to have a class (a css style) of “pin”. We'll get to that in a little bit.
  3. You will want to put your blog text before or after this code. You can't put it in the middle, UNLESS…
  4. You use this code multiple times on one blog post. So if you had 20 images and then some text and then some more images this could work but in the 2nd version you'd need to also change the FirstImage # (which is in the don't change area).
  5. There is a place for GIFs if you use them (see one of the variables) but I don't have any other image types coded in
  6. If you use a ‘ (apostrophe) in the title text area, put a \ before the ‘ (so \') otherwise the popup won't pop.

5 – Pop Up

For the pop-up to work, you need to copy and paste this code into your header.php file (appearance > edit) and paste just before the </head> tag.

[code]

[/code]

6 – The CSS

And last, the CSS. So this really only works if you have the same width to you CSS images (so storyboard format basically).

This is what my CSS had for all of the images on the blog:

[code]
#content p img{
border: none;
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: -15px;
}

[/code]

So I added two more sections (Appearance > Edit > Stylesheet), a class called pin (that's the img.pin) and then a state for it that's for the mouse over (img.pin:hover). Basically, The opacity and filter:alpha are for the transparency (change together, so .2 is 20, .5 is 50, etc.) The margin-top and left you'll need to play with for your blog. My images are 750px. If you're are 900, maybe you go to 450px and keep doing the trial and error method until it works. Make sure both below are the same with margin-top and left otherwise they will jump all over on mouseover.

The nice thing about setting up your own class is that you're not changing anything else on your site – so you can play around before it goes live (in private blog post).

[code]
#content p img.pin{
border: none;
margin-top: -50px;
position: relative;
left: 345px;
opacity:0.2;
filter:alpha(opacity=20); /* For IE8 and earlier */
}

#content p img.pin:hover{
border: none;
position: relative;
left: 345px;
margin-top: -50px;
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

[/code]

7 – If your CSS is caching…

This isn't maybe needed: CSS is sometimes cached and that can be an issue when you're changing it. To make sure your blog loads the newest CSS, copy and paste this over the current stylesheet call in the header (which normally just has a link to the theme and style.css).

[code]

Leave a Reply

Your email address will not be published. Required fields are marked *