{"id":955,"date":"2023-01-25T18:15:32","date_gmt":"2023-01-25T17:15:32","guid":{"rendered":"https:\/\/osiris.itabc.cnr.it\/aton\/?page_id=955"},"modified":"2026-04-16T12:40:25","modified_gmt":"2026-04-16T10:40:25","slug":"embed-galleries","status":"publish","type":"page","link":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/tutorials\/embed-galleries\/","title":{"rendered":"Embed Galleries"},"content":{"rendered":"\n<p>This small tutorial allows to embed a <strong>gallery <\/strong>of 3D scenes on <strong>your website<\/strong> (standard webpage, CMS, etc.) given an <a data-type=\"page\" data-id=\"695\" href=\"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/tutorials\/getting-started\/\">up &amp; running instance of ATON<\/a>, with different options. This can be also very handy to create custom galleries for museum kiosks, exhibits or demos.<\/p>\n\n\n\n<p>You can show a responsive gallery of 3D scenes via a given <strong>term <\/strong>(a keyword, a set, etc.) that you assigned, using<\/p>\n\n\n\n<p class=\"has-text-align-center\"><code>&lt;your-ATON-IP-or-domain>\/gallery\/?<strong>k=&lt;term><\/strong><\/code><\/p>\n\n\n\n<p>For instance, <strong><a href=\"https:\/\/aton.ispc.cnr.it\/gallery\/?k=multires\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/aton.ispc.cnr.it\/gallery\/?k=multires<\/a><\/strong> will create a gallery of public 3D scenes matching the term &#8220;<strong><em>multires<\/em><\/strong>&#8221; from our main instance <strong>https:\/\/aton.ispc.cnr.it<\/strong>:<\/p>\n\n\n\n<iframe loading=\"lazy\" style=\"height:700px; margin:0;\" src=\"https:\/\/aton.ispc.cnr.it\/gallery\/?k=multires\" width=\"100%\" height=\"500px\" frameborder=\"0\" allow=\"autoplay; fullscreen; xr-spatial-tracking\" xr-spatial-tracking=\"\" execution-while-out-of-viewport=\"\" execution-while-not-rendered=\"\" web-share=\"\" allowfullscreen=\"\" mozallowfullscreen=\"true\" webkitallowfullscreen=\"true\"><\/iframe>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>or using <strong><em>roman<\/em><\/strong> (<strong><a href=\"https:\/\/aton.ispc.cnr.it\/gallery\/?k=roman\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/aton.ispc.cnr.it\/gallery\/?k=roman<\/a><\/strong>):<\/p>\n\n\n\n<iframe loading=\"lazy\" style=\"height:700px; margin:0;\" src=\"https:\/\/aton.ispc.cnr.it\/gallery\/?k=roman\" width=\"100%\" height=\"500px\" frameborder=\"0\" allow=\"autoplay; fullscreen; xr-spatial-tracking\" xr-spatial-tracking=\"\" execution-while-out-of-viewport=\"\" execution-while-not-rendered=\"\" web-share=\"\" allowfullscreen=\"\" mozallowfullscreen=\"true\" webkitallowfullscreen=\"true\"><\/iframe>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>You can change background via <strong>bg <\/strong>option, providing<strong>r,g,b,a<\/strong> CSS values &#8211; for instance 255,255,210,1  (<a href=\"https:\/\/aton.ispc.cnr.it\/gallery\/?k=roman&amp;bg=255,255,210,1\">https:\/\/aton.ispc.cnr.it\/gallery\/?k=roman&amp;bg=255,255,210,1<\/a>):<\/p>\n\n\n\n<iframe loading=\"lazy\" style=\"height:700px; margin:0;\" src=\"https:\/\/aton.ispc.cnr.it\/gallery\/?k=roman&amp;bg=255,255,210,1\" width=\"100%\" height=\"500px\" frameborder=\"0\" allow=\"autoplay; fullscreen; xr-spatial-tracking\" xr-spatial-tracking=\"\" execution-while-out-of-viewport=\"\" execution-while-not-rendered=\"\" web-share=\"\" allowfullscreen=\"\" mozallowfullscreen=\"true\" webkitallowfullscreen=\"true\"><\/iframe>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>You can remove the main query term for the gallery via <strong>hide <\/strong>option &#8211; for instance <strong>hide=term<\/strong>. In this sample below, we are removing term and also applying a transparent background (alpha=0) using <strong><a href=\"https:\/\/aton.ispc.cnr.it\/gallery\/?k=roman&amp;bg=0,0,0,0&amp;hide=term\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/aton.ispc.cnr.it\/gallery\/?k=roman&amp;bg=0,0,0,0&amp;hide=term<\/a><\/strong>:<\/p>\n\n\n\n<iframe loading=\"lazy\" style=\"height:700px; margin:0;\" src=\"https:\/\/aton.ispc.cnr.it\/gallery\/?k=roman&amp;bg=0,0,0,0&amp;hide=term\" width=\"100%\" height=\"500px\" frameborder=\"0\" allow=\"autoplay; fullscreen; xr-spatial-tracking\" xr-spatial-tracking=\"\" execution-while-out-of-viewport=\"\" execution-while-not-rendered=\"\" web-share=\"\" allowfullscreen=\"\" mozallowfullscreen=\"true\" webkitallowfullscreen=\"true\"><\/iframe>\n\n\n\n<p>or changing the size of scene cards via size parameters (<strong><a href=\"https:\/\/aton.ispc.cnr.it\/gallery\/?k=3dgs&amp;size=small\">https:\/\/aton.ispc.cnr.it\/gallery\/?k=3dgs&amp;size=small<\/a><\/strong>):<\/p>\n\n\n\n<iframe loading=\"lazy\" style=\"height:700px; margin:0;\" src=\"https:\/\/aton.ispc.cnr.it\/gallery\/?k=3dgs&#038;size=small\" width=\"100%\" height=\"500px\" frameborder=\"0\" allow=\"autoplay; fullscreen; xr-spatial-tracking\" xr-spatial-tracking=\"\" execution-while-out-of-viewport=\"\" execution-while-not-rendered=\"\" web-share=\"\" allowfullscreen=\"\" mozallowfullscreen=\"true\" webkitallowfullscreen=\"true\"><\/iframe>\n","protected":false},"excerpt":{"rendered":"<p>This small tutorial allows to embed a gallery of 3D scenes on your website (standard webpage, CMS, etc.) given an up &amp; running instance of ATON, with different options. This can be also very handy to create custom galleries for museum kiosks, exhibits or demos. You can show a responsive gallery of 3D scenes via [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":253,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-955","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Embed Galleries - ATON<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/tutorials\/embed-galleries\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Embed Galleries - ATON\" \/>\n<meta property=\"og:description\" content=\"This small tutorial allows to embed a gallery of 3D scenes on your website (standard webpage, CMS, etc.) given an up &amp; running instance of ATON, with different options. This can be also very handy to create custom galleries for museum kiosks, exhibits or demos. You can show a responsive gallery of 3D scenes via [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/tutorials\/embed-galleries\/\" \/>\n<meta property=\"og:site_name\" content=\"ATON\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-16T10:40:25+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/osiris.itabc.cnr.it\\\/aton\\\/index.php\\\/tutorials\\\/embed-galleries\\\/\",\"url\":\"https:\\\/\\\/osiris.itabc.cnr.it\\\/aton\\\/index.php\\\/tutorials\\\/embed-galleries\\\/\",\"name\":\"Embed Galleries - ATON\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/osiris.itabc.cnr.it\\\/aton\\\/#website\"},\"datePublished\":\"2023-01-25T17:15:32+00:00\",\"dateModified\":\"2026-04-16T10:40:25+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/osiris.itabc.cnr.it\\\/aton\\\/index.php\\\/tutorials\\\/embed-galleries\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/osiris.itabc.cnr.it\\\/aton\\\/index.php\\\/tutorials\\\/embed-galleries\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/osiris.itabc.cnr.it\\\/aton\\\/index.php\\\/tutorials\\\/embed-galleries\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/osiris.itabc.cnr.it\\\/aton\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorials\",\"item\":\"https:\\\/\\\/osiris.itabc.cnr.it\\\/aton\\\/index.php\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Embed Galleries\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/osiris.itabc.cnr.it\\\/aton\\\/#website\",\"url\":\"https:\\\/\\\/osiris.itabc.cnr.it\\\/aton\\\/\",\"name\":\"ATON\",\"description\":\"open-source Web3D\\\/WebXR framework by CNR ISPC\",\"publisher\":{\"@id\":\"https:\\\/\\\/osiris.itabc.cnr.it\\\/aton\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/osiris.itabc.cnr.it\\\/aton\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/osiris.itabc.cnr.it\\\/aton\\\/#organization\",\"name\":\"ATON\",\"url\":\"https:\\\/\\\/osiris.itabc.cnr.it\\\/aton\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/osiris.itabc.cnr.it\\\/aton\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/osiris.itabc.cnr.it\\\/aton\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/aton-logo-100.png\",\"contentUrl\":\"https:\\\/\\\/osiris.itabc.cnr.it\\\/aton\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/aton-logo-100.png\",\"width\":100,\"height\":100,\"caption\":\"ATON\"},\"image\":{\"@id\":\"https:\\\/\\\/osiris.itabc.cnr.it\\\/aton\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Embed Galleries - ATON","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/tutorials\/embed-galleries\/","og_locale":"en_US","og_type":"article","og_title":"Embed Galleries - ATON","og_description":"This small tutorial allows to embed a gallery of 3D scenes on your website (standard webpage, CMS, etc.) given an up &amp; running instance of ATON, with different options. This can be also very handy to create custom galleries for museum kiosks, exhibits or demos. You can show a responsive gallery of 3D scenes via [&hellip;]","og_url":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/tutorials\/embed-galleries\/","og_site_name":"ATON","article_modified_time":"2026-04-16T10:40:25+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/tutorials\/embed-galleries\/","url":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/tutorials\/embed-galleries\/","name":"Embed Galleries - ATON","isPartOf":{"@id":"https:\/\/osiris.itabc.cnr.it\/aton\/#website"},"datePublished":"2023-01-25T17:15:32+00:00","dateModified":"2026-04-16T10:40:25+00:00","breadcrumb":{"@id":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/tutorials\/embed-galleries\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/tutorials\/embed-galleries\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/tutorials\/embed-galleries\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/osiris.itabc.cnr.it\/aton\/"},{"@type":"ListItem","position":2,"name":"Tutorials","item":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/tutorials\/"},{"@type":"ListItem","position":3,"name":"Embed Galleries"}]},{"@type":"WebSite","@id":"https:\/\/osiris.itabc.cnr.it\/aton\/#website","url":"https:\/\/osiris.itabc.cnr.it\/aton\/","name":"ATON","description":"open-source Web3D\/WebXR framework by CNR ISPC","publisher":{"@id":"https:\/\/osiris.itabc.cnr.it\/aton\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/osiris.itabc.cnr.it\/aton\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/osiris.itabc.cnr.it\/aton\/#organization","name":"ATON","url":"https:\/\/osiris.itabc.cnr.it\/aton\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/osiris.itabc.cnr.it\/aton\/#\/schema\/logo\/image\/","url":"https:\/\/osiris.itabc.cnr.it\/aton\/wp-content\/uploads\/2022\/12\/aton-logo-100.png","contentUrl":"https:\/\/osiris.itabc.cnr.it\/aton\/wp-content\/uploads\/2022\/12\/aton-logo-100.png","width":100,"height":100,"caption":"ATON"},"image":{"@id":"https:\/\/osiris.itabc.cnr.it\/aton\/#\/schema\/logo\/image\/"}}]}},"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/wp-json\/wp\/v2\/pages\/955","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/wp-json\/wp\/v2\/comments?post=955"}],"version-history":[{"count":19,"href":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/wp-json\/wp\/v2\/pages\/955\/revisions"}],"predecessor-version":[{"id":1563,"href":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/wp-json\/wp\/v2\/pages\/955\/revisions\/1563"}],"up":[{"embeddable":true,"href":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/wp-json\/wp\/v2\/pages\/253"}],"wp:attachment":[{"href":"https:\/\/osiris.itabc.cnr.it\/aton\/index.php\/wp-json\/wp\/v2\/media?parent=955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}