Align masonry

  • Posted in : Read WP
  • marcusp
    Participant

    Hi,

    Is it possible to align the masonry blocks? That is, some way to define the exact size of the image and text so that all blocks can be alligned horizontally (and vertically)?

    Also, is it possible to add a side bar with the masonry (I guess the masonry blocks would need to be reduced in size)?

    Many thanks
    Marcus

    marcusp
    Participant

    Hi,

    I managed to sort the image size by pasting this code in to the style customizer, as you mentioned in another thread. Thanks

    .featured-image { overflow: hidden; max-height: 200px; }

    However, can you let me know if its possible to:

    — Add the side bar to the homepage masonry view

    — Remove the ‘Continue Reading’ text box and white space below the featured image in masonry view, as I’d like to make the page more compact?

    Many thanks,
    Marcus

    Mehmet S.
    Keymaster

    Hi, use this custom css:

    .blog-masonry .more-link { display: none; }
    

    Note: Masonry hasn’t got a sidebar.

    Thanks

    DGlass
    Participant

    Hi Mehmet,

    I would like to be able to align my posts in the same way; these posts however contain images and text.

    I’ve looked around and although there are Auto Excerpt plugins that limit the post size automatically with a specific number of characters in masonry view (the best one being Evermore), I haven’t found anything that forces the “continue reading” when images and text are present in a blog post so that every item is the same height.

    Is there a way to do this?

    Thanks!

    PB

    ahmetsali
    Keymaster

    Hi, in order to align masonry items horizontally you need to edit js/main.js source code and find line : 512,

                                    // initialize isotope
    				$containerBlog.isotope({
    				  itemSelector : '.hentry',
    				  layoutMode : 'masonry'
    				});
    

    and replace it with this;

                                    // initialize isotope
    				$containerBlog.isotope({
    				  itemSelector : '.hentry',
    				  layoutMode : 'fitRows'
    				});
    

    But this may not be the full solution because in order to align masonry items, their content should almost be identical, same aspect ratio for featured images, similar post title and excerpt lengths etc..

    angeliamcute
    Participant

    hi
    I can’t change the JS file, can someone teach me?
    also, i want to make the blocks number of the masonry as 3 instead of 4.
    Please, thanks :)

    ahmetsali
    Keymaster

    Hi @angeliamcute

    – just open theme folder js/main.js file in a text editor, edit and save.

    in line : 337 you will see column sizes in various resolutions;

    			var viewports = [ {
    					width : 1200,
    					columns : 5
    				}, {
    					width : 900,
    					columns : 4
    				}, {
    					width : 500,
    					columns : 3
    				}, { 
    					width : 320,
    					columns : 2
    				}, { 
    					width : 0,
    					columns : 2
    				} ];
    
    angeliamcute
    Participant

    Hi:

    @ahmetsali

    sorry, i still can’t find it! U mean in the folder that i downloaded to edit?
    I don’t exactly know the steps of doing it!
    would u mind telling me? thanks :)

    ahmetsali
    Keymaster

    yes, in the download package, in the theme folder you should see a folder named js. look for main.js file in it.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in and have valid license to reply to this topic.

License required for the following item
Login and Registration Log in · Register