Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Add image specific WordPress


I have been requested to add image specific email links to images in nggallery. I am working with a thematic child theme.

eg: have a link in each image that can send an email with the image name as the subject of the email.

I would need some help with the code required.

Answers (2)


Christianto answers:

Need additional explanation please..

So the images (certain image) on a page will send an email when user click on it with the image name as subject when user click on it?

Did the image email will be editable by user?
like adding comment, quote/request, contact person, user data like email/phone.

If you want the email contain User Email, comment etc. That means after the image is clicked a form will appear before email is send.

I can done it with jQuery but need to know your page code especially what images ;-)

Georg Schwiemann comments:

Thanks Christianto,
Can I PM you somehow?

Georg Schwiemann comments:

Hi Christiano,
So the images (certain image) on a page will send an email when user click on it with the image name as subject when user click on it?


Did the image email will be editable by user?
like adding comment, quote/request, contact person, user data like email/phone.


Christianto comments:

OK we'll try it...

<strong>1. You have to include jQuery 1.4.2 to your wp head. Check to see if any jQuery is loaded.</strong>
<strong>2. Put this js variable on header.php before wp_head(). this for js wp-ajax url</strong>

<script type="text/javascript">
/* <![CDATA[ */
<?php echo "var georg_ajax_url = '".admin_url('admin-ajax.php')."';";?>
/* ]]> */

<strong>3. Create .js files and copy paste code below to it. Change var tgI to your image class you want to use for email</strong>

* jQuery Tools 1.2.5 - The missing UI library for the Web
(function(a){function t(d,b){var c=this,j=d.add(c),o=a(window),k,f,m,||b.expose),n=Math.random().toString().slice(10);if(g){if(typeof g=="string")g={color:g};g.closeOnClick=g.closeOnEsc=false}var||d.attr("rel");f=p?a(p):d;if(!f.length)throw"Could not find Overlay: "+p;d&&d.index(f)==-1&&{c.load(e);return e.preventDefault()});a.extend(c,{load:function(e){if(c.isOpened())return c;var h=q[b.effect];if(!h)throw'Overlay: cannot find effect : "'+b.effect+
'"';b.oneInstance&&a.each(s,function(){this.close(e)});e=e||a.Event();e.type="onBeforeLoad";j.trigger(e);if(e.isDefaultPrevented())return c;m=true;g&&a(f).expose(g);var,r=b.left,u=f.outerWidth({margin:true}),v=f.outerHeight({margin:true});if(typeof i=="string")i=i=="center"?Math.max((o.height()-v)/2,0):parseInt(i,10)/100*o.height();if(r=="center")r=Math.max((o.width()-u)/2,0);h[0].call(c,{top:i,left:r},function(){if(m){e.type="onLoad";j.trigger(e)}});g&&b.closeOnClick&&a.mask.getMask().one("click",
c.close);b.closeOnClick&&a(document).bind("click."+n,function(l){a(||c.close(l)});b.closeOnEsc&&a(document).bind("keydown."+n,function(l){l.keyCode==27&&c.close(l)});return c},close:function(e){if(!c.isOpened())return c;e=e||a.Event();e.type="onBeforeClose";j.trigger(e);if(!e.isDefaultPrevented()){m=false;q[b.effect][1].call(c,function(){e.type="onClose";j.trigger(e)});a(document).unbind("click."+n).unbind("keydown."+n);g&&a.mask.close();return c}},getOverlay:function(){return f},
getTrigger:function(){return d},getClosers:function(){return k},isOpened:function(){return m},getConf:function(){return b}});a.each("onBeforeLoad,onStart,onLoad,onBeforeClose,onClose".split(","),function(e,h){a.isFunction(b[h])&&a(c).bind(h,b[h]);c[h]=function(i){i&&a(c).bind(h,i);return c}});k=f.find(b.close||".close");if(!k.length&&!b.close){k=a('<a class="close"></a>');f.prepend(k)}{c.close(e)});b.load&&c.load()}||{version:"1.2.5"};{addEffect:function(d,
b,c){q[d]=[b,c]},conf:{close:null,closeOnClick:true,closeOnEsc:true,closeSpeed:"fast",effect:"default",fixed:!a.browser.msie||a.browser.version>6,left:"center",load:false,mask:null,oneInstance:true,speed:"normal",target:null,top:"10%"}};var s=[],q={};"default",function(d,b){var c=this.getConf(),j=a(window);if(!c.fixed){;d.left+=j.scrollLeft()}d.position=c.fixed?"fixed":"absolute";this.getOverlay().css(d).fadeIn(c.speed,b)},function(d){this.getOverlay().fadeOut(this.getConf().closeSpeed,
d)});a.fn.overlay=function(d){var"overlay");if(b)return b;if(a.isFunction(d))d={onBeforeLoad:d};d=a.extend(true,{},,d);this.each(function(){b=new t(a(this),d);s.push(b);a(this).data("overlay",b)});return d.api?b:this}})(jQuery);
(function(h){function k(d){var e=d.offset();return{,left:e.left+d.width()/2}}var,f=h(window);h.extend(l.conf,{start:{top:null,left:null},fadeInSpeed:"fast",zIndex:9999});function o(d,e){var a=this.getOverlay(),c=this.getConf(),g=this.getTrigger(),p=this,m=a.outerWidth({margin:true}),"img"),n=c.fixed?"fixed":"absolute";if(!b){b=a.css("backgroundImage");if(!b)throw"background-image CSS property not set for overlay";b=b.slice(b.indexOf("(")+1,b.indexOf(")")).replace(/\"/g,
"");a.css("backgroundImage","none");b=h('<img src="'+b+'"/>');b.css({border:0,display:"none"}).width(m);h("body").append(b);"img",b)}var||Math.round(f.height()/2),j=c.start.left||Math.round(f.width()/2);if(g){g=k(g);;j=g.left}if(c.fixed){i-=f.scrollTop();j-=f.scrollLeft()}else{;d.left+=f.scrollLeft()}b.css({position:"absolute",top:i,left:j,width:0,zIndex:c.zIndex}).show();d.position=n;a.css(d);b.animate({top:a.css("top"),left:a.css("left"),width:m},
c.speed,function(){a.css("zIndex",c.zIndex+1).fadeIn(c.fadeInSpeed,function(){p.isOpened()&&!h(this).index(a)?})}).css("position",n)}function q(d){var e=this.getOverlay().hide(),a=this.getConf(),c=this.getTrigger();"img");var g={,left:a.start.left,width:0};c&&h.extend(g,k(c));a.fixed&&e.css({position:"absolute"}).animate({top:"+="+f.scrollTop(),left:"+="+f.scrollLeft()},0);e.animate(g,a.closeSpeed,d)}l.addEffect("apple",o,q)})(jQuery);

* Custom script - Christianto

var tgO;
var tgI = "target-image"; // this is your image class

$.georgemail = {
init: function()
// overlay form section
$('#wrap-georg-imagemail').overlay({mask:{ color:'#666666', opacity: 0.5}, top:'center'});
tgO = $('#wrap-georg-imagemail').data('overlay');

// image section

// submit function
submit : function()
var formdata = $('#georg-imagemail').serialize();
var data = { type: 'sendemail', action: 'georgmail', data: formdata }
$.post(georg_ajax_url , data, function(message){
case 'email-send-success':
alert('Email successfully send');
case 'email-has-error':
alert('Error sending email, please try again later.');



4. Copy paste code below to function.php its php mail function

PHP mail function
function georg_send_mail(){

$data = $_POST['data'];
parse_str($data, $saved);

if($_POST['type'] == 'sendemail'){

$emailTo = get_bloginfo('admin_email'); // you can edit this to your email address
$website = get_bloginfo('name'); // you can edit this to your blog name

$subject = $saved['subject-email'];

$headers .= "Content-Type: text/plain; charset=utf-8; format=flowed" . "\r\n";
$headers .= "Content-Transfer-Encoding: 8bit" . "\r\n";
$headers .= "MIME-Version: 1.0" . "\r\n";
$headers .= 'From: Mail '.$subject."\r\n";
$headers .= 'Reply-To: '.$saved['user-mail'];

$body = "Name: ".$saved['user-name']."\n\nEmail:".$saved['user-mail']." \n\nPhone: ".$saved['user-phone']." \n\nMessage: ".$saved['user-message'];

mail($emailTo, $subject, $body, $headers);

echo 'email-send-success';

} else {

echo 'email-has-error';



add_action('wp_ajax_georgmail', 'georg_send_mail');

<strong>and do the same with code below - this will be the email form html please style by yourself ;-)</strong>

Overlay HTML
function georg_mail_form(){ ?>
<div class="wrap-georg-imagemail">
<form id="georg-imagemail">
<input id="subject-mail" name="subject-mail" type="hidden" />
<label for="user-name">Name</label>
<input id="user-name" name="user-name" type="text" />
<label for="user-mail">Email</label>
<input id="user-mail" name="user-mail" type="text" />
<label for="user-phone">Phone</label>
<input id="user-phone" name="user-phone" type="text" />
<label for="user-message">Message</label>
<textarea id="user-message" name="user-message"></textarea>
<button id="georg-submit-imagemail" type="button">Submit</button>
<?php }

Since I can't see your site and test it. It may produce error so please post error code on your browser error console here...

Georg Schwiemann comments:

Sorry Christiano,
I put it in the "Discourse"

Christianto comments:

Ok will check it.

And one thing if the image is using lightbox.. that will be 2 function on single event - when you click the lightbox and overlay appear and may not good ;)

Christianto comments:

Oh I forgot the form overlay CSS, basically its comes from jQuery tools website since I use overlay plugin for this.

[[LINK href=""]][[/LINK]]

/* the overlayed element */
.wrap-georg-imagemail {

/* must be initially hidden */

/* place overlay on top of other elements */

/* styling */

border:1px solid #666;

/* CSS3 styling for latest browsers */
-moz-box-shadow:0 0 90px 5px #000;
-webkit-box-shadow: 0 0 90px #000;

/* close button positioned on upper right corner */
.wrap-georg-imagemail .close {

the close image is attach and also change var tgI to your image class..

Georg Schwiemann comments:

Think I owe you more money :)
I have done 13 hours now today, need to go home & cook.
Will try first thing in the morning.
What time is it where you are?

Christianto comments:

I'm Glad to help,
Ok then already night on my place. Will check it tomorrow.
Just post error here.


Rashid Aliyev answers:

Why You Do Not Use Plugin called "Custm Fields For NextGen Gallery"?
I think it's exactly what You want.

Georg Schwiemann comments:

Trying it now :)

Georg Schwiemann comments:

Can I create an email link with the title of the image in the email with this?