{"id":1407,"date":"2017-05-02T12:47:40","date_gmt":"2017-05-02T12:47:40","guid":{"rendered":"https:\/\/stage.pikarthouse.com\/wp\/ombra-documentation\/?page_id=1407"},"modified":"2018-03-10T09:39:53","modified_gmt":"2018-03-10T09:39:53","slug":"media-elements","status":"publish","type":"page","link":"https:\/\/ombra.pikarthouse.com\/documentation\/shortcodes\/media-elements\/","title":{"rendered":"Media elements"},"content":{"rendered":"<p>The <strong><em>Shortcode Media Elements<\/em><\/strong>\u00a0are conceived to showcase your portfolio or other interactive items, like images or videos, in so many creative manners.<\/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>They stand as independent design elements,\u00a0enhancing the existing page content, but they could be\u00a0a part of other shortcodes, like\u00a0Columns\u00a0or\u00a0Row.<\/p>\n<p>As <strong><em>Shortcode Basic Items<\/em><\/strong>, this type of shortcodes\u00a0have the specific feature for allowing <strong>no content<\/strong> to be embellished inside them.\u00a0There are two shortcodes of this type:\u00a0<em><strong>Album<\/strong>\u00a0<\/em>and <em><strong>Projects<\/strong><\/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=\"#album\">Album<\/a><br \/>\n<a href=\"#projects\">Projects<\/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<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\u00a0By embellishing content, we mean the use of any WordPress Editor tools or the insertion\u00a0inside the same shortcode of any other shortcodes offered by Ombra Theme.<\/p><\/div>\n<p>Even if at first sight, these two shortcodes are similar in the matter of options and display, there are couple of important features that differentiate them. By knowing the distinctions between them, you will know better how and in which specific situations you need to use each of them.<\/p>\n<div class=\"pikode pikode--cols cols \" style=\"margin-left: -3px;\" ><div class=\"pikode--column pikode--column--6\" style=\"border-left-width: 3px;\"><div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; padding: 12px 12px 1px 12px; margin: 0px 0px -18px 0px; background-color: #e1e1e1;\"><p style=\"text-align: center;\">Album<\/p><\/div>\n<div class=\"pikode pikode--custom-content with-borders custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; color: #636363; padding: 24px 18px 0px 0px; border-width: 3px 0px 3px 0px; border-color: #ffffff; background-color: #f1f1f1;\"><ul>\n<li>it extends the functionality of Album Post Type<\/li>\n<li>it creates <strong>custom entry points to any type of site content<\/strong>: Post, simple Page, Product, even a Project. You can also avoid linking Album Items at all (in case you just want to create a custom gallery)<\/li>\n<li>the Album Item could be either <strong>image or video<\/strong><\/li>\n<li>Album Item could stand as gallery item, without linking the item itself to a specific content<\/li>\n<li>you can visit the Album Item content <strong>just via a Button, not by clicking on image<\/strong><\/li>\n<li>it can display a list of\u00a0heterogeneous elements (Post, Page, Project, Product) in the same instance. The list is showcased as Masonry, Slider or Carousel<\/li>\n<\/ul><\/div><\/div><div class=\"pikode--column pikode--column--6\" style=\"border-left-width: 3px;\"><div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; padding: 12px 12px 1px 12px; margin: 0px 0px -18px 0px; background-color: #e1e1e1;\"><p style=\"text-align: center;\">Projects<\/p><\/div>\n<div class=\"pikode pikode--custom-content with-borders custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; color: #636363; padding: 24px 18px 0px 0px; border-width: 3px 0px 3px 0px; border-color: #ffffff; background-color: #f1f1f1;\"><ul>\n<li>it extends the functionality of Projects Post Type<\/li>\n<li>it designates <strong>entry points just to Single Project page<\/strong>, where the project is described in more details. This is the only type of content you could link your Project Item to.<\/li>\n<li>Project Item is represented <strong>just by the featured image<\/strong><\/li>\n<li>Project Item always links to one type of site content\u00a0\u2014 a Single Project page<\/li>\n<li>you can visit the Project Item content<strong> just by clicking on the image<\/strong><\/li>\n<li>it can display just a list of\u00a0Projects in the same instance.\u00a0The list is showcased as Masonry, Slider or Carousel<\/li>\n<\/ul><\/div><\/div><\/div>\n\n<div id=\"album\"\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><a href=\"https:\/\/ombra.pikarthouse.com\/main\/album-carousel\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #4b917d;\">Album<\/span><\/a><\/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><strong>Album<\/strong> is a powerful and flexible shortcode that allows you to\u00a0showcase creatively the content. It consists of two parts:<\/p>\n<ul>\n<li><strong>information data<\/strong> \u2014 it\u00a0is connected with\u00a0Album Post Type, where Album Shortcode\u00a0takes data from, like\u00a0Title, Subtitle, Description or Button label and link<\/li>\n<li><strong>display data<\/strong> \u2014 it\u00a0is composed of own options that allows to choose what type of content to\u00a0show and how to display it<\/li>\n<\/ul>\n\n<div id=\"data-structure\"\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<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2828\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Album_3d.png\" alt=\"\" width=\"800\" height=\"600\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Album_3d.png 1000w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Album_3d-300x225.png 300w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Album_3d-768x576.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/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\n<p>The Album\u00a0options are classified in two main groups:<\/p>\n<ul>\n<li><strong>General Properties<\/strong><em>\u00a0\u2014 <\/em>common for almost all types of Albums<\/li>\n<li><strong>Display\u00a0Typologies<\/strong><em> \u2014 <\/em>depending on Album type, these options are different<\/li>\n<\/ul>\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>General Properties<\/p><\/div>\n<ul>\n<li><strong>Album Categories<\/strong>\u00a0\u2014\u00a0filter items by categories; leave empty to select all items<\/li>\n<li><strong>Items\u00a0<\/strong>\u2014\u00a0you can choose specific items to display, by entering their ID&#8217;s, separated by comma. The ID could be taken from Album Item URL<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3408\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/id_album.jpg\" alt=\"\" width=\"501\" height=\"237\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/id_album.jpg 773w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/id_album-300x142.jpg 300w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/id_album-768x364.jpg 768w\" sizes=\"auto, (max-width: 501px) 100vw, 501px\" \/><\/p>\n<ul>\n<li><strong>Order by<\/strong>\u00a0\u2014\u00a0items can be organized by\u00a0<em>Date<\/em>, <em>Title<\/em>, <em>Author<\/em>, <em>ID<\/em>, <em>Last modified date<\/em> and <em>Parent ID<\/em><\/li>\n<li><strong>Order\u00a0<\/strong>\u2014\u00a0choose between <em>Ascending<\/em> and <em>Descending<\/em> order<\/li>\n<li><strong>Number of items<\/strong>\u00a0\u2014\u00a0enter the number of items to display<\/li>\n<li><strong>CSS class<\/strong>\u00a0\u2014 if it&#8217;s necessary\u00a0to add more style rules<\/li>\n<\/ul>\n\n<div id=\"display-typologies\"\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--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Display Typologies<\/p><\/div>\n<p>There are three\u00a0ways the Album will showcase on a site page, depending on your needs:<\/p>\n<ul>\n<li><strong>Masonry<\/strong> \u2014\u00a0a grid with multiple columns<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2831\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Display_mason.png\" alt=\"\" width=\"400\" height=\"399\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Display_mason.png 604w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Display_mason-150x150.png 150w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Display_mason-300x300.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/p>\n<ul>\n<li><strong>Slider\u00a0<\/strong>\u2014\u00a0a single item (image or video) showcased at a time, embellished with smooth effects. Read more about <a href=\"https:\/\/ombra.pikarthouse.com\/documentation\/portfolio\/create-exquisite-items\/#sliders\" target=\"_blank\" rel=\"noopener\"><em>sliders<\/em><\/a>.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2832\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Display_slider.png\" alt=\"\" width=\"400\" height=\"274\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Display_slider.png 604w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Display_slider-300x206.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/p>\n<ul>\n<li><strong>Carousel\u00a0<\/strong>\u2014 similar to slider, but carousel is able to showcase more than one items (image or video) at one\u00a0time. Read more about <a href=\"https:\/\/ombra.pikarthouse.com\/documentation\/portfolio\/create-exquisite-items\/#carousels\" target=\"_blank\" rel=\"noopener\"><em>carousels<\/em><\/a>.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-2833\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Display_carousel.png\" alt=\"\" width=\"399\" height=\"97\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Display_carousel.png 604w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/Display_carousel-300x73.png 300w\" sizes=\"auto, (max-width: 399px) 100vw, 399px\" \/><\/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\n<p>&nbsp;<\/p>\n<div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #ffffff; padding: 12px 12px 1px 12px; margin: 0px 0px -18px 0px; background-color: #4b917d;\"><p style=\"text-align: center;\">Common Options<\/p><\/div>\n<div class=\"pikode pikode--custom-content with-borders custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; color: #636363; padding: 24px 18px 0px 0px; border-width: 3px 0px 3px 0px; border-color: #ffffff; background-color: #f1f1f1;\"><ul>\n<li><strong>Overlay color\u00a0<\/strong>\u2014\u00a0color layer that covers the item when possible (exceptions: Shadow, Rising, Plain and List cards)<\/li>\n<li><strong>Overlay color transparency<\/strong> \u2014\u00a0color layer transparency (100% means the color is transparent)<\/li>\n<li><strong>Animation<\/strong>\u00a0\u2014\u00a0the way items appear on page while scrolling<\/li>\n<li><strong>Animation delay<\/strong> \u2014 set a delay time for animation, in <em>seconds<\/em> \u2014\u00a0<em>Minimum: 0 seconds, Maximum: 3 seconds<\/em><\/li>\n<\/ul><\/div>\n<div class=\"pikode pikode--cols cols \" style=\"margin-left: -3px;\" ><div class=\"pikode--column pikode--column--4\" style=\"border-left-width: 3px;\"><div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #ffffff; padding: 12px 12px 1px 12px; margin: 0px 0px -18px 0px; background-color: #4b917d;\"><p style=\"text-align: center;\">Masonry<\/p><\/div>\n<div class=\"pikode pikode--custom-content with-borders custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; color: #636363; padding: 24px 18px 0px 0px; border-width: 3px 0px 3px 0px; border-color: #ffffff; background-color: #f1f1f1;\"><ul>\n<li><strong>Categories filter<\/strong>\u00a0\u2014\u00a0positioned inside <em>General Properties<\/em> panel because of technical reasons, it helps to sort items based on categories: <em>Main Categories<\/em> shows just the categories without its child-categories, if comparing to <em>All Categories<\/em><\/li>\n<li><strong>Display<\/strong>\u00a0\u2014\u00a0the way items are displayed:\u00a0<em>Shadow, Move, Fade, Rising, Plain, List<\/em><\/li>\n<li><strong>Columns<\/strong>\u00a0\u2014\u00a0how many\u00a0items columns are displayed (1, 2, 3, 4 or 6)<\/li>\n<li><strong>Columns spacing<\/strong> \u2014\u00a0spacing between columns (pixels)<\/li>\n<\/ul><\/div><\/div><div class=\"pikode--column pikode--column--4\" style=\"border-left-width: 3px;\"><div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #ffffff; padding: 12px 12px 1px 12px; margin: 0px 0px -18px 0px; background-color: #4b917d;\"><p style=\"text-align: center;\">Slider<\/p><\/div>\n<div class=\"pikode pikode--custom-content with-borders custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; color: #636363; padding: 24px 18px 0px 0px; border-width: 3px 0px 3px 0px; border-color: #ffffff; background-color: #f1f1f1;\"><ul>\n<li><strong>Height<\/strong>\u00a0\u2014\u00a0slider height in pixels<\/li>\n<li><strong>Full-height<\/strong>\u00a0\u2014\u00a0slider height takes Window full-height. It overwrites height\u00a0specified at <em>Height<\/em> option mentioned before<\/li>\n<li><strong>Image scaling<\/strong>\u00a0\u2014\u00a0the way images scale on slider. Its two options have specific behaviours: \u00a0<em>Fill<\/em> &#8211; recommended for landscape images and\u00a0<em>Fit<\/em> &#8211; recommended for portrait images<\/li>\n<li><strong>Scroll down arrow<\/strong>\u00a0\u2014 useful when you use a fullscreen slider and you want to point out that below slider there is more content to see<\/li>\n<li><b>Title font-size<\/b> \u2014\u00a0set a custom font-size for Title you already specified in Album Post Type<\/li>\n<li><strong>Subtitle font-size<\/strong>\u00a0\u2014 set a custom font-size for Subtitle you already specified in Album Post Type<\/li>\n<li><strong>Show content<\/strong>\u00a0\u2014\u00a0content includes any text element slider might showcase: title, subtitle, description or button<\/li>\n<li><strong>Delay content<\/strong>\u00a0\u2014\u00a0timing delay before content shows up\u00a0after slide appearance\u00a0\u2014\u00a0<em>Minimum: 0 seconds, Maximum: 3 seconds<\/em><\/li>\n<li><strong>Parallax effect\u00a0<\/strong>\u2014 smooth scrolling effect\u00a0applied to\u00a0slider images<\/li>\n<\/ul><\/div><\/div><div class=\"pikode--column pikode--column--4\" style=\"border-left-width: 3px;\"><div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #ffffff; padding: 12px 12px 1px 12px; margin: 0px 0px -18px 0px; background-color: #4b917d;\"><p style=\"text-align: center;\">Carousel<\/p><\/div>\n<div class=\"pikode pikode--custom-content with-borders custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; color: #636363; padding: 24px 18px 0px 0px; border-width: 3px 0px 3px 0px; border-color: #ffffff; background-color: #f1f1f1;\"><ul>\n<li><strong>Height<\/strong>\u00a0\u2014\u00a0carousel height in pixels<\/li>\n<li><strong>Full-height<\/strong>\u00a0\u2014\u00a0carousel\u00a0height takes Window full-height. It overwrites height\u00a0specified at <em>Height<\/em> option mentioned before<\/li>\n<li><strong>Image scaling<\/strong>\u00a0\u2014 the way images scale on carousel. Its two options have specific behaviours: \u00a0<em>Fill<\/em> &#8211; recommended for landscape images and\u00a0<em>Fit<\/em> &#8211; recommended for portrait images<\/li>\n<li><strong>Scroll down arrow<\/strong>\u00a0\u2014 useful when you use a fullscreen slider and you want to point out that below slider there is more content to see<\/li>\n<li><strong>Slides\u00a0<\/strong>\u2014 how many\u00a0items slides are displayed at a time (3, 5 or 7)<\/li>\n<li><b>Slides spacing<\/b>\u00a0\u2014 spacing between\u00a0slides (pixels)<\/li>\n<\/ul><\/div><\/div><\/div>\n\n<div id=\"projects\"\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><a href=\"https:\/\/ombra.pikarthouse.com\/main\/portfolio-four-columns-layout\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: #4b917d;\">Projects<\/span><\/a><\/p><\/div>\n<p><strong>Projects\u00a0<\/strong>represent\u00a0a powerful and flexible shortcode that allows you to\u00a0showcase creatively the content, initialized before in Projects section. It consists of two parts <em>(as general principle, it is quite similar to <a href=\"#data-structure\">Album\u00a0structure<\/a>):<\/em><\/p>\n<ul>\n<li><strong>information data<\/strong> \u2014 it\u00a0is connected with Projects Post Type, where Projects Shortcode\u00a0takes data from, like\u00a0Title and Subtitle (represented by Taxonomies and Comments number)<\/li>\n<li><strong>display data<\/strong> \u2014 it\u00a0is composed of own options that allows to choose what type of content to\u00a0show and how to display it<\/li>\n<\/ul>\n<p>The Projects options are classified in two main groups:<\/p>\n<ul>\n<li><strong>General Properties<\/strong><em>\u00a0\u2014 <\/em>common for almost all types of\u00a0Projects<\/li>\n<li><strong>Display\u00a0Typologies<\/strong><em> \u2014 <\/em>depending on Projects type, these options are different<\/li>\n<\/ul>\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>General Properties<\/p><\/div>\n<ul>\n<li><strong>Projects Categories<\/strong>\u00a0\u2014\u00a0filter projects by categories; leave empty to select all projects<\/li>\n<li><strong>Items\u00a0<\/strong>\u2014\u00a0you can choose specific projects to display, by entering their ID&#8217;s, separated by comma. The ID could be taken from Project\u00a0URL<\/li>\n<\/ul>\n<p style=\"padding-left: 30px;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3409\" src=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/id_projects.jpg\" alt=\"\" width=\"499\" height=\"238\" srcset=\"https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/id_projects.jpg 768w, https:\/\/ombra.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/5\/2017\/05\/id_projects-300x143.jpg 300w\" sizes=\"auto, (max-width: 499px) 100vw, 499px\" \/><\/p>\n<ul>\n<li><strong>Order by<\/strong>\u00a0\u2014 projects can be organized by\u00a0<em>Date<\/em>, <em>Title<\/em>, <em>Author<\/em>, <em>ID<\/em>, <em>Last modified date<\/em> and <em>Parent ID<\/em><\/li>\n<li><strong>Order\u00a0<\/strong>\u2014\u00a0choose between <em>Ascending<\/em> and <em>Descending<\/em> order<\/li>\n<li><strong>Number of items<\/strong>\u00a0\u2014\u00a0enter the number if projects to display<\/li>\n<li><strong>CSS class<\/strong>\u00a0\u2014 in case there is a need\u00a0to add more style rules<\/li>\n<\/ul>\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>Display Typologies<\/p><\/div>\n<p>There are three\u00a0ways the Projects will showcase on a site page, depending on your needs <em>(for more visual details, please <a href=\"#display-typologies\">see<\/a>)<\/em>:<\/p>\n<ul>\n<li><strong>Masonry<\/strong> \u2014\u00a0a grid with multiple columns<\/li>\n<li><strong>Slider\u00a0<\/strong>\u2014\u00a0a single item showcased at a time, embellished with smooth effects.\u00a0Read more about <a href=\"https:\/\/ombra.pikarthouse.com\/documentation\/portfolio\/create-exquisite-items\/#sliders\" target=\"_blank\" rel=\"noopener\"><em>sliders<\/em><\/a>.<\/li>\n<li><strong>Carousel\u00a0<\/strong>\u2014 similar to slider, but carousel is able to showcase more than one items at one time.\u00a0Read more about <a href=\"https:\/\/ombra.pikarthouse.com\/documentation\/portfolio\/create-exquisite-items\/#carousels\" target=\"_blank\" rel=\"noopener\"><em>carousels<\/em><\/a>.<\/li>\n<\/ul>\n<div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #ffffff; padding: 12px 12px 1px 12px; margin: 0px 0px -18px 0px; background-color: #4b917d;\"><p style=\"text-align: center;\">Common Options<\/p><\/div>\n<div class=\"pikode pikode--custom-content with-borders custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; color: #636363; padding: 24px 18px 0px 0px; border-width: 3px 0px 3px 0px; border-color: #ffffff; background-color: #f1f1f1;\"><ul>\n<li><strong>Overlay color\u00a0<\/strong>\u2014\u00a0color layer that covers the\u00a0project when possible (exceptions: Shadow, Rising, Plain and List cards)<\/li>\n<li><strong>Overlay color transparency<\/strong> \u2014\u00a0color layer transparency (100% means the color is transparent)<\/li>\n<li><strong>Animation<\/strong>\u00a0\u2014\u00a0the way items appear on page while scrolling<\/li>\n<li><strong>Animation delay<\/strong> \u2014 set a delay time for animation, in <em>seconds<\/em> \u2014\u00a0<em>Minimum: 0 seconds, Maximum: 3 seconds<\/em><\/li>\n<\/ul><\/div>\n<div class=\"pikode pikode--cols cols \" style=\"margin-left: -3px;\" ><div class=\"pikode--column pikode--column--4\" style=\"border-left-width: 3px;\"><div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #ffffff; padding: 12px 12px 1px 12px; margin: 0px 0px -18px 0px; background-color: #4b917d;\"><p style=\"text-align: center;\">Masonry<\/p><\/div>\n<div class=\"pikode pikode--custom-content with-borders custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; color: #636363; padding: 24px 18px 0px 0px; border-width: 3px 0px 3px 0px; border-color: #ffffff; background-color: #f1f1f1;\"><ul>\n<li><strong>Categories filter<\/strong>\u00a0\u2014\u00a0positioned inside <em>General Properties<\/em> panel because of technical reasons, it helps to sort projects based on categories: <em>Main Categories<\/em> shows just the categories without its child-categories, if comparing to <em>All Categories<\/em><\/li>\n<li><strong>Display<\/strong>\u00a0\u2014\u00a0the way projects are displayed:\u00a0<em>Shadow, Move, Fade, Rising<\/em><em>, Plain, List<\/em><\/li>\n<li><strong>Columns<\/strong>\u00a0\u2014\u00a0how many projects columns are displayed (1, 2, 3, 4 or 6)<\/li>\n<li><strong>Columns spacing<\/strong> \u2014\u00a0spacing between columns (pixels)<\/li>\n<\/ul><\/div><\/div><div class=\"pikode--column pikode--column--4\" style=\"border-left-width: 3px;\"><div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #ffffff; padding: 12px 12px 1px 12px; margin: 0px 0px -18px 0px; background-color: #4b917d;\"><p style=\"text-align: center;\">Slider<\/p><\/div>\n<div class=\"pikode pikode--custom-content with-borders custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; color: #636363; padding: 24px 18px 0px 0px; border-width: 3px 0px 3px 0px; border-color: #ffffff; background-color: #f1f1f1;\"><ul>\n<li><strong>Height<\/strong>\u00a0\u2014\u00a0slider height in pixels<\/li>\n<li><strong>Full-height<\/strong>\u00a0\u2014\u00a0slider height takes Window full-height. It overwrites height\u00a0specified at <em>Height<\/em> option mentioned before<\/li>\n<li><strong>Image scaling<\/strong>\u00a0\u2014\u00a0the way images scale on slider. Its two options have specific behaviours: \u00a0<em>Fill<\/em> &#8211; recommended for landscape images and\u00a0<em>Fit<\/em> &#8211; recommended for portrait images<\/li>\n<li><strong>Scroll down arrow<\/strong>\u00a0\u2014 useful when you use a fullscreen slider and you want to point out that below slider there is more content to see<\/li>\n<li><b>Title font-size<\/b> \u2014\u00a0set a custom font-size for Title you already specified in Projects Post Type<\/li>\n<li><strong>Subtitle font-size<\/strong>\u00a0\u2014 set a custom font-size for Subtitle you already specified in Projects Post Type<\/li>\n<li><strong>Show content<\/strong>\u00a0\u2014\u00a0content includes any text element slider might showcase: title, subtitle, description or button<\/li>\n<li><strong>Delay content<\/strong>\u00a0\u2014\u00a0timing delay before content shows up\u00a0after slide appearance\u00a0\u2014\u00a0<em>Minimum: 0 seconds, Maximum: 3 seconds<\/em><\/li>\n<li><strong>Parallax effect\u00a0<\/strong>\u2014 smooth scrolling effect\u00a0applied to\u00a0slider images<\/li>\n<\/ul><\/div><\/div><div class=\"pikode--column pikode--column--4\" style=\"border-left-width: 3px;\"><div class=\"pikode pikode--custom-content  custom-content--21\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #ffffff; padding: 12px 12px 1px 12px; margin: 0px 0px -18px 0px; background-color: #4b917d;\"><p style=\"text-align: center;\">Carousel<\/p><\/div>\n<div class=\"pikode pikode--custom-content with-borders custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; color: #636363; padding: 24px 18px 0px 0px; border-width: 3px 0px 3px 0px; border-color: #ffffff; background-color: #f1f1f1;\"><ul>\n<li><strong>Height<\/strong>\u00a0\u2014\u00a0carousel height in pixels<\/li>\n<li><strong>Full-height<\/strong>\u00a0\u2014\u00a0carousel\u00a0height takes Window full-height. It overwrites height\u00a0specified at <em>Height<\/em> option mentioned before<\/li>\n<li><strong>Image scaling<\/strong>\u00a0\u2014 the way images scale on carousel. Its two options have specific behaviours: \u00a0<em>Fill<\/em> &#8211; recommended for landscape images and\u00a0<em>Fit<\/em> &#8211; recommended for portrait images<\/li>\n<li><strong>Scroll down arrow<\/strong>\u00a0\u2014 useful when you use a fullscreen slider and you want to point out that below slider there is more content to see<\/li>\n<li><strong>Slides\u00a0<\/strong>\u2014 how many\u00a0items slides are displayed at a time (3, 5 or 7)<\/li>\n<li><b>Slides spacing<\/b>\u00a0\u2014 spacing between\u00a0slides (pixels)<\/li>\n<\/ul><\/div><\/div><\/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","protected":false},"excerpt":{"rendered":"<p>The Shortcode Media Elements\u00a0are conceived to showcase your portfolio or other interactive items, like images or videos, in so many creative manners. Even if at first sight, these two shortcodes are similar in the matter of options and display, there are couple of important features that differentiate them. By knowing the distinctions between them, you [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1399,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1407","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1407","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=1407"}],"version-history":[{"count":42,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1407\/revisions"}],"predecessor-version":[{"id":3791,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1407\/revisions\/3791"}],"up":[{"embeddable":true,"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1399"}],"wp:attachment":[{"href":"https:\/\/ombra.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/media?parent=1407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}