{"id":1795,"date":"2017-05-05T14:46:25","date_gmt":"2017-05-05T14:46:25","guid":{"rendered":"https:\/\/stage.pikarthouse.com\/wp\/ombra-documentation\/?page_id=1795"},"modified":"2017-09-14T15:16:07","modified_gmt":"2017-09-14T15:16:07","slug":"showcase-elegant-albums","status":"publish","type":"page","link":"https:\/\/ombra.pikarthouse.com\/documentation\/portfolio\/showcase-elegant-albums\/","title":{"rendered":"Showcase Elegant Albums"},"content":{"rendered":"<p>As the name\u00a0already says it,\u00a0Album is aimed at an outstanding\u00a0visual experience. This\u00a0means its main focus is on\u00a0optical items like <strong><em>images<\/em><\/strong> or <strong><em>videos<\/em><\/strong>. If going further, this items\u00a0could be embellished with immersive elements like headings,\u00a0descriptions or buttons.<\/p>\n<div class=\"pikode pikode--cols cols \" style=\"margin-left: -36px;\" ><div class=\"pikode--column pikode--column--8\" style=\"border-left-width: 36px;\"><p>The Albums\u00a0resemble Projects as they both are\u00a0visual oriented and have similar\u00a0means to display visual items. However, there are couple of differences.<\/p>\n<p>Projects are conceived to have two sides: Single and Archive (that is displayed with <em><a href=\"https:\/\/ombra.pikarthouse.com\/documentation\/shortcodes\/media-elements\/#projects\" target=\"_blank\" rel=\"noopener\">Projects shortcode<\/a><\/em>).<\/p><\/div><div class=\"pikode--column pikode--column--4\" style=\"border-left-width: 36px;\">\n<div \t\tclass=\"pikode pikode--row  summary-box\" style=\"padding: 0px 0px 36px 0px; margin: 0px -36px 0px 0px;\" >\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t\t<div class=\"pikode--row__background\">\n\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"color-overlay\" style=\"opacity: 1; background-color: #4b917d;\" ><\/div>\n\t\t\t\t\t\n\t\t\t\t<\/div>\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-light\"\n\t\t\t\tstyle=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\" style=\"padding: 0px 30px 0px 30px;\" >\n\t\t\t\t\t\t<div class=\"pikode pikode--custom-content  custom-content--28\" style=\"font-weight: 700; line-height: 1.0; text-decoration: none; color: #ffffff; padding: 36px 0px 0px 0px;\"><p>Summary<\/p><\/div>\n<p><a href=\"#general-overview\">General\u00a0overview<\/a><br \/>\n<a href=\"#album-item\">Album Item<\/a><\/p>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<\/div><\/div>\n<p>On the other side, the Album designates\u00a0just one side: the Archive (showcased\u00a0with <a href=\"https:\/\/ombra.pikarthouse.com\/documentation\/shortcodes\/media-elements\/#album\" target=\"_blank\" rel=\"noopener\"><em>Album\u00a0shortcode<\/em><\/a>), carefully handcrafted\u00a0for combining media items with <strong><em>various\u00a0visual options<\/em><\/strong> and <strong><em>custom entry points<\/em><\/strong>\u00a0\u2014 this fact is possible just by using Album features.<\/p>\n\n<div id=\"general-overview\"\t\tclass=\"pikode pikode--row \"  >\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-none\"\n\t\t\t\tstyle=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\"  >\n\t\t\t\t\t\t<div class=\"pikode pikode--custom-content  custom-content--28\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #4b917d; padding: 24px 0px 0px 0px;\"><p>General overview<\/p><\/div>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n<p>Basically, an Album is a <strong><em>collection of visual items<\/em><\/strong>, that\u00a0could mainly be displayed by three ways:\u00a0<strong><em><a href=\"https:\/\/ombra.pikarthouse.com\/documentation\/portfolio\/create-exquisite-items\/#cards\" target=\"_blank\" rel=\"noopener\">cards<\/a>\u00a0masonry<\/em><\/strong><em>,\u00a0<\/em><strong><em><a href=\"https:\/\/ombra.pikarthouse.com\/documentation\/portfolio\/create-exquisite-items\/#sliders\" target=\"_blank\" rel=\"noopener\">slider<\/a>\u00a0<\/em><\/strong><em>and\u00a0<\/em><strong><em><a href=\"https:\/\/ombra.pikarthouse.com\/documentation\/portfolio\/create-exquisite-items\/#carousels\" target=\"_blank\" rel=\"noopener\">carousel<\/a><\/em><\/strong>, all of them being <em>different types of archives<\/em>.<\/p>\n<p>Each item of this collection is called <strong><em>Album Item<\/em><\/strong>\u00a0and it&#8217;s quite <em><strong>similar to a Single<\/strong> (Post, Page or Project):<\/em>\u00a0it can be customized separately, with own options, but <em>it does not have a Single Item Page<\/em>.<\/p>\n<p><em>Why?<\/em><\/p>\n<p><em>Because\u00a0an album is always seen as a collection of items and, not as a single item \u2014 while viewing an album, we are\u00a0enjoying to pass from one image to another in order to get a full experience of facts, we are not interested to see just one image.<strong> This was our main idea when conceiving the Album.<\/strong><\/em><\/p>\n<div class=\"pikode pikode--cols cols \" style=\"margin-left: -36px;\" ><div class=\"pikode--column pikode--column--8\" style=\"border-left-width: 36px;\"><p>However, we went further to enrich the Album experience:<\/p>\n<ul>\n<li>we created\u00a0<strong><em>video items<\/em><\/strong>, beyond the image ones. So, feel free to enjoy <strong><em>Video Galleries<\/em><\/strong>, <strong><em>Sliders <\/em><\/strong>or <em><strong>Carousels<\/strong><\/em><\/li>\n<li>we added\u00a0<strong><em>buttons as entry points<\/em><\/strong>. By this way, you will be able to <strong><em>c<\/em><em>onnect Album Items to any page<\/em><\/strong>\u00a0of your site<\/li>\n<li>we designed <strong><em>text items<\/em><\/strong> for each Album Items in order to be customized:\u00a0<strong><em>Title<\/em><\/strong>, <strong><em>Subtitle<\/em><\/strong> and <strong><em>Description<\/em><\/strong><\/li>\n<\/ul><\/div><div class=\"pikode--column pikode--column--4\" style=\"border-left-width: 36px;\"><div class=\"pikode pikode--custom-content  custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; color: #636363; padding: 36px 36px 6px 36px; margin: 0px -36px 0px 0px; background-color: #f1f1f1;\"><p>Any button added to Album Item serves as an entry point to other pages of your site.\u00a0<strong><em>This is the main reason<\/em><\/strong> you do not need an Album Item Single page.<\/p><\/div><\/div><\/div>\n<p>So, it is obvious now that\u00a0there are two types of\u00a0Album Items: <strong><em>Image<\/em><\/strong> and <strong><em>Video<\/em><\/strong>. Every time you customize an Album\u00a0Item, you will see its results just when added as a part of a collection, which can be inserted anytime on any page with <a href=\"https:\/\/ombra.pikarthouse.com\/documentation\/shortcodes\/media-elements\/#album\" target=\"_blank\" rel=\"noopener\"><strong><em>Album shortcode<\/em><\/strong><\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2881\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Album_archive.jpg\" alt=\"\" width=\"751\" height=\"563\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Album_archive.jpg 800w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Album_archive-300x225.jpg 300w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Album_archive-768x576.jpg 768w\" sizes=\"auto, (max-width: 751px) 100vw, 751px\" \/><\/p>\n<div class=\"pikode pikode--custom-content  custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; margin: 0px 0px 18px 6px;\"><p><span class=\"pikode pikode--highlight highlight--fill\" style=\"background-color: #4b917d;  color: #ffffff;  box-shadow: 0.21em 0px 0px #4b917d, -0.21em 0px 0px #4b917d;\" >Keep in mind<\/span> \u00a0\u00a0The Album <a href=\"https:\/\/ombra.pikarthouse.com\/documentation\/portfolio\/#custom-post-types\" target=\"_blank\" rel=\"noopener\"><em>Post Type<\/em><\/a>\u00a0is strongly connected with Album Shortcode. Any changes made to Album items will be immediately visible on archives added with Album shortcode.<\/p><\/div>\n<p>In order to create\u00a0an Album Item, you should do the following steps:<\/p>\n<ul>\n<li>Log in to your WordPress Dashboard<\/li>\n<li>Click\u00a0<strong><em>Album\u00a0<\/em>\u2192\u00a0<em>Add New Item<\/em><\/strong><\/li>\n<li>Enter your Album Item title, subtitle and description, then fill up Button fields<\/li>\n<li>As needed, <strong><em>choose the Album Item type<\/em><\/strong>,\u00a0<strong><em>select a category and set a Featured Image<\/em><\/strong><\/li>\n<li>Customize your Album Item from\u00a0<strong><em>Slider\u00a0Album Item<\/em><\/strong>\u00a0panel or from the panels specific for\u00a0<strong><em>Video<\/em><\/strong><\/li>\n<li>When you are ready, click <em><b>Publish<\/b><\/em><\/li>\n<\/ul>\n\n<div id=\"album-item\"\t\tclass=\"pikode pikode--row \"  >\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-none\"\n\t\t\t\tstyle=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\"  >\n\t\t\t\t\t\t<div class=\"pikode pikode--custom-content  custom-content--28\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #4b917d; padding: 24px 0px 0px 0px;\"><p>Album Item<\/p><\/div>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n<p>An Album Item represents a single element of Album that can be displayed as either <strong><em>card <\/em><\/strong><em>(part of a Masonry)<\/em> or <strong><em>slide <\/em><\/strong><em>(part of a Slider or Carousel).<\/em><\/p>\n<div class=\"pikode pikode--cols cols \" style=\"margin-left: -36px;\" ><div class=\"pikode--column pikode--column--8\" style=\"border-left-width: 36px;\"><p>An\u00a0important feature of Album Item is represented by <strong><em>Featured Image<\/em><\/strong><strong><em>\u00a0<\/em><\/strong><em>\u2014\u00a0it is mandatory to set it up as it appears on any card (excepting Video cards) or slide<\/em>.<\/p>\n<p>In order to set it up, simply click on <em>Set featured image<\/em> link (the <em>media uploader popup\u00a0<\/em>appears) and select an image from the upload list.<\/p>\n<p><strong><em>An Album Item can also be categorized<\/em><\/strong>: it is helpful\u00a0when you want to\u00a0showcase just a certain category of items. For doing so, you need to assign the same category to the items you want to display at the same time with Album shortcode.<\/p><\/div><div class=\"pikode--column pikode--column--4\" style=\"border-left-width: 36px;\"><div class=\"pikode pikode--custom-content  custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; color: #636363; padding: 36px 36px 6px 36px; margin: 0px -36px 0px 0px; background-color: #f1f1f1;\"><p>If you set up the Album Item to be a <strong><em>Video<\/em><\/strong> one, then the <strong><em>Featured Image appears only while being a part of\u00a0Slider or Carousel<\/em><\/strong>,\u00a0chosen from Album shortcode.<\/p>\n<p>In case <strong><em>Masonry<\/em> <\/strong>is chosen from Album shortcode, then instead of Featured Image, the <strong><em>preview image of video<\/em> <\/strong>will be displayed.<\/p><\/div><\/div><\/div>\n<p>Any Album Item, either Image or Video, has couple of <strong><em>common options:<\/em><\/strong><\/p>\n<ul>\n<li><strong>Title\u00a0<\/strong>\u2014\u00a0enter the\u00a0title of Album Item. You could format it\u00a0by changing its style to <em><strong>Bold<\/strong> <\/em>or <em><strong>Italic<\/strong>.\u00a0Leave empty in case you do not need title.<\/em><\/li>\n<li><strong>Subtitle\u00a0<\/strong>\u2014\u00a0enter the subtitle of Album Item; it appears immediately below the title. You could format it by changing its style to <em><strong>Bold<\/strong> <\/em>or <em><strong>Italic<\/strong>. Leave empty in case you do not need subtitle.<\/em><\/li>\n<li><strong>Description\u00a0<\/strong>\u2014 enter the Album Item description; it appears immediately below the subtitle. You could format it by changing its style to <em><strong>Bold<\/strong> <\/em>or <em><strong>Italic<\/strong>.\u00a0Leave empty in case you do not need description.<\/em><\/li>\n<li><strong>Button<\/strong> <strong>label\u00a0<\/strong>\u2014 it is mandatory to insert a button label in case you want to have a button on Album Item; it appears below the description.<\/li>\n<li><strong>Button<\/strong> <strong>link\u00a0<\/strong>\u2014 insert a link in order to connect the Album Item with other page of your site or other sites<\/li>\n<\/ul>\n<div class=\"pikode pikode--cols cols \" style=\"margin-left: -36px;\" ><div class=\"pikode--column pikode--column--8\" style=\"border-left-width: 36px;\"><p>In case you set up\u00a0the Album Item to be a <strong><em>Video<\/em><\/strong> one, then you will have to choose from two options:<\/p>\n<ul>\n<li><strong>Online Service\u00a0<\/strong>\u2014\u00a0where you can add videos from online environment\n<ul>\n<li><strong>Video URL\u00a0<\/strong>\u2014\u00a0enter\u00a0the link of third party video<\/li>\n<li><strong>Video embed code\u00a0<\/strong>\u2014\u00a0it is helpful when you want to customize your third party video appearance<\/li>\n<\/ul>\n<\/li>\n<li><strong>Self Hosted\u00a0<\/strong>\u2014\u00a0where you are required to add videos from Media Library by providing their links\n<ul>\n<li><strong>Uploaded Video Link\u00a0<\/strong>\u2014 enter the link from Media Library<\/li>\n<li><strong>Autoplay\u00a0<\/strong>\u2014 video will play automatically on page load<\/li>\n<\/ul>\n<\/li>\n<\/ul><\/div><div class=\"pikode--column pikode--column--4\" style=\"border-left-width: 36px;\"><div class=\"pikode pikode--custom-content  custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; color: #636363; padding: 36px 36px 6px 36px; margin: 0px -36px 0px 0px; background-color: #f1f1f1;\"><p>When choosing <strong><em>Video Album Item<\/em><\/strong>, you have to know two important things:<\/p>\n<p><strong>1.<\/strong>\u00a0For Online Service type, it&#8217;s <strong><em>mandatory to enter Video URL<\/em><\/strong>, as it can be used in all types of display: Masonry, Slider or Carousel<\/p>\n<p><strong>2.<\/strong>\u00a0<strong><em>Video embed code<\/em> <\/strong>is used just when you set up Album shortcode to\u00a0<strong><em>Masonry<\/em><\/strong> display.<\/p><\/div><\/div><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2883 aligncenter\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Album_item_elements.jpg\" alt=\"\" width=\"800\" height=\"600\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Album_item_elements.jpg 800w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Album_item_elements-300x225.jpg 300w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Album_item_elements-768x576.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Album Slider Item Options<\/p><\/div>\n<p>There are couple of more options that <em><strong>Album Item<\/strong><\/em> has while it <em><strong>is used as slide<\/strong><\/em> inside a Slider generated with Album shortcode. And the options are:<\/p>\n<ul>\n<li><strong>Content width<\/strong>\u00a0\u2014 enter the content (title, subtitle, description, button) width from Album Item total width<\/li>\n<li><strong>Horizontal position<\/strong> \u2014 place the\u00a0content in the center, left or right sides\u00a0of Album Item<\/li>\n<li><strong>Vertical\u00a0position<\/strong> \u2014 place the\u00a0content in the\u00a0middle, top\u00a0or bottom\u00a0sides\u00a0of Album Item<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2884\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Slider_item.jpg\" alt=\"\" width=\"751\" height=\"563\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Slider_item.jpg 800w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Slider_item-300x225.jpg 300w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Slider_item-768x576.jpg 768w\" sizes=\"auto, (max-width: 751px) 100vw, 751px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>As the name\u00a0already says it,\u00a0Album is aimed at an outstanding\u00a0visual experience. This\u00a0means its main focus is on\u00a0optical items like images or videos. If going further, this items\u00a0could be embellished with immersive elements like headings,\u00a0descriptions or buttons. On the other side, the Album designates\u00a0just one side: the Archive (showcased\u00a0with Album\u00a0shortcode), carefully handcrafted\u00a0for combining media items with [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1791,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1795","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1795","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/comments?post=1795"}],"version-history":[{"count":10,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1795\/revisions"}],"predecessor-version":[{"id":3090,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1795\/revisions\/3090"}],"up":[{"embeddable":true,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1791"}],"wp:attachment":[{"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/media?parent=1795"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}