WordPress.org

1. igid26
   Member
   Posted 3 months ago #
   

   How to display images BP media in member header?
   http://rtcamp.com/files/2012/08/images.jpg
   I used the code
   

   function show_last_n_images($n=5){
       if(bp_displayed_user_id()){
       global $bp;
       $args = array(
                   'post_type' => 'bp_media',
                   'author' => $bp->displayed_user->id,
                   'meta_key' => 'bp_media_type',
                   'meta_value' => 'image',
                   'meta_compare' => 'LIKE',
                   'posts_per_page' => $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();
               bp_media_the_content();
           endwhile;
           echo '</ul>';
       endif;
       }
   }

   But after the update does not work
   
   http://wordpress.org/extend/plugins/buddypress-media

2. Saurabh Shukla
   Member
   Plugin Author
   Posted 3 months ago #
   

   https://github.com/rtCamp/buddypress-media/blob/master/app/main/profile/BPMediaTemplate.php#L123-138

   $mytemplate = new BPMediaTemplate();
   $mytemplate->the_content();

   Instead of bp_media_the_content(); should do the trick. If it gives an error saying class not found, you might have to include the file.

   Regards.

3. Saurabh Shukla
   Member
   Plugin Author
   Posted 3 months ago #
   

   Also this is not the exact copy paste code and I'm just pointing out the direction.

4. igid26
   Member
   Posted 2 months ago #
   

   Did you mean this?

   function show_last_n_images($n=5){
   if(bp_displayed_user_id()){
   global $bp;
   $args = array(
   'post_type' => 'bp_media',
   'author' => $bp->displayed_user->id,
   'meta_key' => 'bp_media_type',
   'meta_value' => 'image',
   'meta_compare' => 'LIKE',
   'posts_per_page' => $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;
   echo '';
   endif;
   }
   }

5. Saurabh Shukla
   Member
   Plugin Author
   Posted 2 months ago #
   

   No, we've rewritten more code after that last reply. We're still refactoring the queries, so this will change again. However, as of now, you'd do this:

   <?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;
       }
   }
   ?>

   You'd need to remember that if a user visits his own profile, we show him one less media to make space for the uploader. That is why we increase the count by 1.

   Regards.

6. darwin1995
   Member
   Posted 2 months ago #
   

   Can you explain how I can show the images under a users profile tab instead of the Media tab and is there a way to add a lightbox to them?

   Thanks

7. darwin1995
   Member
   Posted 2 months ago #
   

   Tried the code above but no joy!

8. Saurabh Shukla
   Member
   Plugin Author
   Posted 2 months ago #
   

   @darwin1995

   The code above works to show the last n images next to the user's display pic, irrespective of the tab the user is on. I'm not sure if this is what you are trying to acheive. Could you probably share a wireframe or a screenshot of the idea?

   The other I've already answered here: http://wordpress.org/support/topic/how-to-enable-lightbox-for-the-album-and-private-for-group

   Regards.

9. igid26
   Member
   Posted 2 months ago #
   

   Saurabh Shukla thank you for the help works great.

10. darwin1995
    Member
    Posted 2 months ago #
    

    Hi there again,

    Can you tell me which .php file I'm supposed to paste this into and where?

    Many thanks

11. Saurabh Shukla
    Member
    Plugin Author
    Posted 2 months ago #
    

    @darwin1995

    Wherever you want this to appear. Kindly acquaint yourself with BuddyPress's theme structure. Or, you could speak to @igid26 if you want a similar solution as his.

    @igid26

    Could you share your solution in details?

    Regards.

12. darwin1995
    Member
    Posted 2 months ago #
    

    Hi @igid26,

    Would really appreciate your help on this as I can't seem to get this feature to work on the Buddypress Mingle theme that I'm using but I may not be putting the code into the right .php file or possibly just into the wrong place of my member-header.php file

    Thanks

13. igid26
    Member
    Posted 2 months ago #
    

    I created a file bp-custom.php which I put in directory plugins.DIR. To bp-custom.php I put code
    

    <?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; } } ?>

    And then I put the member-header.php
    <?php show_last_n_images($n=5); ?>

    Sorry for my english :D

14. Dr_Scythe
    Member
    Posted 1 month ago #
    

    Code is working and I've been able to get images to appear however no matter what i set n to I always get 6 images displaying also regardless of whether it's my profile or not.

    Any ideas?

15. Andres Felipe
    Member
    Posted 1 month ago #
    

    Hi and thanks everyone for the code

    I just try it as @igid26 said and could get it work. But 3 questions:

    1. How can I define a different size for this images?
    2. Is any way to make the lightbox works with this images? Now when I click on an image, it takes me to the image page.
    3. All the images are one next to the other. How can I put an space between image and image?
    4. All the images are right aligned, how can I left aligned them?
    5. How can I show only the images without the name below the image?

    Thanks in advance!

16. Dr_Scythe
    Member
    Posted 1 month ago #
    

    @Andres Felipe

    All of your questions should be possible using custom CSS code. Use firebug or similiar website analysis software to find the relevant div/img classes and ID's and add CSS to your theme's CSS files

17. Andres Felipe
    Member
    Posted 4 weeks ago #
    

    @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!

18. Dr_Scythe
    Member
    Posted 4 weeks ago #
    

    @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}

19. Andres Felipe
    Member
    Posted 4 weeks ago #
    

    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?

20. Dr_Scythe
    Member
    Posted 4 weeks ago #
    

    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 =/

21. Andres Felipe
    Member
    Posted 4 weeks ago #
    

    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.

22. Henry
    Member
    Posted 4 weeks ago #
    

    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
    }

23. Andres Felipe
    Member
    Posted 4 weeks ago #
    

    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!

24. Henry
    Member
    Posted 4 weeks ago #
    

    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

25. igid26
    Member
    Posted 3 weeks ago #
    

    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;}

26. Andres Felipe
    Member
    Posted 3 weeks ago #
    

    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.

27. igid26
    Member
    Posted 3 weeks ago #
    

    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.

28. Saurabh Shukla
    Member
    Plugin Author
    Posted 2 weeks ago #
    

    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.

29. micoBrazil
    Member
    Posted 2 weeks ago #
    

    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,

30. micoBrazil
    Member
    Posted 2 weeks ago #
    

    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,

Reply »

You must log in to post.