How to display images member header?

@dr_scythe

That’s true but the problem is when I use some CSS code in that images, this CSS code is being applied to all the BP-media images too.

And I think the lightbox is not by CSS, what about this?

Thanks for your reply!

@andres Felipe

Why not just add a parent class / ID that is only present on the pages you wish to apply the CSS to?

eg: #pagecontentid .bpmediaclass {rules}

ok more or less I could config the css but now I have 2 problems:

1. No ligthbox in this images
2. Where should I put the code with bp 1.7?

Not sure about BP 1.7 : It broke registration on my site so I had to revert back to 1.6

This code snippet confuses me. Sometimes I do get the lightbox and other times I get the image page. Really confusing =/

I’m also considering back to 1.6 at least until 1.7 be more stable. I have no problem with the registration but the styles are a mess.

That’s true but the problem is when I use some CSS code in that images, this CSS code is being applied to all the BP-media images too

Sounds like you need to target a little more specifically when writing your CSS. Instead of writing CSS like this:

.image {
   margin: 10px;
}

Make use of the parent elements on the page that are unique to that page. That way, the CSS you write will only affect the images on that specific page. E.g:

#unqiue-parent-div .image {
   margin: 10px
}

Hi Henry

I’ll try this but now the work is longer because bp 1.7 takes the site’s style and breaks the past bp style…

Thanks for your reply!

Hi Andres

I must admit I am a laggard when it comes to upgrading to a major latest version. I always wait for “.1” to arrive. Think BP 1.7.1 is scheduled for sometime this week so might upgrade then. Sorry I can’t help with 1.7

I used the code

function show_last_n_images($n=5){ if(bp_is_my_profile()){ $n = $n +1; } $query = new BPMediaQuery(); $args = $query->init('image',false,$n); $q = new WP_Query($args); if ($q && $q->have_posts()){ echo '<ul id="groups-list" class="bp-media-gallery2 item-list">'; while ($q->have_posts()) : $q->the_post(); $mytemplate = new BPMediaTemplate(); $mytemplate->the_content(); endwhile; } }

and then I added the css code in the file / buddypress-media/app/assets/css/main.css

ul.bp-media-gallery2.item-list{overflow:visible;margin: 0% 0;width: auto; float: left;}
#item-body ul.bp-media-gallery2 li{float: left;margin: 1% 1% 0;width: 18%;border-bottom: none;padding: 0;position: static;height:auto; display:block;}
ul.bp-media-gallery2 li img{max-width:50px;width:100%;height:auto;margin: 0px 0px 0px 5px;  -moz-box-shadow: 1px 1px 10px #a0a0a0;-webkit-box-shadow: 1px 1px 10px #a0a0a0;box-shadow: 1px 1px 10px #a0a0a0;-moz-transition: box-shadow 0.2s linear;-webkit-transition: box-shadow 0.2s linear;transition: box-shadow 0.2s linear;}
ul.bp-media-gallery2 li img:hover{-moz-box-shadow: 1px 1px 10px #333;-webkit-box-shadow: 1px 1px 10px #333;box-shadow: 1px 1px 10px #333;}
ul.bp-media-gallery2 h3{max-width: 0px;overflow: hidden;text-align: center;font-size: 110%;white-space: nowrap;height: 0px;margin: 5px 0px;}
ul.bp-media-gallery2 a{width:50px;}
ul.bp-media-gallery2 li span img{height: 50px;}

Hi igid26 and thanks for your reply

The function above doesn’t work for me. I’m using this and is working:

<?php
function show_last_n_images($n=5){
    if(bp_is_my_profile()){
        $n = $n +1;
    }
    $query = new BPMediaQuery();
    $args = $query->init('image',false,$n);
    $q = new WP_Query($args);
    if ($q && $q->have_posts()){
        echo '<ul id="groups-list" class="bp-media-gallery item-list">';
        while ($q->have_posts()) : $q->the_post();
            $mytemplate = new BPMediaTemplate();
            $mytemplate->the_content();
        endwhile;
    }
}
?>

About the CSS, I didn’t want to hack the plugin’s css and I just add this code to my theme’s style.css and it’s working.

/*Centrar las imágenes bp-media en el header*/
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*/
div#item-header ul li {
float: left !important;
width: 18%;
margin: 0 2% 2% 0;
border-bottom: none;
}

The problems I’m having now is about the lightbox, I can’t do this works for the images in header and the other thing is I don’t know where to add the code in bp 1.7 header.

Also I can not figure out how to display images in the member header in lightbox. We must rely on the support of @saurabh Shukla.

Hi,

This thread has given me the most happiness in recent times. We (the developers) weren’t needed here till now!

Now for the lightbox to work, you’d just need to look at this file:
buddypress-media/blob/master/app/assets/js/main.js

Consider the code here:

https://github.com/rtCamp/buddypress-media/blob/master/app/assets/js/main.js#L334-L340

The if statement checks whether lightbox is activated in settings and if we are not a mobile device (the lightbox is not good on mobiles).

Just add the if statement and enclosed in it, add the rest of the code. Replace the selectors according to your theme. Enclose all this into the document ready event in your own theme’s js. The lightbox will start working.

Regards.

Hi, good plugin this!

where I add the code in BuddyPress 1.7, I would like to add only the albums, in side of profile photo … I’ve tried a few things but to no avail …

someone could please help me?

Thanks,

Hello, only for explain, I can make working with code in Buddypress 1.7.1, I created an archive custom-functions.php and I put
<?php show_last_n_images($n=4)?>
in member-header.php in buddypress templates /member/single/member-header.php. And this working ok.
But my difficulty is appear make the albums instead of photos.

I try with the code

<?php
function show_last_n_albums($n=4){
    if(bp_is_my_profile()){
        $n = $n +1;
    }
    $query = new BPMediaQuery();
    $args = $query->init('album',false,$n);
    $q = new WP_Query($args);
    if ($q && $q->have_posts()){
        echo '<ul id="bp-album-list" class="bp-media-gallery item-list">';
        while ($q->have_posts()) : $q->the_post();
            $mytemplate = new BPMediaTemplate();
            $mytemplate->the_content();
        endwhile;
    }
}
?>

by calling the function

<?php show_last_n_albums($n=4)?>

and not this working

You can help me @saurabh Shukla.

Thanks,

Does anybody has achieved the lightbox on header work?