Projects in grid layout instead of masonry layout

Hello,
I used masonry layout for projects (see OUR PRODUCTS on http://markaled.com/). I need the grid layout instead, but I could’t find it among options. How to change it?
Thank you in advance,

  • Pelin

Hello there,

Please try doing these steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
!function(t,i){"function"==typeof define&&define.amd?define(["isotope/js/layout-mode"],i):"object"==typeof exports?module.exports=i(require("isotope-layout/js/layout-mode")):i(t.Isotope.LayoutMode)}(window,function(t){"use strict";var i=t.create("cellsByRow"),e=i.prototype;return e._resetLayout=function(){this.itemIndex=0,this.getColumnWidth(),this.getRowHeight(),this.cols=Math.floor(this.isotope.size.innerWidth/this.columnWidth),this.cols=Math.max(this.cols,1)},e._getItemLayoutPosition=function(t){t.getSize();var i=this.itemIndex%this.cols,e=Math.floor(this.itemIndex/this.cols),o=(i+.5)*this.columnWidth-t.size.outerWidth/2,n=(e+.5)*this.rowHeight-t.size.outerHeight/2;return this.itemIndex++,{x:o,y:n}},e._getContainerSize=function(){return{height:Math.ceil(this.itemIndex/this.cols)*this.rowHeight}},i}),jQuery(function(t){t(".project-wrap").length&&t(".project-wrap").each(function(){var i=t(this),e=i.find(".project-filter").find("a"),o=function(t){t.isotope({filter:"*",itemSelector:".project-item",percentPosition:!0,animationOptions:{duration:750,easing:"liniar",queue:!1},layoutMode:"cellsByRow"})};i.children().find(".isotope-container").imagesLoaded(function(){o(i.children().find(".isotope-container"))}),t(window).load(function(){o(i.children().find(".isotope-container"))}),e.click(function(){var o=t(this).attr("data-filter");return e.removeClass("active"),t(this).addClass("active"),i.find(".isotope-container").isotope({filter:o,animationOptions:{duration:750,easing:"liniar",queue:!1},layoutMode:"cellsByRow"}),!1})})});

4 . Update

If the code above isn’t accessible, visit this link.

Regards,
Kharis

Thank you for your reply, Kharis. I updated the code as you described, but it looks worse and unprofessional. Isn’t there a better solution?

Hello there,

Do you have a design mockup to show me how it should be arranged?

Regards,
Kharis

Hello there,

Thank you for sharing the mockup.

You would consider to redesign your project images and resize them manually to have exact same size – it should be no more that 480px wide. Then reupload them one by one. Not sure if there is any other way than this.

Regards,
Kharis

There are so many themes out there that do this task automatically. There are plugins such as Regenerate Thumbnails, as well. Your suggestion that i resize them manually and upload them one by one is so outdated. Aren’t you developing your themes regarding user experience? I am disappointed.

Hello there,

I am sorry for the confusion.

We’ve already done image scaling using the same function of WordPress code which automatically scales the image after uploading. add_image_size() for projects only applies a fixed width and the height will proportionally follows. For design purpose, both fixed width and height with hard cropping isn’t applied – looks like it doesn’t meet your need. There’re two ways to get the grid layout result. The first is use the same image dimension before upload. The second is override the default size definition with PHP code: add this code to your child theme’s functions:

    function sydney_child_new_image_size() {
      add_image_size('sydney-mas-thumb', 480, 430, true);
    }
    add_action( 'after_setup_theme', 'sydney_child_new_image_size', 999 ); 

Or you can use a functionality plugin like Code Snippets without running a child theme. Then regenerate the new image size with the Regenerate Thumbnails plugin. Note that the new size will only applied to projects images which are larger than 480px x 430px.

Regards,
Kharis