How to activate the lightbox?

Right now, I’ve added some custom code from @joshuaabenazer.

function show_last_n_images($n = 5) {  
    if ($user_id = bp_displayed_user_id()) {  
        $model = new RTMediaModel();  
        $results = $model->get(array('media_type' => 'photo', 'media_author' => $user_id), 0, $n);  
        if ($results) {  
            echo '';  

It adds the recently uploaded media to a member’s header, like this:

My problem is, when you click on a thumbnail, it takes you to that media’s permalink instead of popping up the lightbox as usual. What code would I have to add to trigger the lightbox?

Hello @mdbob,

Can you please change the class name of the

    from “item-list” to “rtmedia-list-media” and check if it works for you.


That worked perfect! Thank you very much for your help.

Nice to here that your Lightbox works for you.

Please let us know if you have any further queries.

@mdbob: care to share your css for styling that?

This is what I added to member-header.php

<? show_last_n_images(); ?>

And here’s the styling:

div#item-recent-user-images ul.rtmedia-list-media {  
	width: 100%;  
	margin: 0px;  

div#item-recent-user-images ul.rtmedia-list-media li img {  
	width: 70px;  
	height: 70px  
div#item-recent-user-images ul.rtmedia-list-media li {  
	float: left !important;  

div#item-recent-user-images ul.rtmedia-list-media li {  
	padding: 5px 5px 0px 5px;  
	margin: 0 4px 10px 0;  
	border: 1px solid #CECECE;  
	background: #F8F8F8;  

Thank you! Saves me a bit of time.

Any idea how I would update this for group pages, to load the recent media from a group in the group header?

@mdbob, use this function in a group’s page to get recent photos uploaded in a group.

function show_last_n_images_group($n = 5) {  
    if ($group_id = bp_get_current_group_id()) {  
        $model = new RTMediaModel();  
        $results = $model->get(array('media_type' => 'photo', 'context' => 'group', 'context_id' => $group_id), 0, $n);  
        if ($results) {  
            echo '';  

If this is useful for anyone, I use this CSS:

/*Centrar las imágenes bp-media en el header*/  
#buddypress div#item-header ul {  
    list-style-type: none;  
    padding-left: 2% !important;  
/*Acomodar tamaño y márgenes de las imágenes bp-media en el header*/  
#buddypress div#item-header ul li {  
float: left !important;  
width: 18%;  
margin-right: 2%;  

That one resizes the images according to the screen resolution keeping the 5 images in a single line always.

Thanks to all of You who share your knowledge!

Does anyone know how to show an upload box as in the widget in the header when the user still not have the 5 images?

Long explanation: If there are 5 images, the code in this topic works to show that 5 images, but if the user has just 4 images or less, there are white spaces where the other images goes, so my question is if there is a way to use an “if there is no image yet then upload box, else image”, in example if there is not any image upload, 5 boxes to upload, if the user uploads a photo, an image and 4 boxes and so on.

Sorry for my english and thanks for your time.

P.S. See the attachment (That’s paint)

Attachment Link(s):

Hello everyone

This function is awesome, but is there any way to display the first pictures instead of? Something like "function show_FIRST_n_images($n = 5)"


@pics, Use same code pasted by @mdbob. Just change the call to get() method.

$results = $model->get(array('media_type' => 'photo', 'media_author' => $user_id), 0, $n, 'media_id');

It will get media in ascending order.

Wow works great clear and simple. Thanks a lot!

shows the error Parse error: syntax error, unexpected ‘"’, expecting ‘,’ or ‘;’ in …wp-content/plugins/bp-custom.php on line 12