I want to enable viewers to click on an image and have it displayed as a lightbox.

in my user-profile.tpl.php I have access to '$user_profile['picture']'. After I dsm($user_profile) I see an array of $user_picture with #markup and #weight elements.

I'm not quite sure if this is the right approach and how to go about altering the markup before it's displayed so i can add 'rel="lightbox"'

  • try this, add hyperlink <a href="#" rel="lightbox">$user_profile['picture']</a>
    – Bala
    Sep 9, 2013 at 8:54

2 Answers 2


An alternative approach to wrapping the user picture around the necessary tag for lightbox, would be to append a custom CSS class to the user picture. Then navigate to /admin/config/user-interface/lightbox2/automatic (D7), down to custom class images and type in the name of the CSS class you chose before.

  • thanks, i did as you advised and the lightbox effect work BUT it displays a "broken image" pic. what gives?
    – Chiko
    Sep 9, 2013 at 10:42
  • The broken image appears on the user profiel page or after the lightbox effect? How have you appended the class information, maybe some syntax error?
    – Wtower
    Sep 9, 2013 at 12:07

Another approach: copy user-profile.tpl.php to your theme folder and modify like this:


  global $user;

  $imgAvatarFid = isset($user->picture) ? $user->picture : NULL;

  if($imgAvatarFid != NULL) {
    $imgAvatarFile = file_load($imgAvatarFid);
    $imAvatar = image_style_url('large', $imgAvatarFile->uri);

  <div class="profile"<?php print $attributes; ?>>
    <?php print render($user_profile); ?>

  <?php if($imgAvatarFid != NULL): ?>
  <div class="imgAvatarPop">
    <div class="close">

    <div class="imgAvatar">
      <img src="<?php print $imAvatar; ?>" />
  <?php endif; ?>

and in your css file add:

.imgAvatarPop {
      display: none;
      position: absolute;
      left: 30%;
      top: 25%;

and in your JS file:

$('.profile > .user-picture > a').click(function() {
      $('.imgAvatarPop').css({display: 'block'});
      return false;

  $('.close span').click(function() {
      $('.imgAvatarPop').css({display: 'none'});

if you want you can customize this. Or even you can add overlay to page.tpl.php and show it on user-picture click.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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