{"id":117,"date":"2021-07-31T08:15:48","date_gmt":"2021-07-31T08:15:48","guid":{"rendered":"https:\/\/winusoft.co.uk\/oxygen-tutorials\/show-an-acf-repeater-gallery-inside-oxygens-repeater\/"},"modified":"2023-10-25T16:13:56","modified_gmt":"2023-10-25T16:13:56","slug":"show-an-acf-repeater-gallery-inside-oxygens-repeater","status":"publish","type":"oxygen-tutorials","link":"https:\/\/winusoft.co.uk\/oxygen-tutorials\/show-an-acf-repeater-gallery-inside-oxygens-repeater\/","title":{"rendered":"Show an ACF Repeater Gallery inside Oxygen's Repeater"},"content":{"rendered":"\n<p>It's not currently possible to show an ACF Gallery inside Oxygen's Repeater if the Repeater data source is an ACF Repeater. However, there is a workaround using a Code Block element and <a href=\"https:\/\/kenwheeler.github.io\/slick\/\" target=\"_blank\" rel=\"noreferrer noopener\">Slick carousel<\/a>.<\/p>\n\n\n\n<p>First, download the <a href=\"\/wp-content\/uploads\/2023\/01\/slickGallery.zip\">slickGallery ZIP file<\/a>, extract the \"gallery\" directory and place it in your site root.<\/p>\n\n\n\n<p>Next, add a Code Block element <strong><span style=\"text-decoration: underline;\">ABOVE<\/span><\/strong> your Repeater. You will need to add CSS, JS and PHP to the associated Code Block tabs.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">\/*\n* Add this to the CSS tab of the Code Block ABOVE the Repeater:\n*\/\n\n.thumbnail img {\n   box-sizing: border-box;\n   border: 1px solid #ddd;\n   padding: 2px;\n   margin: 0 1% 15px 0;\n   width: 32.6667%;\n   display: inline-block;\n}\n\t\n.thumbnail img:nth-of-type(3n+3) {\n   margin-right: 0;\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\/\/ Add this to the JavaScript tab of the Code Block ABOVE the Repeater:\n\njQuery(document).ready(function(){ \n  jQuery('.gallery').slickLightbox({ \n      itemSelector: '&gt; a' \n   }); \n});<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">\/\/ Add this to the PHP &amp; HTML tab of a Code Block ABOVE the Repeater:\n\n&lt;?php\n  session_start();\n  $_SESSION['row_index'] = 0;\n?&gt;<\/code><\/pre>\n\n\n\n<p>Then, add a Code Block element inside your Repeater. You need to place it wherever you want your ACF Gallery to show. Add the following code to the PHP &amp; HTML tab of the Code Block and adjust the ACF field names on line #6 and #10 as needed.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php line-numbers\">\/\/ Add this to the PHP &amp; HTML tab of a Code Block INSIDE the Repeater. Adjust the field names as needed.\n\n&lt;?php\n\n  \/\/ This is your Repeater field name\n  $rows = get_field('elements-repeater' );\n  $specific_row = $rows[$_SESSION['row_index']];\n\n  \/\/ This is the Gallery field name\n  $gallery_images = $specific_row['gallery_of_photos'];\n\nif($gallery_images): ?&gt; \n\n   &lt;div class=\"gallery\"&gt; \n\n      &lt;?php foreach( $gallery_images as $image ): ?&gt; \n\n         &lt;a href=\"&lt;?php echo $image['url']; ?&gt;\" target=\"_blank\" class=\"thumbnail\"&gt; \n            &lt;img src=\"&lt;?php echo $image['sizes']['medium']; ?&gt;\" alt=\"&lt;?php the_title(); ?&gt;\" \/&gt; \n         &lt;\/a&gt; \n\n      &lt;?php endforeach; ?&gt; \n\n   &lt;\/div&gt; \n\n&lt;?php endif; ?&gt;\n\n\n&lt;?php    \n\n  $_SESSION['row_index'] ++;\n\n?&gt;<\/code><\/pre>\n\n\n\n<p>Finally, install the <a href=\"https:\/\/wordpress.org\/plugins\/code-snippets\/\" target=\"_blank\" rel=\"noopener\">Code Snippets<\/a> plugin and create a snippet with the following code to enqueue the Slick files added to the site root in the first step:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">Add this to the Code Snippets plugin: https:\/\/en-gb.wordpress.org\/plugins\/code-snippets\/\n\n&lt;?php\n\nadd_action( 'wp_enqueue_scripts', 'enqueue_slick_files' );\n\/**\n * Loads &lt;list assets here&gt;.\n *\/\nfunction enqueue_slick_files() {\n\n    \/\/ Enqueue CSS\n    wp_enqueue_style( 'slick-css', '\/gallery\/slick.css' );\n    wp_enqueue_style( 'slick-theme', '\/gallery\/slick-theme.css' );\n    wp_enqueue_style( 'slick-lightbox', '\/gallery\/slick-lightbox.css' );\n\n    \/\/ Enqueue JS\n    wp_enqueue_script( 'slick-js', '\/gallery\/slick.min.js', '', '', true );\n    wp_enqueue_script( 'slick-lightbox-js', '\/gallery\/slick-lightbox.js', '', '', true );\n\n}\n\n?&gt;<\/code><\/pre>\n\n\n\n<p>That should be everything you need to get your ACF Gallery working in the Repeater.<\/p>\n","protected":false},"author":1,"featured_media":118,"template":"","tutorial_category":[7],"acf":[],"_links":{"self":[{"href":"https:\/\/winusoft.co.uk\/wp-json\/wp\/v2\/oxygen-tutorials\/117"}],"collection":[{"href":"https:\/\/winusoft.co.uk\/wp-json\/wp\/v2\/oxygen-tutorials"}],"about":[{"href":"https:\/\/winusoft.co.uk\/wp-json\/wp\/v2\/types\/oxygen-tutorials"}],"author":[{"embeddable":true,"href":"https:\/\/winusoft.co.uk\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/winusoft.co.uk\/wp-json\/wp\/v2\/media\/118"}],"wp:attachment":[{"href":"https:\/\/winusoft.co.uk\/wp-json\/wp\/v2\/media?parent=117"}],"wp:term":[{"taxonomy":"tutorial_category","embeddable":true,"href":"https:\/\/winusoft.co.uk\/wp-json\/wp\/v2\/tutorial_category?post=117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}