WordPress.org

Ready to get started?Download WordPress

Forums

rtMedia for WordPress, BuddyPress and bbPress
[resolved] How to display images member header? (39 posts)

  1. igid26
    Member
    Posted 1 year 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 Contributor

    Posted 1 year 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 Contributor

    Posted 1 year ago #

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

  4. igid26
    Member
    Posted 1 year 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 Contributor

    Posted 1 year 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 1 year 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 1 year ago #

    Tried the code above but no joy!

  8. Saurabh Shukla
    Member
    Plugin Contributor

    Posted 1 year 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 1 year ago #

    Saurabh Shukla thank you for the help works great.

  10. darwin1995
    Member
    Posted 1 year 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 Contributor

    Posted 1 year 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 1 year 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 1 year 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 year 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 year 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 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 Contributor

    Posted 1 year 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 1 year 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 1 year 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,

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic