{"id":1262,"date":"2016-05-13T01:34:10","date_gmt":"2016-05-13T01:34:10","guid":{"rendered":"https:\/\/demo.yolotheme.com\/sofani\/?page_id=1262"},"modified":"2016-07-13T05:59:12","modified_gmt":"2016-07-13T05:59:12","slug":"masonry-layout","status":"publish","type":"page","link":"https:\/\/demo.yolotheme.com\/sofani\/masonry-layout\/","title":{"rendered":"Masonry Layout"},"content":{"rendered":"<p>[vc_row css=&#8221;.vc_custom_1468382580439{margin-bottom: 30px !important;}&#8221;][vc_column]<div class=\"portfolio-container\">\r\n  <div class=\"portfolio overflow-hidden   paging\" id=\"portfolio-69d3567a6ff38\" >\r\n      <!-- Portfolio Filter -->\r\n            <div class=\"portfolio-tabs clearfix tag\">\r\n            <div class=\"tab-wrapper line-height-1 center\">\r\n      <ul>\r\n        <li class=\"active\">\r\n          <a  class=\"isotope-portfolio ladda-button sofani-button style2 button-dark button-2x active\"\r\n              data-section-id    =\"69d3567a6ff38\"\r\n              data-category      =\"\"\r\n              data-overlay-style =\"title-category-link\"\r\n              data-source        =\"\"\r\n              data-portfolio-ids =\"\"\r\n              data-group         =\"all\" \r\n              data-filter        =\"*\"\r\n              data-thumbnail     =\"masonry\"\r\n              data-tag           =\"creative,interface,photograph,typography\"\r\n              data-current-page  =\"1\"\r\n              data-offset        =\"0\"\r\n              data-post-per-page =\"6\"\r\n              data-order         =\"DESC\"\r\n              data-column        =\"3\"\r\n              data-show-paging   =\"1\"\r\n              data-style         =\"zoom-out\"\r\n              data-spinner-color =\"#fff\"\r\n              href               =\"javascript:;\">\r\n              All          <\/a>\r\n        <\/li>\r\n                <li class=\"\">\r\n          <a  class=\"isotope-portfolio ladda-button sofani-button style2 button-dark button-2x \"\r\n              href               =\"javascript:;\" \r\n              data-section-id    =\"69d3567a6ff38\"\r\n              data-category      =\"creative\"\r\n              data-overlay-style =\"title-category-link\"\r\n              data-source        =\"\"\r\n              data-portfolio-ids =\"\"\r\n              data-group         =\"creative\"\r\n              data-filter        =\".creative\"\r\n              data-thumbnail     =\"masonry\"\r\n              data-tag           =\"creative,interface,photograph,typography\"\r\n              data-current-page  =\"1\"\r\n              data-offset        =\"0\"\r\n              data-post-per-page =\"6\"\r\n              data-order         =\"DESC\"\r\n              data-column        =\"3\"\r\n              data-show-paging   =\"1\"\r\n              data-style         =\"zoom-out\"\r\n              data-spinner-color =\"#fff\">\r\n              Creative          <\/a>\r\n        <\/li>\r\n                <li class=\"\">\r\n          <a  class=\"isotope-portfolio ladda-button sofani-button style2 button-dark button-2x \"\r\n              href               =\"javascript:;\" \r\n              data-section-id    =\"69d3567a6ff38\"\r\n              data-category      =\"interface\"\r\n              data-overlay-style =\"title-category-link\"\r\n              data-source        =\"\"\r\n              data-portfolio-ids =\"\"\r\n              data-group         =\"interface\"\r\n              data-filter        =\".interface\"\r\n              data-thumbnail     =\"masonry\"\r\n              data-tag           =\"creative,interface,photograph,typography\"\r\n              data-current-page  =\"1\"\r\n              data-offset        =\"0\"\r\n              data-post-per-page =\"6\"\r\n              data-order         =\"DESC\"\r\n              data-column        =\"3\"\r\n              data-show-paging   =\"1\"\r\n              data-style         =\"zoom-out\"\r\n              data-spinner-color =\"#fff\">\r\n              Interface          <\/a>\r\n        <\/li>\r\n                <li class=\"\">\r\n          <a  class=\"isotope-portfolio ladda-button sofani-button style2 button-dark button-2x \"\r\n              href               =\"javascript:;\" \r\n              data-section-id    =\"69d3567a6ff38\"\r\n              data-category      =\"photograph\"\r\n              data-overlay-style =\"title-category-link\"\r\n              data-source        =\"\"\r\n              data-portfolio-ids =\"\"\r\n              data-group         =\"photograph\"\r\n              data-filter        =\".photograph\"\r\n              data-thumbnail     =\"masonry\"\r\n              data-tag           =\"creative,interface,photograph,typography\"\r\n              data-current-page  =\"1\"\r\n              data-offset        =\"0\"\r\n              data-post-per-page =\"6\"\r\n              data-order         =\"DESC\"\r\n              data-column        =\"3\"\r\n              data-show-paging   =\"1\"\r\n              data-style         =\"zoom-out\"\r\n              data-spinner-color =\"#fff\">\r\n              PhotoGraph          <\/a>\r\n        <\/li>\r\n                <li class=\"\">\r\n          <a  class=\"isotope-portfolio ladda-button sofani-button style2 button-dark button-2x \"\r\n              href               =\"javascript:;\" \r\n              data-section-id    =\"69d3567a6ff38\"\r\n              data-category      =\"typography\"\r\n              data-overlay-style =\"title-category-link\"\r\n              data-source        =\"\"\r\n              data-portfolio-ids =\"\"\r\n              data-group         =\"typography\"\r\n              data-filter        =\".typography\"\r\n              data-thumbnail     =\"masonry\"\r\n              data-tag           =\"creative,interface,photograph,typography\"\r\n              data-current-page  =\"1\"\r\n              data-offset        =\"0\"\r\n              data-post-per-page =\"6\"\r\n              data-order         =\"DESC\"\r\n              data-column        =\"3\"\r\n              data-show-paging   =\"1\"\r\n              data-style         =\"zoom-out\"\r\n              data-spinner-color =\"#fff\">\r\n              Typography          <\/a>\r\n        <\/li>\r\n              <\/ul>\r\n    <\/div>\r\n        <\/div>\r\n            <!-- End Portfolio Filter -->\r\n\r\n      <!-- Portfolio Wrapper -->\r\n      <div class=\"portfolio-wrapper sofani-col-md-3  masonry hover-dir-on\"\r\n          data-section-id=\"69d3567a6ff38\"\r\n          id=\"portfolio-container-69d3567a6ff38\"\r\n          data-columns=\"3\">\r\n          \r\n          \n<div class=\"portfolio-item hover-dir creative interface  hover-align-center\">\n    <!-- Title top -->\n    \n    <div class=\"entry-thumbnail title-category-link effect_5\">\n    <img width=\"600\" height=\"600\" src=\"https:\/\/demo.yolotheme.com\/sofani\/wp-content\/uploads\/2016\/07\/s4.jpg\" alt=\"His equidem moderatius\"\/>\n    <div class=\"entry-thumbnail-hover p-bg-rgba-color\">\n        <div class=\"entry-hover-wrapper\">\n            <div class=\"entry-hover-inner\">\n                <div class=\"hover-content\">\n                    <span class=\"link-button\">\n                                                      <a class=\"link p-color-hover\"  href=\"https:\/\/demo.yolotheme.com\/sofani\/portfolio\/his-equidem-moderatius\/\" title=\"His equidem moderatius\">\n                                 <i class=\"fa fa-link\"><\/i>\n                             <\/a>\n                                             <\/span>\n                                            <a href=\"https:\/\/demo.yolotheme.com\/sofani\/portfolio\/his-equidem-moderatius\/\" class=\"line-height-1\"><div class=\"title\">His equidem moderatius<\/div> <\/a>\n                                        <span class=\"category line-height-1\">Creative, Interface<\/span>\n                <\/div>\n               \n            <\/div>\n        <\/div>\n    <\/div>\n\n<\/div>\n    <!-- Title bottom -->\n    \n    <!-- @TODO: process media type -->\n    <div style=\"display: none\">\n    <\/div>\n<\/div>\n\r\n          \r\n          \n<div class=\"portfolio-item hover-dir creative interface  hover-align-center\">\n    <!-- Title top -->\n    \n    <div class=\"entry-thumbnail title-category-link effect_5\">\n    <img width=\"600\" height=\"600\" src=\"https:\/\/demo.yolotheme.com\/sofani\/wp-content\/uploads\/2016\/07\/p5.jpg\" alt=\"No menandri adolescens\"\/>\n    <div class=\"entry-thumbnail-hover p-bg-rgba-color\">\n        <div class=\"entry-hover-wrapper\">\n            <div class=\"entry-hover-inner\">\n                <div class=\"hover-content\">\n                    <span class=\"link-button\">\n                                                      <a class=\"link p-color-hover\"  href=\"https:\/\/demo.yolotheme.com\/sofani\/portfolio\/no-menandri-adolescens-3\/\" title=\"No menandri adolescens\">\n                                 <i class=\"fa fa-link\"><\/i>\n                             <\/a>\n                                             <\/span>\n                                            <a href=\"https:\/\/demo.yolotheme.com\/sofani\/portfolio\/no-menandri-adolescens-3\/\" class=\"line-height-1\"><div class=\"title\">No menandri adolescens<\/div> <\/a>\n                                        <span class=\"category line-height-1\">Creative, Interface<\/span>\n                <\/div>\n               \n            <\/div>\n        <\/div>\n    <\/div>\n\n<\/div>\n    <!-- Title bottom -->\n    \n    <!-- @TODO: process media type -->\n    <div style=\"display: none\">\n    <\/div>\n<\/div>\n\r\n          \r\n          \n<div class=\"portfolio-item hover-dir creative photograph  hover-align-center\">\n    <!-- Title top -->\n    \n    <div class=\"entry-thumbnail title-category-link effect_5\">\n    <img width=\"600\" height=\"600\" src=\"https:\/\/demo.yolotheme.com\/sofani\/wp-content\/uploads\/2016\/07\/s1.jpg\" alt=\"Justo falli nostrum\"\/>\n    <div class=\"entry-thumbnail-hover p-bg-rgba-color\">\n        <div class=\"entry-hover-wrapper\">\n            <div class=\"entry-hover-inner\">\n                <div class=\"hover-content\">\n                    <span class=\"link-button\">\n                                                      <a class=\"link p-color-hover\"  href=\"https:\/\/demo.yolotheme.com\/sofani\/portfolio\/justo-falli-nostrum\/\" title=\"Justo falli nostrum\">\n                                 <i class=\"fa fa-link\"><\/i>\n                             <\/a>\n                                             <\/span>\n                                            <a href=\"https:\/\/demo.yolotheme.com\/sofani\/portfolio\/justo-falli-nostrum\/\" class=\"line-height-1\"><div class=\"title\">Justo falli nostrum<\/div> <\/a>\n                                        <span class=\"category line-height-1\">Creative, PhotoGraph<\/span>\n                <\/div>\n               \n            <\/div>\n        <\/div>\n    <\/div>\n\n<\/div>\n    <!-- Title bottom -->\n    \n    <!-- @TODO: process media type -->\n    <div style=\"display: none\">\n    <\/div>\n<\/div>\n\r\n          \r\n          \n<div class=\"portfolio-item hover-dir creative typography  hover-align-center\">\n    <!-- Title top -->\n    \n    <div class=\"entry-thumbnail title-category-link effect_5\">\n    <img width=\"600\" height=\"600\" src=\"https:\/\/demo.yolotheme.com\/sofani\/wp-content\/uploads\/2016\/07\/p8.jpg\" alt=\"No menandri adolescens\"\/>\n    <div class=\"entry-thumbnail-hover p-bg-rgba-color\">\n        <div class=\"entry-hover-wrapper\">\n            <div class=\"entry-hover-inner\">\n                <div class=\"hover-content\">\n                    <span class=\"link-button\">\n                                                      <a class=\"link p-color-hover\"  href=\"https:\/\/demo.yolotheme.com\/sofani\/portfolio\/no-menandri-adolescens-2\/\" title=\"No menandri adolescens\">\n                                 <i class=\"fa fa-link\"><\/i>\n                             <\/a>\n                                             <\/span>\n                                            <a href=\"https:\/\/demo.yolotheme.com\/sofani\/portfolio\/no-menandri-adolescens-2\/\" class=\"line-height-1\"><div class=\"title\">No menandri adolescens<\/div> <\/a>\n                                        <span class=\"category line-height-1\">Creative, Typography<\/span>\n                <\/div>\n               \n            <\/div>\n        <\/div>\n    <\/div>\n\n<\/div>\n    <!-- Title bottom -->\n    \n    <!-- @TODO: process media type -->\n    <div style=\"display: none\">\n    <\/div>\n<\/div>\n\r\n          \r\n          \n<div class=\"portfolio-item hover-dir interface photograph  hover-align-center\">\n    <!-- Title top -->\n    \n    <div class=\"entry-thumbnail title-category-link effect_5\">\n    <img width=\"600\" height=\"600\" src=\"https:\/\/demo.yolotheme.com\/sofani\/wp-content\/uploads\/2016\/07\/s3.jpg\" alt=\"Eu sit regione diceret\"\/>\n    <div class=\"entry-thumbnail-hover p-bg-rgba-color\">\n        <div class=\"entry-hover-wrapper\">\n            <div class=\"entry-hover-inner\">\n                <div class=\"hover-content\">\n                    <span class=\"link-button\">\n                                                      <a class=\"link p-color-hover\"  href=\"https:\/\/demo.yolotheme.com\/sofani\/portfolio\/eu-sit-regione-diceret\/\" title=\"Eu sit regione diceret\">\n                                 <i class=\"fa fa-link\"><\/i>\n                             <\/a>\n                                             <\/span>\n                                            <a href=\"https:\/\/demo.yolotheme.com\/sofani\/portfolio\/eu-sit-regione-diceret\/\" class=\"line-height-1\"><div class=\"title\">Eu sit regione diceret<\/div> <\/a>\n                                        <span class=\"category line-height-1\">Interface, PhotoGraph<\/span>\n                <\/div>\n               \n            <\/div>\n        <\/div>\n    <\/div>\n\n<\/div>\n    <!-- Title bottom -->\n    \n    <!-- @TODO: process media type -->\n    <div style=\"display: none\">\n    <\/div>\n<\/div>\n\r\n          \r\n          \n<div class=\"portfolio-item hover-dir interface photograph  hover-align-center\">\n    <!-- Title top -->\n    \n    <div class=\"entry-thumbnail title-category-link effect_5\">\n    <img width=\"600\" height=\"600\" src=\"https:\/\/demo.yolotheme.com\/sofani\/wp-content\/uploads\/2016\/07\/p12.jpg\" alt=\"No menandri adolescens\"\/>\n    <div class=\"entry-thumbnail-hover p-bg-rgba-color\">\n        <div class=\"entry-hover-wrapper\">\n            <div class=\"entry-hover-inner\">\n                <div class=\"hover-content\">\n                    <span class=\"link-button\">\n                                                      <a class=\"link p-color-hover\"  href=\"https:\/\/demo.yolotheme.com\/sofani\/portfolio\/no-menandri-adolescens\/\" title=\"No menandri adolescens\">\n                                 <i class=\"fa fa-link\"><\/i>\n                             <\/a>\n                                             <\/span>\n                                            <a href=\"https:\/\/demo.yolotheme.com\/sofani\/portfolio\/no-menandri-adolescens\/\" class=\"line-height-1\"><div class=\"title\">No menandri adolescens<\/div> <\/a>\n                                        <span class=\"category line-height-1\">Interface, PhotoGraph<\/span>\n                <\/div>\n               \n            <\/div>\n        <\/div>\n    <\/div>\n\n<\/div>\n    <!-- Title bottom -->\n    \n    <!-- @TODO: process media type -->\n    <div style=\"display: none\">\n                <div>\n                <a href=\"https:\/\/demo.yolotheme.com\/sofani\/wp-content\/uploads\/2016\/07\/p10.jpg\"\n                   data-rel=\"prettyPhoto[pp_gal_2402]\"\n                   title=\"<a href='https:\/\/demo.yolotheme.com\/sofani\/portfolio\/no-menandri-adolescens\/'>No menandri adolescens<\/a>\"><\/a>\n            <\/div>\n                    <div>\n                <a href=\"https:\/\/demo.yolotheme.com\/sofani\/wp-content\/uploads\/2016\/07\/p3.jpg\"\n                   data-rel=\"prettyPhoto[pp_gal_2402]\"\n                   title=\"<a href='https:\/\/demo.yolotheme.com\/sofani\/portfolio\/no-menandri-adolescens\/'>No menandri adolescens<\/a>\"><\/a>\n            <\/div>\n                    <div>\n                <a href=\"https:\/\/demo.yolotheme.com\/sofani\/wp-content\/uploads\/2016\/07\/p2.jpg\"\n                   data-rel=\"prettyPhoto[pp_gal_2402]\"\n                   title=\"<a href='https:\/\/demo.yolotheme.com\/sofani\/portfolio\/no-menandri-adolescens\/'>No menandri adolescens<\/a>\"><\/a>\n            <\/div>\n                    <div>\n                <a href=\"https:\/\/demo.yolotheme.com\/sofani\/wp-content\/uploads\/2016\/07\/p7.jpg\"\n                   data-rel=\"prettyPhoto[pp_gal_2402]\"\n                   title=\"<a href='https:\/\/demo.yolotheme.com\/sofani\/portfolio\/no-menandri-adolescens\/'>No menandri adolescens<\/a>\"><\/a>\n            <\/div>\n                    <div>\n                <a href=\"https:\/\/demo.yolotheme.com\/sofani\/wp-content\/uploads\/2016\/07\/p8.jpg\"\n                   data-rel=\"prettyPhoto[pp_gal_2402]\"\n                   title=\"<a href='https:\/\/demo.yolotheme.com\/sofani\/portfolio\/no-menandri-adolescens\/'>No menandri adolescens<\/a>\"><\/a>\n            <\/div>\n                    <div>\n                <a href=\"https:\/\/demo.yolotheme.com\/sofani\/wp-content\/uploads\/2016\/07\/p4.jpg\"\n                   data-rel=\"prettyPhoto[pp_gal_2402]\"\n                   title=\"<a href='https:\/\/demo.yolotheme.com\/sofani\/portfolio\/no-menandri-adolescens\/'>No menandri adolescens<\/a>\"><\/a>\n            <\/div>\n        <\/div>\n<\/div>\n\r\n                <\/div>\r\n      <!-- End Portfolio Wrap -->\r\n\r\n      <!-- Portfolio Paging -->\r\n                <div style=\"clear: both\"><\/div>\r\n          <div class=\"paging\" id=\"load-more-69d3567a6ff38\">\r\n              <a href=\"javascript:;\" class=\"sofani-button load-more ladda-button \"\r\n                 data-source          =\"\"\r\n                 data-overlay-style   =\"title-category-link\"\r\n                 data-overlay-effect  =\"effect_5\"\r\n                 data-category        =\"galleries,images,videos,rectangle,square\"\r\n                 data-portfolio-ids   =\"\"\r\n                 data-section-id      =\"69d3567a6ff38\"\r\n                 data-current-page    =\"2\"\r\n                 data-column          =\"3\"\r\n                 data-offset          =\"0\"\r\n                 data-post-per-page   =\"6\"\r\n                 data-show-paging     =\"1\"\r\n                 data-padding         =\"\"\r\n                 data-thumbnail       =\"masonry\"\r\n                 data-tag             =\"creative,interface,photograph,typography\"\r\n                 data-filter-by       =\"tag\"\r\n                 data-hover-dir       =\"on\"\r\n                 data-portfolio-title =\"\"\r\n                 data-order           =\"DESC\"\r\n                 data-style           =\"zoom-out\" \r\n                 data-spinner-color   =\"#fff\"\r\n              >\r\n                Load more              <\/a>\r\n          <\/div>\r\n        <\/div>\r\n<\/div>\r\n\r\n<script type=\"text\/javascript\">\r\n  (function ($) {\r\n    \"use strict\";\r\n    $(document).ready(function () {\r\n      var $tab_container = jQuery('#portfolio-69d3567a6ff38');\r\n      $('.portfolio-tabs .isotope-portfolio', $tab_container).off();\r\n      $('.portfolio-tabs .isotope-portfolio', $tab_container).click(function () {\r\n        $('.portfolio-tabs .isotope-portfolio', $tab_container).removeClass('active');\r\n        $('.portfolio-tabs li', $tab_container).removeClass('active');\r\n        $(this).addClass('active');\r\n        $(this).parent().addClass('active');\r\n        var dataSectionId = $(this).attr('data-section-id');\r\n        var filter        = $(this).attr('data-filter');\r\n        var $container    = jQuery('div[data-section-id=\"' + dataSectionId + '\"]').isotope({ filter: filter});\r\n        $container.imagesLoaded(function () {\r\n          $container.isotope('layout');\r\n        });\r\n      });\r\n      var $container = jQuery('div[data-section-id=\"69d3567a6ff38\"]');\r\n      $container.imagesLoaded(function () {\r\n        $container.isotope({\r\n          itemSelector: '.portfolio-item'\r\n        }).isotope('layout');\r\n      });\r\n    });\r\n\r\n    $(document).ready(function () {\r\n            $('.portfolio-item.hover-dir > div.entry-thumbnail').hoverdir();\r\n            \r\n      PortfolioAjaxAction.init('https:\/\/demo.yolotheme.com\/sofani\/wp-admin\/admin-ajax.php', '69d3567a6ff38');\r\n    })\r\n\r\n  })(jQuery);\r\n<\/script>[\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row css=&#8221;.vc_custom_1468382580439{margin-bottom: 30px !important;}&#8221;][vc_column][\/vc_column][\/vc_row]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/demo.yolotheme.com\/sofani\/wp-json\/wp\/v2\/pages\/1262"}],"collection":[{"href":"https:\/\/demo.yolotheme.com\/sofani\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.yolotheme.com\/sofani\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.yolotheme.com\/sofani\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.yolotheme.com\/sofani\/wp-json\/wp\/v2\/comments?post=1262"}],"version-history":[{"count":0,"href":"https:\/\/demo.yolotheme.com\/sofani\/wp-json\/wp\/v2\/pages\/1262\/revisions"}],"wp:attachment":[{"href":"https:\/\/demo.yolotheme.com\/sofani\/wp-json\/wp\/v2\/media?parent=1262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}