{"id":343,"date":"2017-02-19T04:36:38","date_gmt":"2017-02-19T04:36:38","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=343"},"modified":"2023-01-25T12:45:45","modified_gmt":"2023-01-25T12:45:45","slug":"masonry-gallery","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/masonry-gallery\/","title":{"rendered":"Masonry Gallery"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-ho71j-ac7aa7f33ebce6972934dd22f50aaae3\">\n#top .av-special-heading.av-ho71j-ac7aa7f33ebce6972934dd22f50aaae3{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-ho71j-ac7aa7f33ebce6972934dd22f50aaae3 .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-ho71j-ac7aa7f33ebce6972934dd22f50aaae3 .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-ho71j-ac7aa7f33ebce6972934dd22f50aaae3 av-special-heading-h2 blockquote modern-quote  avia-builder-el-0  el_before_av_hr  avia-builder-el-first '><h2 class='av-special-heading-tag '  itemprop=\"headline\"  >Masonry Gallery<\/h2><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<div  class='hr av-48hnkv-3e26ab40109c47dd45ed067f32ea5ab6 hr-default  avia-builder-el-1  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-43izhb-4f1589ccdfa3396bb4fa2c455c702c73 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Overview<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-3wfvu7-786535d2ca866cfd1fb6e2c1d12d2348 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Similar to the default Masonry Element in design and options. The big difference is that this Gallery it is not meant to display WordPress entries but images. The element can be displayed fullwidth (see Portfolio Masonry examples) or adapt to the content size.<\/p>\n<p>View example <a href=\"https:\/\/kriesi.at\/themes\/enfold-2017\/elements\/masonry-gallery\/\" target=\"_blank\" rel=\"noopener\">Masonry Gallery<\/a> element.<\/p>\n<\/div><\/section>\n<div  class='hr av-3pxwzz-bea0e021f51f5e72ac53eaa6a6a21c9a hr-default  avia-builder-el-4  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3l7y67-c3900c639aa2dcbc61f405f3c05ced97 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Code Snippet<\/h2>\n<\/div><\/section>\n<div  class='avia-builder-widget-area clearfix  avia-builder-el-6  el_after_av_textblock  el_before_av_hr '><div id=\"text-3\" class=\"widget clearfix widget_text\">\t\t\t<div class=\"textwidget\"><p><strong>How to use the snippets?<\/strong><\/p>\n<ul>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-css\/\" target=\"_blank\" rel=\"noopener\">CSS Snippets<\/a> to Enfold child theme styles.<\/li>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-js-or-php-script\/\" target=\"_blank\" rel=\"noopener\">JS and PHP scripts<\/a> to your\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-install-enfold-theme\/#why-child-theme\" target=\"_blank\" rel=\"noopener\">child theme<\/a>\u00a0functions.php file.<\/li>\n<li>Shortcodes can be used in a text area in pages, posts, sliders and widget areas.\u00a0Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#debug-mode\" target=\"_blank\" rel=\"noopener\">debug mode<\/a>\u00a0to view the page shortcode.<\/li>\n<li>Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#turn-on-custom-css-class-field-for-all-alb-elements\">custom CSS class name support<\/a>\u00a0to\u00a0add your\u00a0class names to the theme elements.<\/li>\n<li>Disable <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-clear-the-cache\/\" target=\"_blank\" rel=\"noopener\">script merging and clear the cache<\/a>\u00a0to view the changes on the frontend.<\/li>\n<\/ul>\n<p><strong>NOTE<\/strong>: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due\u00a0to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.<\/p>\n<\/div>\n\t\t<\/div><\/div>\n<div  class='hr av-382ujb-ebc58dd9eac39851e3ef9ad6f52d1253 hr-default  avia-builder-el-7  el_after_av_sidebar  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-31r2ov-4719e84cd83045a34bb1c188677637a7 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Shortcode<\/h3>\n<\/div><\/section>\n\n<div  class='hr av-2i96xz-840f2e7f0be6aa482c80a3a857f20014 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-2etjjz-ce7194899c65beb3f24aff9d7c2314e5 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Customization<\/h2>\n<\/div><\/section>\n<div  class='hr av-293zv3-874d9e33475f0e38b6719689a1df10cb hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-20ehlj-324a5279ecd880b68d73701d7f26a3d4 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Caption style<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-6p1qf-ff250c1c399170ac2ea63deb4bd230a7 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Caption font: <\/strong>Caption font size can be set in the element options however if you choose to add custom style please use the CSS below.<\/p>\n<pre>\/* caption font *\/\r\n#top .av-masonry h3.av-masonry-entry-title.entry-title {\r\n\tfont-size: 12px;\r\n\tfont-family: 'Encode Sans Expanded', sans-serif;\t\t\r\n\tcolor:#ff0092;\r\n}<\/pre>\n<p><strong>Caption background <\/strong> To add custom color to the caption area please use the below CSS.<\/p>\n<pre>\/* Background color *\/\r\n#top .av-masonry figcaption.av-inner-masonry-content,\r\n#top .av-masonry .av-inner-masonry-content .avia-arrow {\r\n    background: #caccd1!important;\r\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-1ohdan-85e60b9d701ebcd70752b7c6600165cc hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-1k8ts7-3c796e70aa5fc20c418914fb00d565fe '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Remove default overlay<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-1citan-1f5041791f6522c19b3ef7b98c813a28 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To remove the default overlay of the image please use the CSS below.<\/p>\n<pre>\/* Remove overlay *\/\r\n#top .av-hover-overlay-active .av-masonry-image-container {\r\n    opacity: 1!important;\r\n}\r\n<\/pre>\n<\/div><\/section>\n<div  class='hr av-19o62v-65c42e23d9e76d45ae362d37ad10ac29 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-11ad3z-7388914c08e237e5f53d3af8c147df0e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Masonry gallery pagination<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-wd4pj-c0329dacd139a6b425a3f42d484621fe '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To add custom style to the masonry gallery pagination please use the CSS below.<\/p>\n<pre>\/*----------------------------------------\r\n\/\/ CSS - Masonry Gallery pagination\r\n\/\/--------------------------------------*\/\r\n\r\n\/* Pagination *\/\r\n.av-masonry-pagination, \r\n.av-masonry-pagination:hover {\r\n\tbackground-color: #ffc845!important;\r\n}\r\n\r\n\/* active pagination *\/\r\n#top .av-masonry .pagination .current {\r\n\tbackground: #334858;\r\n\tcolor:#fff;\r\n}\r\n\r\n\/* inactive pagination *\/\r\n#top .av-masonry .pagination a.inactive {\r\n\tbackground: #222222;\r\n\tcolor:#fff;\r\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-pg0cf-0a36a6f25f13e2237afcf539eb7fa40d hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-29mjb-546d136c6cd2278a1cc6168e16d2c968 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Open gallery image links in new window<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-29mjb-546d136c6cd2278a1cc6168e16d2c968 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>By default, the links assigned to the gallery image will open in the same window. If you wish to open the links in a new window please use the below function.<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-1491dz-c463b13734c9fb57c39f0eafff6b0ac2 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code snippets:<\/strong><\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-xnq6f-504c1306ee09f555e25a7755733bb595 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-ajjuf-d91c4dbb629290a7d648a754695454e6'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-1' data-fake-id='#toggle-id-1' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-1' data-slide-speed=\"200\" data-title=\"function\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: function\" data-aria_expanded=\"Click to collapse: function\">function<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-1' aria-labelledby='toggle-toggle-id-1' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" >\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-pg0cf-0a36a6f25f13e2237afcf539eb7fa40d hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-29mjb-0a7edb4f1e28f4e389879e986329e263 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Resource<\/h2>\n<\/div><\/section>\n<div  class='hr av-ddmzz-37d2528a52b2f455883cefbb3037f9db hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-b0cs7-b4a75905cc982605b1eb10fd7e4a7409 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Contributed video<\/strong>:<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=_pO8w1pdE5I\"> Masonry Gallery Element Tutorial <\/a><\/p>\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[2,8],"tags":[],"class_list":["post-343","post","type-post","status-publish","format-standard","hentry","category-documentation","category-media-elements","documentation","media-elements"],"modified_by":"Yigit","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/343","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/comments?post=343"}],"version-history":[{"count":4,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/343\/revisions"}],"predecessor-version":[{"id":13527,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/343\/revisions\/13527"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}