0

Does anyone know if there is a project going on to add Pinterest to Lightbox or Colorbox?

I've been searching for some way of integrating quick share on Pinterest from my website and can't find any modules that work well. Pin It doesn't even work as far as I can tell and Service Links is difficult to figure out.

Plus the solution for Pinning isn't really the same user experience as tweeting a page or sharing on FB. An overlay on an image in lightbox or colorbox would be huge.

I'm just looking for some decent Pinterest solution for Drupal and am surprised I can't find anything.

1

I used the hook THEME_image_formatter to accomplish this. It would be fairly easy to create a module to do this I just haven't had the time. Anyway here is what I did.

function THEME_image_formatter($variables) {
  $item = $variables['item'];
  $image = array(
    'path' => $item['uri'],
  );

  if (array_key_exists('alt', $item)) {
    $image['alt'] = $item['alt'];
  }

  if (isset($item['attributes'])) {
    $image['attributes'] = $item['attributes'];
  }

  if (isset($item['width']) && isset($item['height'])) {
    $image['width'] = $item['width'];
    $image['height'] = $item['height'];
  }

  // Do not output an empty 'title' attribute.
  if (isset($item['title']) && drupal_strlen($item['title']) > 0) {
    $image['title'] = $item['title'];
  }

  if ($variables['image_style']) {
    $image['style_name'] = $variables['image_style'];
    $output = '';
    // I targeted the blog post image style to add to all blog photos.
    if($image['style_name'] == 'blog_post') {
      $output .= '<div class="blog_post">';

      $media = urlencode(file_create_url($item['uri']));
      $title = variable_get('site_name', '') .' - '. str_replace('+', '%2B', $variables['item']['title']);
      $path = $variables['item']['path'];

      $output .= '<div class="image_info"><div class="copy">';
      $output .= '<a href="//pinterest.com/pin/create/button/?url='. $path .'&media='. $media .'&description='. $title .'" data-pin-do="buttonPin" data-pin-config="none"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>';
      $output .= variable_get('site_name', '') .'<br />'. $variables['item']['title'];
      $output .= '</div></div>';
    }
    $output .= theme('image_style', $image);
    if($image['style_name'] == 'blog_post') {
      $output .= '</div>';
    }
  }
  else {
    $output = theme('image', $image);
  }

  // The link path and link options are both optional, but for the options to be
  // processed, the link path must at least be an empty string.
  if (isset($variables['path']['path'])) {
    $path = $variables['path']['path'];
    $options = isset($variables['path']['options']) ? $variables['path']['options'] : array();
    // When displaying an image inside a link, the html option must be TRUE.
    $options['html'] = TRUE;
    $output = l($output, $path, $options);
  }

  return $output;
}

Just pay attention to the blog_post check and output that I created. I have some javascript that shows and hides the button on hover but you can add that if you want.

Dont forget to add your pintrest JS to the head of your doc.

--Good Luck

0

There is nothing 'out of the box' that will add a 'pin it' button to Colorbox. Placing a pin it button on the overlay means that when the pin it button is used you are pinning the page you were on not the image in the overlay. This means that the Pin It button must be customized to pin the source of the image. This is possible with javasript but as this is different for each CMS I have not seen anyone create a module or plugin to do it.

If you just looking to add a Pin it button to your site in general then the dev version of the 'service links' module says it contain this network, but I have not checked.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.