Announcement

Collapse
No announcement yet.

HOW TO: Pinterest style Masonry Page Template for blog posts

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • HOW TO: Pinterest style Masonry Page Template for blog posts

    This is just to show how you can achieve this effect using Dynamik - all credits go to Sridhar Katakam:
    http://sridharkatakam.com/genesis-pa...posts-masonry/
    Please be sure to read this tutorial AND the comments FIRST.
    Edit: The original post has been closed down and is available for paying members of Sridhar´s site only.

    It´s for a default width of 1140px (regarding the custom thumbnail size), you might have to adjust things if you change that.

    Go to Dynamik Custom - Functions, copy and paste this in (save):

    PHP Code:
    //* Add new image size
    add_image_size'masonry-thumb'3260true ); 
    Go to Dynamik Custom - CSS, copy and paste this in (save):

    Code:
    /* Masonry Blog CSS */
    .masonry-page .content-sidebar-wrap {
        float:none; margin:0 auto; overflow:auto;
    }
    .masonry-page .content .entry {
    border-radius: 0;
    
    /* ((no. of columns) * x) + ((no. of columns - 1) * gutter width) = available width */
    /* width: 235px; */ /* 4 columns */
    width: 326px; /* 3 columns */
    overflow: hidden;
    box-sizing:border-box;
    }
    
    .masonry-page .entry-title {
    word-wrap: break-word;
    }
    
    .masonry-page article {
    box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
    border-radius: 3px;
    padding: 15px;
    }
    
    .masonry-page article .entry-title {
    font-size: 25px; padding: 10px 12px 0;
    }
    
    .masonry-page article .entry-meta, .masonry-page article .entry-content{
    padding: 5px 15px;
    }
    
    
    /* Media Queries */
    
    @media only screen and (max-width: 320px) {
    .masonry-page .content .entry {
    width: 240px;
    overflow: hidden;
    display:block;
    margin: 20px auto;
    }
    }
    Note: Width values AND custom thumbnail size may need to be adjusted depending on how many columns you want. This is for three columns.

    Go to Dynamik Custom - JS, copy and paste this in and save (because it´s not too much JS, I did not create 2 separate files like Sridhar did in his tutorial, but if you prefer, you can of course):

    Code:
    var container = document.querySelector('.content');
    var msnry;
    // initialize Masonry after all images have loaded
    imagesLoaded( container, function() {
    msnry = new Masonry( container, {
    itemSelector: '.entry',
    gutter: 40
    });
    });
    
    jQuery(function( $ ){
    
    var $element_to_be_moved = $('.archive-pagination');
    $element_to_be_moved.insertAfter($element_to_be_moved.parent());
    
    });

    Go to Dynamik Custom - Templates, copy and paste this into the editor box, file name masonryblog, Template Name: Posts in Masonry Grid. Save.

    PHP Code:
    <?php

    /*
    Template Name: Posts in Masonry Grid
    */

    /*
    * @author Sridhar Katakam
    * @link http://sridharkatakam.com/genesis-page-template-displaying-posts-masonry/
    */

    # Force full width content
    add_filter'genesis_pre_get_option_site_layout''__genesis_return_full_width_content' );

    # Reposition the breadcrumb
    // remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
    // add_action( 'genesis_before_content', 'genesis_do_breadcrumbs' );

    //* Enqueue Masonry
    wp_enqueue_script'masonry' );

    //* Initialize Masonry
    wp_enqueue_script'masonry-init'get_bloginfo'stylesheet_directory' ) . '/js/masonry-init.js'''''true );

    //* Load the jQuery for placing archive pagination below the Posts list
    wp_enqueue_script'reposition-pagination'get_bloginfo'stylesheet_directory' ) . '/js/reposition-pagination.js', array( 'jquery' ), '1.0.0'true );

    //* Add custom body class to the head
    add_filter'body_class''sk_body_class' );
    function 
    sk_body_class$classes ) {

    $classes[] = 'masonry-page';
    return 
    $classes;

    }

    remove_action'genesis_loop''genesis_do_loop' );
    add_action'genesis_loop''sk_masonry_loop' );
    /**
    * Outputs a custom loop
    *
    * @global mixed $paged current page number if paginated
    * @return void
    */
    function sk_masonry_loop() {

    $include genesis_get_option'blog_cat' );
    $exclude genesis_get_option'blog_cat_exclude' ) ? explode','str_replace' '''genesis_get_option'blog_cat_exclude' ) ) ) : '';
    $paged get_query_var'paged' ) ? get_query_var'paged' ) : 1;

    //* Easter Egg
    $query_args wp_parse_args(
    genesis_get_custom_field'query_args' ),
    array(
    'cat' => $include,
    'category__not_in' => $exclude,
    'showposts' => genesis_get_option'blog_cat_num' ),
    'paged' => $paged,
    )
    );

    genesis_custom_loop$query_args );
    }

    //* Force Content Limit regardless of Content Archive theme settings
    add_filter'genesis_pre_get_option_content_archive''sk_show_full_content' );
    add_filter'genesis_pre_get_option_content_archive_limit''sk_content_limit' );

    function 
    sk_show_full_content() {
    return 
    'full';
    }

    function 
    sk_content_limit() {
    return 
    '100'// Limit content to 100 characters
    }

    //* Remove author and comment link in entry header's entry meta
    add_filter'genesis_post_info''sp_post_info_filter' );
    function 
    sp_post_info_filter($post_info) {

    $post_info '[post_date] [post_edit]';
    return 
    $post_info;

    }

    //* Display Featured image linking to entry
    remove_action'genesis_entry_content''genesis_do_post_image'8);
    add_action'genesis_entry_header''sk_image');
    function 
    sk_image() {
    $image_args = array(
    'size' => 'masonry-thumb'
    );

    // Get the featured image HTML
    $image genesis_get_image$image_args );

    echo 
    '<a rel="bookmark" href="'get_permalink() .'">'$image .'</a>';

    }

    genesis();
    You can then go to Pages, create a new page and choose "Posts in Masonry Grid" as your template. If you want that as your frontpage or blog page, you´ll have to set it in Wordpress Settings - Reading.

    Looks like this (work on the CSS styles if necessary):

    masonry grid.JPG


    IMPORTANT: In WordPress Settings - Reading, if you choose a static page as your frontpage, do NOT set this as your posts page. This setting would cause your template to be ignored. Leave it blank. See comment #5. https://codex.wordpress.org/Settings_Reading_Screen

    Note: This is just for the basic implementation, I will not support or help to customize this any further.
    Attached Files
    Last edited by SiGa; 04-03-2017, 06:57 PM.

  • #2
    Sorry, can't help it ... you do realize there is a very easy way to do this, although the Pro version is required LOL!

    Comment


    • SiGa
      SiGa commented
      Editing a comment
      LOL I saw that coming! Would be interesting to compare files and sizes though - I´d just guess this is the slicker one maybe.

  • #3
    Here's what I get for this page: HTML = 19 KB, Files = 17, Folder Size = 324 KB/Size on disk = 372 KB

    Fresh install of WP, DWB + GEN, BB Pro, no other plugins, added 6 identical posts, featured images on 4 (to get the masonry effect).

    Process:

    - create additional posts and add featured images as required
    - create new page, select full width layout (no sidebar)
    - click BB
    - select Blog Grid from Content Pages
    - adjust margin in the Posts setting to get 3 columns on the page (default margin is 60px; set it to 20px)
    - Save > Done > Publish > Enjoy

    masonry_grid_bb.jpg
    Attached Files

    Comment


    • SiGa
      SiGa commented
      Editing a comment
      Well, that´s quite comparable. I got more posts and more complex pics in there, but if I cut that down it would be similar, I´d say. Number of files is the same (300 kB for those, all in all). So one day, you might convince even me to use BB for just everything.... LOL

    • Sniffle Valve
      Sniffle Valve commented
      Editing a comment
      Good to hear that they are comparable ... yep, one of these days LOL

  • #4
    Hmm, I can't seem to get this to work. I saw Sridhar Katakam's OG post and found this thread after I couldn't get his process to work in dynamik. I figured you might have made some tweaks to his code so I tried copy-pasting from this thread and still can't seem to get it to work. I can select the page template on my desired page, but it does't change the layout. I still get a vertical blog roll with the sidebars I have selected by default.

    I wonder if I have something else on the site that's causing a conflict?

    -p

    Comment


    • #5
      Looks like I figured it out SIGa, turns out I had my page set as the blog posts page in static home/blog customization settings. For some reason that seems to override the page template type and causes it to not work.

      Once I deselected that page, this ended up working great!

      Thanks!

      -p

      Comment


      • SiGa
        SiGa commented
        Editing a comment
        Glad to hear!

    • #6
      Hello and thank you for sharing the tutorial above - I have followed it on my site but have come across something which i can't find the answer too and wonder if anyone could help? The link to the article by Sridhar Katakam is behind a paywall so i can't look through the comments left their unfortunately.

      For some reason i cannot get the homepage pagination to work - the pagination shows up at the bottom but when the second/third page etc is clicked it just reloads the homepage. It works fine on the other aspects of the site so seems to be something about this masonry template. Im guessing this is because when the masonry page loads it reruns the query for the latest posts before pagination ?!? but i have no idea how to solve this if i am even right.

      I'm also not able to change the number of posts it displays per page.

      Any help would be very much appreciated
      Thanks!
      Annabel

      Comment


      • SiGa
        SiGa commented
        Editing a comment
        I created a page (any name) and applied the above template to it. In Wordpress Settings - Reading I´ve chosen "Static Homepage" and it makes no difference if I chose it to be the frontpage or the Blog page - works in both cases.

      • anzmiester
        anzmiester commented
        Editing a comment
        I've tried the same too, it is currently set to Static Homepage using a page with the masonry template applied to it. Wonder why it works for you and not me. Its a mystery.

      • anzmiester
        anzmiester commented
        Editing a comment
        Changing this line seemed to fix it ...

        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

        to

        $paged = (get_query_var('page')) ? get_query_var('page') : 1;

    • #7
      Ah.... there´s a thread discussing that (though it´s rather old): https://wordpress.org/support/topic/...page-templates

      Using get_query_var('page') seems to only be necessary if you're using query posts in a custom page template that you've set as your homepage.
      I still wonder what´s the difference between our setups but it´s good to know what to try if it doesn´t work - thanks for sharing what you found!

      Comment


      • anzmiester
        anzmiester commented
        Editing a comment
        Thanks for sharing the thread discussion, will take a look. It still isn't working quite right, the first click of pagination now works but anything past that doesn't and reloads the page it is currently on. Back to the drawing board but maybe a little closer than before.

        No idea what the difference is between our setups - mine is a localhost, maybe that is the problem?!

      • SiGa
        SiGa commented
        Editing a comment
        Can´t be, mine is, too. You might want to try what is mentioned in comment 4 in that thread (no idea if it might help, though). Just to be sure, double-check your setting in Genesis Theme Settings - Content Archives.

      • anzmiester
        anzmiester commented
        Editing a comment
        I've done some more experimenting and have found that the pagination only does not work when the front page is setup to a page that uses the masonry template. When it is set to any page other than the front it works fine.

    • #8
      How do you install this "BB" function? Sorry, I am a novice at this. thanks!

      Comment


      • SiGa
        SiGa commented
        Editing a comment
        It isn´t really related to this skin. Please use forum search function and search for "Beaver Builder" to find the related threads. Thanks!

    • #9
      I have got this installed and working on my website, thanks so much! I have a question. How do I apply this template to a blog page but also be able to add text and images to the top of the page and have the posts below appear in this masonry format.

      Comment


      • #10
        You´ll have to digg the Docs and look at the videos about how to create Custom Widgets or Custom Hooks and conditionals for this template.

        Just a friendly reminder:
        Note: This is just for the basic implementation, I will not support or help to customize this any further.

        Comment


        • #11
          Thanks Siga, you pointed me in the right direction.

          Comment


          • #12
            as always it Works another Thanks goes to Siga

            Comment


            • SiGa
              SiGa commented
              Editing a comment
              Glad to hear, thank you.

          • #13
            Hi SiGa,
            I've followed the instructions and it it works, althought I only have one column for some reason, but I'll work on that!
            But I want this to be my posts page and as your last comment is:
            You can then go to Pages, create a new page and choose "Posts in Masonry Grid" as your template. If you want that as your frontpage or blog page, you´ll have to set it in Wordpress Settings - Reading.
            So when I do this and set the masonry page as my posts page in Reading it just reverts to the standard blog page. Can you point me in the right direction?

            Comment


            • SiGa
              SiGa commented
              Editing a comment
              Only if I´d have something to look at, maybe, as I can´t see your backend... Can you offer some screenshots of your Settings?

            • SiGa
              SiGa commented
              Editing a comment
              Oh and: Did you read the comments above, as it seems that others had quite similar problems, see #5.

          • #14
            Hi SIGA,

            Yes, I did read #5 and my problem was similar in that the masonry blog page doesn't show up at all if you have the page assigned as the posts page under Wordpress Settings/Reading. When I deselect it there I can also get the layout to show up but I guess the point is that I do want this page to be assigned as my posts page. Or maybe I'm wrong to assume that I need to do this?

            Having said that I still couldn't figure out why I was just getting one column on the left to display, And as I'm currently on a local host and anxious to get the site live I think I'll revisit this in the future I think.

            Thanks for taking the time to respond though.

            Comment


            • #15
              Originally posted by muchacerveza View Post
              Looks like I figured it out SIGa, turns out I had my page set as the blog posts page in static home/blog customization settings. For some reason that seems to override the page template type and causes it to not work.

              Once I deselected that page, this ended up working great!

              Thanks!

              -p
              Can someone advise how I deselect I have the exact same issue wondering how I can resolve this?

              Comment


              • SiGa
                SiGa commented
                Editing a comment
                "...my problem was similar in that the masonry blog page doesn't show up at all if you have the page assigned as the posts page under Wordpress Settings/Reading. When I deselect it there I can also get the layout to show up..." Did you try this?
            Working...
            X