{"id":2184,"date":"2020-05-22T22:10:23","date_gmt":"2020-05-22T22:10:23","guid":{"rendered":"https:\/\/the7kennisbank.nl\/?p=2184"},"modified":"2020-05-22T22:42:38","modified_gmt":"2020-05-22T22:42:38","slug":"displaying-albums-the7-multipurpose-wordpress-theme","status":"publish","type":"post","link":"https:\/\/the7kennisbank.nl\/en\/user-guide\/displaying-albums-the7-multipurpose-wordpress-theme\/","title":{"rendered":"Displaying Albums"},"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 <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> page templates first]<\/em><\/p>\n<p>In order to display Albums page, you can use our super configurable WPBakery albums shortcodes (fig. 1):<\/p>\n<div id=\"attachment_3353\" class=\"wp-caption aligncenter c1\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/Fig._1._Albums_shortcodes..png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3353\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/Fig._1._Albums_shortcodes.-2.png\" alt=\"Fig. 1. Albums shortcodes.\" width=\"1076\" height=\"258\"><\/a><\/p>\n<p class=\"wp-caption-text\">Fig. 1. Albums shortcodes.<\/p>\n<\/div>\n<h2>Albums Masonry and Grid<\/h2>\n<p><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/fig.2.1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3354\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/fig.2.1.png\" alt=\"\" width=\"838\" height=\"252\"><\/a><\/p>\n<div id=\"attachment_3355\" class=\"wp-caption aligncenter c2\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/Fig._2.1._Albums_Masonry__Grid_shortcode..png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3355\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/Fig._2.1._Albums_Masonry__Grid_shortcode..png\" alt=\"Fig. 2.1. Albums Masonry &amp; Grid shortcode.\" width=\"1092\" height=\"465\"><\/a><\/p>\n<p class=\"wp-caption-text\">Fig. 2.1. Albums Masonry &amp; Grid shortcode.<\/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_3357\" class=\"wp-caption aligncenter c3\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/Fig._2.2._General_albums_settings..png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3357\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/Fig._2.2._General_albums_settings..png\" alt=\"Fig. 2.2. General albums settings.\" width=\"707\" height=\"446\"><\/a><\/p>\n<p class=\"wp-caption-text\">Fig. 2.2. General albums 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>layout (classic, bottom overlap, side overlap);<\/li>\n<li>\n<div class=\"wpb_element_label\">content alignment;<\/div>\n<\/li>\n<li>image size, padding, animation, hover;<\/li>\n<li>dividers;<\/li>\n<li>background color and padding;<\/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>\u201c<strong>Project<\/strong>\u201d tab options define appearance of an album on albums gallery page:<\/p>\n<ul>\n<li>post title font, color, size;<\/li>\n<li>meta information (whether to display post date, category, etc.) and its look;<\/li>\n<li>text or, in another words, post content \u2013 its amount and appearance;<\/li>\n<li>\u201cRead more\u201d button label and link\/button mode.<\/li>\n<\/ul>\n<p>In \u201c<strong>Hover Icon<\/strong>\u201d tab, you can:<\/p>\n<ul>\n<li>decide whether to display an\u00a0icon or image miniatures on image hover (fig. 2.3);\n<div id=\"attachment_3363\" class=\"wp-caption aligncenter c4\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/Fig._2.3._Hover_icon_settings..png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3363\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/Fig._2.3._Hover_icon_settings..png\" alt=\"Fig. 2.3. Hover icon settings.\" width=\"709\" height=\"488\"><\/a><\/p>\n<p class=\"wp-caption-text\">Fig. 2.3. Hover icon settings.<\/p>\n<\/div>\n<\/li>\n<li>apply different styles to images miniatures (if this layout is selected) or\u00a0select a specific icon;<\/li>\n<li>configure icon size, color, background and border.<\/li>\n<\/ul>\n<p>It is possible to enable different modes of pagination and adjust the number of albums to display in \u201c<strong>Pagination &amp; Categorization<\/strong>\u201d tab. You can also configure category filter here: descending\/ascending order, name\/date ordering and look of filter buttons.<\/p>\n<h2 id=\"justified-grid\">Albums Justified Grid<\/h2>\n<p><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/Fig._3.1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3365\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/Fig._3.1.png\" alt=\"\" width=\"841\" height=\"246\"><\/a><\/p>\n<div id=\"attachment_3366\" class=\"wp-caption aligncenter c5\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/Fig._3.1._Albums_Justified_Grid..png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3366\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/Fig._3.1._Albums_Justified_Grid..png\" alt=\"Fig. 3.1. Albums Justified Grid.\" width=\"1087\" height=\"540\"><\/a><\/p>\n<p class=\"wp-caption-text\">Fig. 3.1. Albums Justified Grid.<\/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>enable categories filter;<\/li>\n<\/ul>\n<p>\u201c<strong>Appearance<\/strong>\u201d tab (fig. 3.2) allows to specify:<\/p>\n<div id=\"attachment_3368\" class=\"wp-caption aligncenter c6\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/Fig._3.2._Appearance_setting..png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3368\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/Fig._3.2._Appearance_setting..png\" alt=\"Fig. 3.2. Appearance setting.\" width=\"691\" height=\"355\"><\/a><\/p>\n<p class=\"wp-caption-text\">Fig. 3.2. Appearance setting.<\/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:<\/p>\n<ul>\n<li>how to\u00a0display albums descriptions: on colored background, on dark gradient, in the bottom or with help of\u00a0background and animated lines;<\/li>\n<li>what animation effect to apply;<\/li>\n<li>select image hover background color;<\/li>\n<li>apply content alignment;<\/li>\n<li>switch on\/off albums titles, excerpts and miniatures.<\/li>\n<\/ul>\n<p>Finally, you can decide whether to display albums meta (date, category, author, comments, number of images &amp; videos) with help of \u201c<strong>Project Meta<\/strong>\u201d tab.<\/p>\n<h2>Albums Carousel<\/h2>\n<p><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/Fig._4.1._001.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3374\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/Fig._4.1._001.png\" alt=\"\" width=\"840\" height=\"238\"><\/a><\/p>\n<div id=\"attachment_3375\" class=\"wp-caption aligncenter c7\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/Fig._4.1._Albums_Carousel_shortcode..png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3375\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/Fig._4.1._Albums_Carousel_shortcode..png\" alt=\"Fig. 4.1. Albums Carousel shortcode.\" width=\"1176\" height=\"397\"><\/a><\/p>\n<p class=\"wp-caption-text\">Fig. 4.1. Albums Carousel shortcode.<\/p>\n<\/div>\n<p>Albums Carousel has almost the same settings as Albums 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_3377\" class=\"wp-caption aligncenter c8\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/Fig._4.2._Bullets_settings..png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3377\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/Fig._4.2._Bullets_settings..png\" alt=\"Fig. 4.2. Bullets settings.\" width=\"690\" height=\"371\"><\/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 Albums elements, you can also use \u201cAlbums \u2013 masonry &amp; grid\u201d or \u201cAlbums \u2013 justified grid\u201d templates (fig. 5). But please consider, they have less settings than the shortcodes described above.<\/p>\n<div id=\"attachment_3379\" class=\"wp-caption aligncenter c9\"><a href=\"https:\/\/guide.the7.io\/wp-content\/uploads\/2013\/07\/Fig._5._Albums_page_template..png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-3379\" src=\"https:\/\/the7kennisbank.nl\/wp-content\/uploads\/2019\/09\/Fig._5._Albums_page_template..png\" alt=\"Fig. 5. Albums page template.\" width=\"281\" height=\"305\"><\/a><\/p>\n<p class=\"wp-caption-text\">Fig. 5. Albums page template.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>[Please learn what\u2019s the difference between \u201cAlbums\u201d and \u201cGalleries\u201d page templates first] In order to display Albums page, you can use our super configurable WPBakery albums shortcodes (fig. 1): Fig. 1. Albums shortcodes. Albums Masonry and Grid Fig. 2.1. Albums Masonry &amp; Grid shortcode. First \u201cGeneral\u201d box in shortcode settings offers to select which albums&hellip;<\/p>\n","protected":false},"author":2,"featured_media":2327,"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-2184","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\/2184","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=2184"}],"version-history":[{"count":4,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/2184\/revisions"}],"predecessor-version":[{"id":2559,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/2184\/revisions\/2559"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media\/2327"}],"wp:attachment":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media?parent=2184"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/categories?post=2184"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/tags?post=2184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}