Masonry portfolio

This plugin adds a shortcode that you can use to display your portfolio or posts in a filterable masonry layout

The shortcode:
[moesia-masonry posts="8" show_all_text="See all" post_type="projects" filter="yes" include=""]

Available attributes:

posts="8" -> Number of posts to display;
show_all_text="See all" -> Text displayed for the filter button that shows all posts;
post_type="projects" -> Custom post type to show posts from. You can also add post to display regular posts. If you use the shortcode with the Moesia Projects custom post type than you can also make use of the custom URLs feature that the projects provide.
filter="yes" -> Filter display. yes shows the filter, any other value hides it.
include="" -> Categories slugs to display in the layout and from which the filter will be built. Example: include="landscapes,people,cars"

Please note: your posts need featured images in order to be displayed in the masonry layout. Only one instance of the shortcode should be used per page.


Download the plugin


21 comments

  1. Beautifully made.
    Just what a photographer needs! Thank you for this.

    One question: What are the best dimentions for the featured images so that no padding appears inside the masonry?

  2. I don’t see any padding on your website between the images, but I’m guessing you’re using a higher resolution monitor?
    The images are set at a max width of 360px so they can be big enough to fill a contained div (like here: http://demo.athemes.com/docs/masonry-portfolio/) without overloading the site.

    So now it doesn’t matter how wide your images really are, they won’t be displayed at a bigger width than 360px. I won’t change this as it won’t make sense for most users. But it’s very easy to do:
    – go to Plugins > Editor and open Moesia masonry portfolio;
    – see the moesia-masonry-portfolio.php file;
    – scroll a bit down and find this `add_image_size(‘moesia-mas-thumb’, 360);`
    – change 360 to a bigger value that you find acceptable. Something like 480 should be enough;
    – you might need to run on of those thumbnail regeneration plugins.

  3. Hey,

    I’m using a 1680x1050px resolution screen.
    I had made the featured imgs with 360px width but now I just used one of the images of each post which have 1280px width.

    Using your proposed modification, I set the php value to 480 and now there’s no borders in between the masonry images.

    Thanks again Vlad!

  4. Hey there Vlad, nice work on your theme. I really appreciate all the work and effort that you do. I have a question about this. I’m really new to creating my own page and I don’t understand how to put this into my page. I want to be able to display my “Bucket List” page as a masonry gallery of photos of what I want to do in life. Is there a manual on how to use this extension? I don’t get the “post_type” and “Please note: your posts need featured images in order to be displayed in the masonry layout. Only one instance of the shortcode should be used per page.” Thank you once again.

    1. Hey,
      There is a video right above you that shows how to use this extension 🙂 It doesn’t work exactly as a gallery of standalone images. Instead it shows the featured images from regular posts or from custom posts types.

      1. Yes, I watched the video and everything is self-explanatory when your editing the text but I can’t figure out what you meant by featured images. I’ll go ahead and take a look at that link. Thanks again. I’m learning a lot today lol.

      2. Hi Vlad,
        I understand this wasn’t meant to work exactly as a gallery of standalone images. I am using the “projects” type. How can I get rid of the link, so that when people click on the images it doesn’t direct them to the project which I am actually leaving empty.
        Thank you

  5. Thank you for a great theme and this awesome plugin! Great work. Now all I need is a Swedish version for it, and I read somewhere I might be of use translating it. I’ll have a look at that. Again, thanks!

  6. Hi there just a query about Moesia’s extensions. I’ve just updated the theme (today) and it seems to have broken this extension.

    http://mole.tk/project –> Project/Portfolio page.

    On my homepage I’m using a text module to add the shortcode. (I’ve updated the shortcode to say the following:
    [moesia-masonry posts=”8″ show_all_text=”See all” post_type=”project” filter=”yes” include=””] )

    Can you please help on this since it’s quite a key feature for my site.

    Also is there anyway I can make this FULL WIDTH?

    Thanks,
    Jonah

  7. Hi,

    You might be missing a filter that used to be in the Page Builder. I’ve added it to our plugin now, please update it. Theme has nothing to do with this.

  8. Hi Vlad,
    great work and nice extra feature!
    1) I wonder if i can get a litte padding (2px/white) around each picture. How would I have to modify the plug-In?
    2) Would it be possible to have the picture subtitle (or alternative text) shown when hovering with mouseover?

    1. Hi,

      1. Add this to a custom CSS plugin or child theme:
      .isotope-item {
      border: 2px solid #fff;
      }
      2. Sorry, that’s not an option.

      1. I’d like to add my request for #2 as well, though the title or alt text needn’t be present only on mouseover. If there’s any way at all to add the title with the images that would be fantastic. Perhaps it’s still not an option, even mouseover stipulation excluded.

  9. Hi Vlad,
    This plug in looks really nice. I have downloaded it to my computer and want to install it. But… since I’m a beginner I don’t know how to do it. Can you please guide me? Thanks in advance!
    Best,
    Helena

    1. Hi Helena,

      Will answer for Vlad. All you have to do to install it is go to Plugins > Add New > Upload Plugin > Choose File. Browse to the file you downloaded, and that’s pretty much it. Then just activate it once it’s installed. You’ll see the option.

  10. Hey… I am building my website based on the Moesia template and the Masonry portfolio does not show correctly… pictures are overlayed and I do not how to solve the issue. All pictures have a width of 1280 px originally

  11. Hi,

    Comments on this page are now closed. Please post any and all questions related to this extension in the forum.

Comments are closed.