{"id":2182,"date":"2020-05-22T22:10:19","date_gmt":"2020-05-22T22:10:19","guid":{"rendered":"https:\/\/the7kennisbank.nl\/?p=2182"},"modified":"2020-05-22T22:40:21","modified_gmt":"2020-05-22T22:40:21","slug":"displaying-gallery-the7-multipurpose-wordpress-theme","status":"publish","type":"post","link":"https:\/\/the7kennisbank.nl\/en\/user-guide\/displaying-gallery-the7-multipurpose-wordpress-theme\/","title":{"rendered":"Displaying Gallery"},"content":{"rendered":"<p><head><meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\"><br \/>\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\"><\/head><\/p>\n<p><em>[Please learn what\u2019s the\u00a0<a title=\"Understanding Albums &amp; Galleries\" href=\"https:\/\/the7kennisbank.nl\/user-guide\/custom-post-types\/understanding-albums-galleries\/\">difference between \u201cAlbums\u201d and \u201cGalleries\u201d<\/a>\u00a0page templates first]<\/em><\/p>\n<p>In order to display Photos page, you can use our super configurable WPBakery photos shortcodes (fig. 1):<\/p>\n<div id=\"attachment_3383\" class=\"wp-caption aligncenter c1\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/Fig._1._Photos_shortcodes..png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3383\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/Fig._1._Photos_shortcodes.-2.png\" alt=\"Fig. 1. Photos shortcodes.\" width=\"1074\" height=\"253\"><\/a><\/p>\n<p class=\"wp-caption-text\">Fig. 1. Photos shortcodes.<\/p>\n<\/div>\n<h2>Photos Masonry and Grid<a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/fig.2.1..png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3385 size-full\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/fig.2.1..png\" alt=\"\" width=\"839\" height=\"241\"><\/a><\/h2>\n<div id=\"attachment_3386\" class=\"wp-caption aligncenter c2\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/Fig._2.1._Photos_Masonry__Grid..png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-3386 size-full\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/Fig._2.1._Photos_Masonry__Grid..png\" alt=\"Fig. 2.1. Photos Masonry &amp; Grid.\" width=\"1342\" height=\"426\"><\/a><\/p>\n<p class=\"wp-caption-text\">Fig. 2.1. Photos Masonry &amp; Grid.<\/p>\n<\/div>\n<p>First \u201c<strong>General<\/strong>\u201d box in shortcode settings offers to select which albums to display (fig. 2.2).<\/p>\n<div id=\"attachment_3387\" class=\"wp-caption aligncenter c3\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/Fig._2.2._General_photos_settings..png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3387\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/Fig._2.2._General_photos_settings..png\" alt=\"Fig. 2.2. General photos settings.\" width=\"686\" height=\"322\"><\/a><\/p>\n<p class=\"wp-caption-text\">Fig. 2.2. General photos settings.<\/p>\n<\/div>\n<p>You can select albums basing on their category or display all albums. Other settings from this tab\u00a0allow to configure posts feed:<\/p>\n<ul>\n<li>Masonry or Grid mode;<\/li>\n<li>loading effect;<\/li>\n<li>image sizing, border radius, shadow, animation, hover;<\/li>\n<li>columns settings, where you can specify number of columns depending on device and browser width;<\/li>\n<li>responsiveness (decide when to switch to a single-column layout).<\/li>\n<\/ul>\n<p>It is possible to enable different modes of pagination and adjust the number of photos to display in \u201c<strong>Pagination<\/strong>\u201d tab. You can also configure ordering settings here: descending\/ascending order, name\/date ordering and look of pagination buttons.<\/p>\n<p>In \u201c<strong>Hover Icon<\/strong>\u201d tab, you can:<\/p>\n<ul>\n<li>decide whether to display an\u00a0icon on image hover;<\/li>\n<li>select a specific icon;<\/li>\n<li>configure icon size, color, background and border.<\/li>\n<\/ul>\n<h2 id=\"justified-grid\">Photos Justified Grid<\/h2>\n<p><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/Fig._3.1._Photos_Justified_Grid_.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3392\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/Fig._3.1._Photos_Justified_Grid_.png\" alt=\"\" width=\"840\" height=\"251\"><\/a><\/p>\n<div id=\"attachment_3391\" class=\"wp-caption aligncenter c4\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/Fig._3.1._Photos_Justified_Grid_shortcode..png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3391\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/Fig._3.1._Photos_Justified_Grid_shortcode..png\" alt=\"Fig. 3.1. Photos Justified Grid shortcode.\" width=\"1340\" height=\"474\"><\/a><\/p>\n<p class=\"wp-caption-text\">Fig. 3.1. Photos Justified Grid shortcode.<\/p>\n<\/div>\n<p>This shortcode has less settings than the \u201cMasonry &amp; Grid\u201d. In \u201c<strong>General<\/strong>\u201d tab you can:<\/p>\n<ul>\n<li>select categories to display;<\/li>\n<li>specify how many albums should be displayed;<\/li>\n<li>adjust ordering settings.<\/li>\n<\/ul>\n<p>\u201c<strong>Appearance<\/strong>\u201d tab (fig. 3.2) allows to specify:<\/p>\n<div id=\"attachment_3393\" class=\"wp-caption aligncenter c5\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/Fig._3.2._Appearance_settings..png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-3393 size-full\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/Fig._3.2._Appearance_settings..png\" alt=\"Fig. 3.2. Appearance settings.\" width=\"691\" height=\"488\"><\/a><\/p>\n<p class=\"wp-caption-text\">Fig. 3.2. Appearance settings.<\/p>\n<\/div>\n<ul>\n<li>loading animation effect;<\/li>\n<li>row target height and gaps between images;<\/li>\n<li>featured images proportions;<\/li>\n<li>hide last row if there\u2019s not enough images to fill it (in such a situation, albums get stretched in this row. If such an effect does not suit you, this row can be hidden).<\/li>\n<\/ul>\n<p>You can also decide whether to display photo titles and descriptions here.<\/p>\n<h2>Photos Carousel<\/h2>\n<p><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/fig4.1.photos_carousel.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3395\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/fig4.1.photos_carousel.png\" alt=\"\" width=\"840\" height=\"249\"><\/a><\/p>\n<div id=\"attachment_3396\" class=\"wp-caption aligncenter c6\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/Fig._4.1._Photos_Carousel..png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3396\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/Fig._4.1._Photos_Carousel..png\" alt=\"Fig. 4.1. Photos Carousel.\" width=\"1178\" height=\"215\"><\/a><\/p>\n<p class=\"wp-caption-text\">Fig. 4.1. Photos Carousel.<\/p>\n<\/div>\n<p>Photos Carousel has almost the same settings as Photos Masonry &amp; Grid, except options for scroll: whether to scroll one slide at time or all visible slides. Plus, settings for arrows and bullets (fig. 4.2):<\/p>\n<ul>\n<li>disable\/enable;<\/li>\n<li>select icon, its color, background and position.<\/li>\n<\/ul>\n<div id=\"attachment_3397\" class=\"wp-caption aligncenter c7\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/Fig._4.2._Photos_Bullets_settings._001.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3397\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/Fig._4.2._Photos_Bullets_settings._001.png\" alt=\"Fig. 4.2. Bullets settings.\" width=\"688\" height=\"379\"><\/a><\/p>\n<p class=\"wp-caption-text\">Fig. 4.2. Bullets settings.<\/p>\n<\/div>\n<h2>Page Templates<\/h2>\n<p>In addition to WPBakery Photos elements, you can also use \u201cGallery \u2013 masonry &amp; grid\u201d or \u201cGallery \u2013 justified grid\u201d templates (fig. 5). But please consider, they have less settings than the shortcodes described above.<\/p>\n<div id=\"attachment_3399\" class=\"wp-caption aligncenter c8\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/Fig._5._Gallert_page_template..png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3399\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/Fig._5._Gallert_page_template..png\" alt=\"Fig. 5. Gallery page template.\" width=\"274\" height=\"307\"><\/a><\/p>\n<p class=\"wp-caption-text\">Fig. 5. Gallery page template.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>[Please learn what\u2019s the\u00a0difference between \u201cAlbums\u201d and \u201cGalleries\u201d\u00a0page templates first] In order to display Photos page, you can use our super configurable WPBakery photos shortcodes (fig. 1): Fig. 1. Photos shortcodes. Photos Masonry and Grid Fig. 2.1. Photos Masonry &amp; Grid. First \u201cGeneral\u201d box in shortcode settings offers to select which albums to display (fig.&hellip;<\/p>\n","protected":false},"author":2,"featured_media":2298,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[16,9],"tags":[],"class_list":["post-2182","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-custom-post-types","category-user-guide","category-16","category-9","description-off"],"acf":[],"_links":{"self":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/2182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/comments?post=2182"}],"version-history":[{"count":4,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/2182\/revisions"}],"predecessor-version":[{"id":2561,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/2182\/revisions\/2561"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media\/2298"}],"wp:attachment":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media?parent=2182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/categories?post=2182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/tags?post=2182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}