{"id":84,"date":"2018-06-25T14:17:31","date_gmt":"2018-06-25T14:17:31","guid":{"rendered":"https:\/\/documentation.px-lab.com\/rscard-html\/?p=84"},"modified":"2018-06-25T14:18:24","modified_gmt":"2018-06-25T14:18:24","slug":"portfolio","status":"publish","type":"post","link":"https:\/\/documentation.px-lab.com\/rscard-html\/2018\/06\/25\/portfolio\/","title":{"rendered":"Portfolio"},"content":{"rendered":"

Each portfolio item should have following html structure:<\/p>\n

<div class=\"grid-item [size]<\/strong> [category]<\/strong>\">\r\n    <div class=\"grid-box\">     \r\n\r\n      <figure class=\"portfolio-figure\">\r\n            <img src=\"http:\/\/image_url\" alt=\"\"\/>\r\n            <figcaption class=\"portfolio-caption\">\r\n                <div class=\"portfolio-caption-inner\">\r\n                    <h3 class=\"portfolio-title\">Project Title<\/h3>\r\n                    <h4 class=\"portfolio-cat\">Project Category<\/h4>\r\n\r\n                    <div class=\"btn-group\">\r\n                        <a class=\"btn-link\" href=\"http:\/\/project_url\" target=\"_blank\"><i class=\"rsicon rsicon-link\"><\/i><\/a>\r\n                        <a class=\"portfolioFancybox btn-zoom\" data-fancybox-group=\"portfolioFancybox[number]<\/strong>\" href=\"#portfolio[number]<\/strong>-inline1\"><i class=\"icon icon-eye\"><\/i><\/a>\r\n                        <a class=\"portfolioFancybox hidden\" data-fancybox-group=\"portfolioFancybox[number]<\/strong>\" href=\"#portfolio[number]<\/strong>-inline2\"><\/a>\r\n                        <a class=\"portfolioFancybox hidden\" data-fancybox-group=\"portfolioFancybox[number]<\/strong>\" href=\"#portfolio[number]<\/strong>-inline3\"><\/a>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/figcaption>\r\n        <\/figure>\r\n\r\n        <!-- Start: Portfolio Inline Boxes -->\r\n        <div id=\"portfolio[number]-inline1\" class=\"fancybox-inline-box\"> [popup content] <\/strong><\/div>\r\n        <div id=\"portfolio[number]-inline2\" class=\"fancybox-inline-box\"> [popup content] <\/strong><\/div> \r\n        <div id=\"portfolio[number]-inline3\" class=\"fancybox-inline-box\"> [popup content]<\/strong> <\/div>\r\n        <!-- End: Portfolio Inline Boxes -->\r\n\r\n    <\/div>\r\n<\/div><!-- .grid-item --><\/pre>\n
[size] <\/strong>– we have two predefined sizes for portfolio items, large and small. For large items use size22 <\/strong>class, for small ones use size11 <\/strong>class.
\n[category]<\/strong> – portfolio category, used for filtering. You can provide more than one class for filtering, for example photography, nature …<\/strong>
\n[number] <\/strong>– each portfolio should have uniq number
\n[popup content] <\/strong>– in general can be any html content, we provide media + title + text<\/strong>. For media you can use image, custom video, iframe (youtube, vimeo, dailymotion …).<\/p>\n
For ajax loading (when click ‘+’ button) add portfolio items \u00a0in \/ajax\/portfolio.html<\/strong> file.<\/p>\n
Portfolio Content\u00a0<\/strong>should have following html structure:<\/p>\n
<div id=\"ID\" class=\"fancybox-inline-box\">\r\n     <div class=\"inline-embed\" ... >...<\/div>\r\n     <div class=\"inline-cont\">\r\n          <h2 class=\"inline-title\">Title<\/h2>\r\n          <div class=\"inline-text\">Content<\/div>\r\n     <\/div>\r\n<\/div><\/pre>\n
We use <div class=”inline-embed”><\/div> element to insert different media (image, iframe, custom video) into popup<\/p>\n
<!-- Image -->\r\n<div class=\"inline-embed\" data-embed-type=\"image\" data-embed-url=\"image.jpg\"><\/div>\r\n\r\n<!-- Vimeo -->\r\n<div class=\"inline-embed\" data-embed-type=\"iframe\" data-embed-url=\"https:\/\/player.vimeo.com\/video\/118244244\"><\/div>\r\n\r\n<!-- Dailymotion -->\r\n<div class=\"inline-embed\" data-embed-type=\"iframe\" data-embed-url=\"https:\/\/www.dailymotion.com\/embed\/video\/x314rdy\"><\/div>\r\n\r\n<!-- Youtube -->\r\n<div class=\"inline-embed\" data-embed-type=\"iframe\" data-embed-url=\"https:\/\/www.youtube.com\/embed\/mZb_gat5YCY\"><\/div>\r\n\r\n<!-- Custom Video -->\r\n<div class=\"inline-embed\" data-embed-type=\"video\">\r\n    <video width=\"100%\" height=\"100%\" poster=\"img\/uploads\/media\/echo-hereweare.jpg\" controls=\"controls\" preload=\"none\">\r\n        <source type=\"video\/mp4\" src=\"video_url.mp4\" \/>\r\n        <source type=\"video\/webm\" src=\"video_url.webm\" \/>\r\n        <source type=\"video\/ogg\" src=\"video_url.ogv\" \/>\r\n    <\/video>\r\n<\/div><\/pre>\n","protected":false},"excerpt":{"rendered":"
Each portfolio item should have following html structure: <div class=”grid-item [size] [category]”> <div class=”grid-box”> <figure class=”portfolio-figure”> <img src=”http:\/\/image_url” alt=””\/> <figcaption class=”portfolio-caption”> <div class=”portfolio-caption-inner”> <h3 class=”portfolio-title”>Project Title<\/h3> <h4 class=”portfolio-cat”>Project Category<\/h4> <div class=”btn-group”> <a class=”btn-link” href=”http:\/\/project_url” target=”_blank”><i class=”rsicon rsicon-link”><\/i><\/a> <a class=”portfolioFancybox btn-zoom” data-fancybox-group=”portfolioFancybox[number]” href=”#portfolio[number]-inline1″><i class=”icon icon-eye”><\/i><\/a> <a class=”portfolioFancybox hidden” data-fancybox-group=”portfolioFancybox[number]” href=”#portfolio[number]-inline2″><\/a> <a class=”portfolioFancybox hidden” data-fancybox-group=”portfolioFancybox[number]” href=”#portfolio[number]-inline3″><\/a> <\/div> […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"_links":{"self":[{"href":"https:\/\/documentation.px-lab.com\/rscard-html\/wp-json\/wp\/v2\/posts\/84"}],"collection":[{"href":"https:\/\/documentation.px-lab.com\/rscard-html\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/documentation.px-lab.com\/rscard-html\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/documentation.px-lab.com\/rscard-html\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/documentation.px-lab.com\/rscard-html\/wp-json\/wp\/v2\/comments?post=84"}],"version-history":[{"count":2,"href":"https:\/\/documentation.px-lab.com\/rscard-html\/wp-json\/wp\/v2\/posts\/84\/revisions"}],"predecessor-version":[{"id":87,"href":"https:\/\/documentation.px-lab.com\/rscard-html\/wp-json\/wp\/v2\/posts\/84\/revisions\/87"}],"wp:attachment":[{"href":"https:\/\/documentation.px-lab.com\/rscard-html\/wp-json\/wp\/v2\/media?parent=84"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/documentation.px-lab.com\/rscard-html\/wp-json\/wp\/v2\/categories?post=84"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/documentation.px-lab.com\/rscard-html\/wp-json\/wp\/v2\/tags?post=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}