{"id":295,"date":"2014-05-24T06:31:00","date_gmt":"2014-05-24T11:31:00","guid":{"rendered":"http:\/\/theme.co\/x\/demo\/integrity\/10\/?page_id=295"},"modified":"2016-06-16T14:37:26","modified_gmt":"2016-06-16T14:37:26","slug":"images","status":"publish","type":"page","link":"https:\/\/demo.theme.co\/icon-1\/shortcodes\/images\/","title":{"rendered":"Images"},"content":{"rendered":"<p>Prepare to take your photographs to the next level with X! Many themes give you the ability to add frames or styles to your images, but we didn&#8217;t feel like stopping there. Easily add links to your images, or a popover or tooltip if you need to add some extra information to your photograph to give a little more information on it. Easily stack your images inside of other shortcodes like accordions, tabs, block grids, and more, to see what sort of exciting combinations you come up with! Scroll down the page and make sure to hover over the images to see which ones have popover info.<\/p>\n<div class=\"center-text\">\n<img  class=\"x-img x-img-rounded\"  src=\"\/\/theme.co\/media\/x-img-demo-2.jpg\" alt=\"Example\">\n<pre  class=\"x-code\" style=\"margin-top: 12px; text-align: left;\"><code>[image type=\"rounded\" src=\"https:\/\/yourdomain.com\/image.jpg\" alt=\"Text\"]<\/code><\/pre>\n<img  class=\"x-img x-img-circle\" style=\"margin: 7.5% 0 0;\" src=\"\/\/theme.co\/media\/x-img-demo-1.jpg\" alt=\"Example\">\n<pre  class=\"x-code\" style=\"margin-top: 12px; text-align: left;\"><code>[image type=\"circle\" src=\"https:\/\/yourdomain.com\/image.jpg\" alt=\"Text\"]<\/code><\/pre>\n<img  class=\"x-img x-img-thumbnail\" style=\"margin: 7.5% 0 0;\" src=\"\/\/theme.co\/media\/x-img-demo-2.jpg\" alt=\"Example\">\n<pre  class=\"x-code\" style=\"margin-top: 12px; text-align: left;\"><code>[image type=\"thumbnail\" src=\"https:\/\/yourdomain.com\/image.jpg\" alt=\"Text\"]<\/code><\/pre>\n<img  class=\"x-img x-img-circle\" style=\"margin: 7.5% 0 0;\" src=\"\/\/theme.co\/media\/x-img-demo-2.jpg\" alt=\"Example\">\n<pre  class=\"x-code\" style=\"margin-top: 12px; text-align: left;\"><code>[image type=\"circle\" src=\"https:\/\/yourdomain.com\/image.jpg\" alt=\"Text\"]<\/code><\/pre>\n<a  class=\"x-img x-img-link x-img-thumbnail\" style=\"margin: 7.5% 0 0;\" href=\"#example\" title=\"Extra Information\"  data-x-element=\"extra\" data-x-params=\"{&quot;type&quot;:&quot;popover&quot;,&quot;trigger&quot;:&quot;hover&quot;,&quot;placement&quot;:&quot;top&quot;,&quot;title&quot;:&quot;&quot;,&quot;content&quot;:&quot;Add in a little extra information here to describe the story behind your photographs!&quot;}\"   data-options=\"thumbnail: '\/\/theme.co\/media\/x-img-demo-2.jpg'\"><img src=\"\/\/theme.co\/media\/x-img-demo-2.jpg\" alt=\"Example\"><\/a>\n<pre  class=\"x-code\" style=\"margin-top: 12px; text-align: left;\"><code>[image type=\"thumbnail\" src=\"\/\/theme.co\/media\/x-img-demo-2.jpg\" link=\"true\" href=\"#example\" info=\"popover\" info_place=\"top\" info_trigger=\"hover\" info_content=\"Add in a little extra information here to describe the story behind your photographs!\" title=\"Extra Information\" alt=\"Example\"]<\/code><\/pre>\n<ul  class=\"x-block-grid two-up\" style=\"margin-top: 7.5%;\">\n<li  class=\"x-block-grid-item\" ><a  class=\"x-img x-img-link x-img-thumbnail\"  href=\"#example\" title=\"Hey There!\"  data-x-element=\"extra\" data-x-params=\"{&quot;type&quot;:&quot;tooltip&quot;,&quot;trigger&quot;:&quot;hover&quot;,&quot;placement&quot;:&quot;right&quot;,&quot;title&quot;:&quot;&quot;,&quot;content&quot;:&quot;&quot;}\"   data-options=\"thumbnail: '\/\/theme.co\/media\/x-img-demo-2.jpg'\"><img src=\"\/\/theme.co\/media\/x-img-demo-2.jpg\" alt=\"Text\"><\/a><\/li>\n<li  class=\"x-block-grid-item\" ><a  class=\"x-img x-img-link x-img-thumbnail\"  href=\"#example\" title=\"Hey There!\"  data-x-element=\"extra\" data-x-params=\"{&quot;type&quot;:&quot;tooltip&quot;,&quot;trigger&quot;:&quot;hover&quot;,&quot;placement&quot;:&quot;bottom&quot;,&quot;title&quot;:&quot;&quot;,&quot;content&quot;:&quot;&quot;}\"   data-options=\"thumbnail: '\/\/theme.co\/media\/x-img-demo-2.jpg'\"><img src=\"\/\/theme.co\/media\/x-img-demo-2.jpg\" alt=\"Text\"><\/a><\/li>\n<li  class=\"x-block-grid-item\" ><a  class=\"x-img x-img-link x-img-thumbnail\"  href=\"#example\" title=\"Hey There!\"  data-x-element=\"extra\" data-x-params=\"{&quot;type&quot;:&quot;tooltip&quot;,&quot;trigger&quot;:&quot;hover&quot;,&quot;placement&quot;:&quot;top&quot;,&quot;title&quot;:&quot;&quot;,&quot;content&quot;:&quot;&quot;}\"   data-options=\"thumbnail: '\/\/theme.co\/media\/x-img-demo-2.jpg'\"><img src=\"\/\/theme.co\/media\/x-img-demo-2.jpg\" alt=\"Text\"><\/a><\/li>\n<li  class=\"x-block-grid-item\" ><a  class=\"x-img x-img-link x-img-thumbnail\"  href=\"#example\" title=\"Hey There!\"  data-x-element=\"extra\" data-x-params=\"{&quot;type&quot;:&quot;tooltip&quot;,&quot;trigger&quot;:&quot;hover&quot;,&quot;placement&quot;:&quot;left&quot;,&quot;title&quot;:&quot;&quot;,&quot;content&quot;:&quot;&quot;}\"   data-options=\"thumbnail: '\/\/theme.co\/media\/x-img-demo-2.jpg'\"><img src=\"\/\/theme.co\/media\/x-img-demo-2.jpg\" alt=\"Text\"><\/a><\/li>\n<\/ul>\n<pre  class=\"x-code\" style=\"margin-top: 12px; text-align: left;\"><code>[block_grid type=\"two-up\"] [block_grid_item] [image type=\"thumbnail\" src=\"https:\/\/yourdomain.com\/image.jpg\" link=\"true\" href=\"#example\" info=\"tooltip\" info_place=\"right\" info_trigger=\"hover\" title=\"Hey There!\" alt=\"Text\"] [\/block_grid_item] [block_grid_item] [image type=\"thumbnail\" src=\"https:\/\/yourdomain.com\/image.jpg\" link=\"true\" href=\"#example\" info=\"tooltip\" info_place=\"bottom\" info_trigger=\"hover\" title=\"Hey There!\" alt=\"Example\"] [\/block_grid_item] [block_grid_item] [image type=\"thumbnail\" src=\"https:\/\/yourdomain.com\/image.jpg\" link=\"true\" href=\"#example\" info=\"tooltip\" info_place=\"top\" info_trigger=\"hover\" title=\"Hey There!\" alt=\"Example\"] [\/block_grid_item] [block_grid_item] [image type=\"thumbnail\" src=\"https:\/\/yourdomain.com\/image.jpg\" link=\"true\" href=\"#example\" info=\"tooltip\" info_place=\"left\" info_trigger=\"hover\" title=\"Hey There!\" alt=\"Example\"] [\/block_grid_item] [\/block_grid]<\/code><\/pre>\n<\/p><\/div>\n<h2  class=\"h-custom-headline h5 accent\" ><span>Options<\/span><\/h2>\n<ul class=\"x-ul-icons\"  >\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>id<\/strong>: add a unique ID to the shortcode.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>class<\/strong>: add a class or multiple classes to the shortcode. <\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>style<\/strong>: add inline styles to the shortcode.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>type<\/strong>: &#8220;rounded,&#8221; &#8220;circle,&#8221; or &#8220;thumbnail.&#8221;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>float<\/strong>: &#8220;left&#8221; or &#8220;right.&#8221;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>src<\/strong>: the path to your image.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>alt<\/strong>: alt text for your image.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>link<\/strong>: input &#8220;true&#8221; to wrap the image in an anchor tag.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>href<\/strong>: the URL that you want the image to link to.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>title<\/strong>: the title of the link.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>target<\/strong>: input &#8220;blank&#8221; to have the link open in a new window.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>info<\/strong>: &#8220;popover&#8221; or &#8220;tooltip.&#8221;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>info_place<\/strong>: &#8220;top,&#8221; &#8220;right,&#8221; &#8220;bottom,&#8221; or &#8220;left.&#8221;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>info_trigger<\/strong>: &#8220;hover,&#8221; &#8220;click,&#8221; or &#8220;focus.&#8221;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>info_content<\/strong>: extra content for the popover.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Prepare to take your photographs to the next level with X! Many themes give you the ability to add frames or styles to your images, but we didn&#8217;t feel like stopping there. Easily add links to your images, or a popover or tooltip if you need to add some extra information to your photograph to give a little more information &#8230;<\/p>\n","protected":false},"author":16,"featured_media":0,"parent":259,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"_links":{"self":[{"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/pages\/295"}],"collection":[{"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/comments?post=295"}],"version-history":[{"count":2,"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/pages\/295\/revisions"}],"predecessor-version":[{"id":7889,"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/pages\/295\/revisions\/7889"}],"up":[{"embeddable":true,"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/pages\/259"}],"wp:attachment":[{"href":"https:\/\/demo.theme.co\/icon-1\/wp-json\/wp\/v2\/media?parent=295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}