How to theme the user picture to appear in lightbox

Question

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"'

Answer 1

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.

Answer 2

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

<?php

  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); ?>
  </div>


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

    <div class="imgAvatar">
      <img src="<?php print $imAvatar; ?>" />
    </div>
  </div>
  <?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.