Add Download Button in prettyPhoto Plugin

Question

I would like to add a download button link for the full-sized image on the prettyPhoto lightbox when a user views a photo on my site.

Currently I use the prettyPhoto Media plugin on my site, and I have also used this code (taken from this post) in order to allow prettyPhoto to view a smaller image than the full sized image in galleries so the loading time will be better:

function oikos_get_attachment_link_filter( $content, $post_id, $size, $permalink ) {

    // Only do this if we're getting the file URL
    if (! $permalink) {
        // This returns an array of (url, width, height)
        $image = wp_get_attachment_image_src( $post_id, 'large_image_size' );
        $new_content = preg_replace('/href=\'(.*?)\'/', 'href=\'' . $image[0] . '\'', $content );
        return $new_content;
    }
}

add_filter('wp_get_attachment_link', 'oikos_get_attachment_link_filter', 10, 4);

But, since prettyPhoto now is only viewing a thumbnail size of the image, viewers cannot get the full-sized images (around 2000px wide), hence the desire to add a download button, so they can download the full image to use.

Thanks!

Answer 1

So the best option for me, being that I am not a programmer, was just to change plugins. I used this plugin and got the results I needed (it already has a download link).

Answer 2

Well programmers can make use of the prettyPhoto documentation and modify the plugin after the wp_footer() call in footer.php:

1. Add the button via image_markup

2. Give prettyPhoto a little height boost after adding the Download button.

   <?php wp_footer();?>
   <style>.download-btn{ margin-top: 10px; padding: 5px; background: #ccc; float: left }</style>
   
   <script>
   jQuery(document).ready(function() { 
      jQuery("a[rel^='prettyPhoto']").prettyPhoto({
           image_markup: '<img id="fullResImage" src="{path}" /><span class="download-btn"><a href="{path}">Download</a></span>',
           changepicturecallback: function(){
               jQuery(".pp_content").css("height", $(".pp_content").height() + jQuery(".download-btn").outerHeight() + 10);
           }
       });
   });
   </script>
   
   </body>
   </html>
   

Answer 3

I solved this editing the prettyPhoto.js file in the img_markup attribute.

Change this

image_markup: '<img id="fullResImage" src="{path}" />',

To this

image_markup: '<img id="fullResImage" src="{path}" /><a class="pp_download" href="{path} download"><i class="enotype-icon-download"></i></a>',