Skip to:
Content
Pages
Categories
Search
Top
Bottom

Pinterest-style Activity Feed

  • Avatar of Andrea Reed
    Andrea Reed
    Participant

    @canadadre

    Has anyone had experience with creating an Activity Feed that is visual similar to Pinterest? With pictures and posts from members with the post/pic inside a shape/border. I’m looking for masonry style and infinite scroll. I got infinite scroll setup on the Activity Feed using a plugin. However, I have only seen masonry-style pages using blog posts and not status updates from members. Has anyone had experience with this? Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Avatar of henrywright
    henrywright
    Moderator

    @henrywright

    Using Masonry with the BP activity feed would be possible. It’s a loop of data just like a loop of blog posts. You might need to change some of the default selectors to match the BuddyPress markup but aside from that I see no problems.

    Avatar of Andrea Reed
    Andrea Reed
    Participant

    @canadadre

    @henrywright That’s great that you don’t think it would be a problem! :-) I’m just unsure of what direction to tackle it from… CSS or functions.php? Or both? Any suggestions?

    Avatar of henrywright
    henrywright
    Moderator

    @henrywright

    If you take a look at the docs on the Masonry website you’ll see that you can do something like this with jQuery

    <script>
    jQuery('#container').masonry({
      columnWidth: 200,
      itemSelector: '.item'
    });
    </script>

    #container and .item are used in the example but in BuddyPress they will be something like #members and .member. For example your BuddyPress page source code might look like this

    <div id="members"> <!-- this is the #container -->
    
        <div class="member"> <!-- this is the .item -->
            <!-- various stuff happens here for a particular member -->
        </div>
    
        <div class="member"> <!-- this is the .item -->
            <!-- various stuff happens here for a particular member -->
        </div>
    
        <div class="member"> <!-- this is the .item -->
            <!-- various stuff happens here for a particular member -->
        </div>
    
    </div>

    Note I’ve made up these selectors, they will be something different so check your BP templates.

Viewing 3 replies - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.