Aleš Sýkora / May 29, 2024 / 12 comments

ACF flexible content: Oxygen builder examples

Post summary: Here are some code examples really useful when using ACF flexible content with Oxygen. The main workflow of using ACF flexible content with Oxygen is simple. Here are the main rules: How to work with ACF flexible content and Oxygen? There is a process: Tips for ACF Flexible content and Oxygen modules Oxygen Image module…

Here are some code examples really useful when using ACF flexible content with Oxygen. The main workflow of using ACF flexible content with Oxygen is simple. Here are the main rules:

  1. Always use CSS classes instead of ID’s (when class styling don’t work in builder, add it in custom stylesheet)
  2. Always work in one opened Oxygen editor windows (trust me, in this scenario, I had like 7 windows with Oxygen and I always rewrited something in css and I need to start again)

How to work with ACF flexible content and Oxygen? There is a process:

  1. Create blank page with sections which will represent ACF flexible content blocks. Name it “Flexible Content Sections Playground and make it private”. Fill them with Lorem Ipsum and with placeholder images.
  2. Create ACF Flexible Content Blocks with Custom Fields
  3. Go back to the Playground page and convert each section which will represent one Flexible content block change to the Oxygen Reusable section. Do not convert Sections which will use ACF repeaters.
  4. Open reusable part one by one and change the placeholder content to the dynamic one. Use Dynamic data > PHP function return value
    • first row: get_sub_field
    • second row: acf_field_slug
  5. Create Oxygen Template for Pages/Posts… in short, for the type of posts that are supposed to use flexible content
  6. Add code block and add functions:
    • to get the reusable parts if ACF flexible content block is being added
    • to get sections with ACF repeater fields

Tips for ACF Flexible content and Oxygen modules

Oxygen Image module – set the ACF image field to return the ID, otherwise it wouldn’t even generate the img tag

Rich text – if you use Automatic.css – do not forget class .oxy-rich-text to every content from ACF WYSIWIG fields

Code examples for ACF flexible content + Oxygen

UPDATE 29.5.2024 – since Oxygen 4.8.3, the ct_builder_json needs to be prefixed with _ or it doesn’t work anymore.

_ct_builder_json

Display reusable sections. The basic is that you need to call the Oxygen Json for ID of reusable part. And of course you need to check if there are any flexible content rows.

Check the rows:

// Check value exists.
if (have_rows('page_contents')) :

    // Loop through rows.
    while (have_rows('page_contents')) : the_row();

Display the reusable part:

echo do_oxygen_elements(json_decode(get_post_meta('31', '_ct_builder_json', true), true));

And you want it to display if user select the Flexible content block with some slug:

if (get_row_layout() == 'wave') :

Final code:

<?php
// Check value exists.
if (have_rows('page_contents')) :

    // Loop through rows.
    while (have_rows('page_contents')) : the_row();

        if (get_row_layout() == 'wave') :
            echo do_oxygen_elements(json_decode(get_post_meta('31', '_ct_builder_json', true), true));

        elseif (get_row_layout() == 'text_full') :
            echo do_oxygen_elements(json_decode(get_post_meta('235', '_ct_builder_json', true), true));

        elseif (get_row_layout() == 'text_cta') :
            echo do_oxygen_elements(json_decode(get_post_meta('236', '_ct_builder_json', true), true));

        elseif (get_row_layout() == 'text_leftright') :
            echo do_oxygen_elements(json_decode(get_post_meta('233', '_ct_builder_json', true), true));

        elseif (get_row_layout() == 'button') :
            echo do_oxygen_elements(json_decode(get_post_meta('234', '_ct_builder_json', true), true));

        elseif (get_row_layout() == 'text_image_left') :
            echo do_oxygen_elements(json_decode(get_post_meta('265', '_ct_builder_json', true), true));

        elseif (get_row_layout() == 'text_image_right') :
            echo do_oxygen_elements(json_decode(get_post_meta('267', '_ct_builder_json', true), true));

        elseif (get_row_layout() == 'text_image_right_overflow') :
            echo do_oxygen_elements(json_decode(get_post_meta('262', '_ct_builder_json', true), true));

        endif;

    // End loop.
    endwhile;

// No value.

endif;

?>

Display ACF repeater slider_images which is used in flexible content section with slug slider_duo. It was used with Swiper.js.


        elseif (get_row_layout() == 'slider_duo') :

            // check if the nested repeater field has rows of data
            if (have_rows('slider_images')) :

                echo '<section class="ct-section">
	<div class="ct-section-inner-wrap">
	<div class="ct-div-block swiper-gallery-container">
	<div class="ct-div-block swiper">
	<div class="swiper-wrapper">';

                // loop through the rows of data
                while (have_rows('slider_images')) : the_row();
                    $image_duo = get_sub_field('slider_image'); ?>


                    <img class="swiper-slide slide-gallery ct-image slide-image" src="<?= $image_duo['url']; ?>">

                <?php

                endwhile;

                echo '</div></div></div></section>';

            endif;

Example code with ACF repeater:

<?php
// Check value exists.
if (have_rows('page_contents')) :

    // Loop through rows.
    while (have_rows('page_contents')) : the_row();

        if (get_row_layout() == 'wave') :
            echo do_oxygen_elements(json_decode(get_post_meta('31', '_ct_builder_json', true), true));

 
        elseif (get_row_layout() == 'slider_duo') :

            // check if the nested repeater field has rows of data
            if (have_rows('slider_images')) :

                echo '<section class="ct-section">
	<div class="ct-section-inner-wrap">
	<div class="ct-div-block swiper-gallery-container">
	<div class="ct-div-block swiper">
	<div class="swiper-wrapper">';

                // loop through the rows of data
                while (have_rows('slider_images')) : the_row();
                    $image_duo = get_sub_field('slider_image'); ?>


                    <img class="swiper-slide slide-gallery ct-image slide-image" src="<?= $image_duo['url']; ?>">

                <?php

                endwhile;

                echo '</div></div></div></section>';

            endif;
      
        endif;

    // End loop.
    endwhile;

// No value.

endif;

?>

elseif (get_row_layout() == 'pricing') :

            // check if the nested repeater field has rows of data
            if (have_rows('pricing_tables')) :

                echo '<section class="ct-section grid--auto-3 gap--l stretch">
	<div class="ct-section-inner-wrap">';

                // loop through the rows of data
                while (have_rows('pricing_tables')) : the_row();
                    $price_img = get_sub_field('pricing_image');
                    $price_title = get_sub_field('pricing_head');
                    $price_amount = get_sub_field('pricing_price');
                    $price_desc = get_sub_field('pricing_desc'); ?>

                    <div class="ct-div-block card-price">
                        <img alt="" src="<?= $price_img['url']; ?>" class="ct-image price-img">
                        <div class="ct-div-block width--full card-price-inner">
                            <span class="text--m text--bold margin-bottom--xs text--uppercase"><?= $price_title; ?></span>
                            <div class="ct-text-block margin-bottom--xs"><?= $price_amount; ?></div>
                            <div class="ct-text-block text--s margin-bottom--xs"><?= $price_desc; ?></div>
							<a class="mt-auto" href="https://vibess.reenio.cz/">Rezervovat</a>
                        </div>
                    </div>
<?php

                endwhile;

                echo '</div></section>';

            endif;

Fuel my passion for writing with a beer🍺

Your support not only makes me drunk but also greatly motivates me to continue creating content that helps. Cheers to more discoveries and shared success. 🍻

12 comments

  • I am using this same exact code. But for some reason, I keep getting an empty paragraph at the very beginning of my WYSIWYG boxes. And, the text is not rendering inside the dynamic span tag inside oxygen. this end up empty.

    Normally it renders like this with normal ACF fields.
    Text HERE

    Not sure where this went wrong…

  • Great content, thanks so much!

    Do you have any idea how to deliver data from ‘acf gallery’ to Oxygen ‘Gallery’ Element? I managed to echo this data with code(as codeblock in reusable element):

    $images = get_sub_field(‘project_section-gallery’);
    $size = ‘image-640’; // (thumbnail, medium, large, full or custom size)
    if( $images ): ?>

    Now I’m thinking about using masonry.js for gallery, but wondering if we can somehow use oxy elements to display it.

    Also I have problem with repeaters. As I would like to display ‘acf repeater’> ‘url’ field data with OxyExtra VideoPlayer…

  • Once I have converted my section to a re-useable block, no styling changes are carried across to where it’s being used.

    For example, I created a section with a heading element, and a pink background. I then converted it into a re-usable block.

    I then edit my page and include the flexible content options via ACF to display the section/block on my page. I have already set up my Oxygen template with a code block to display the ACF content etc.

    On the page, my re-usable block successfully displays, being called in via ACF’s Flexible Content. The dynamic data works fine too.

    The issue I am facing is when I now go to make an edit to the re-usable template via Oxygen, no styling changes are saved. For example, I went in and changed the background of the section to blue, but on the front-end, it’s still pink (from before I made it a re-usable Oxygen block).

    If I now go in to the page via the Oxygen editor where my ACF Flexible Content is showing and add in the re-usable block via Oxygen and save, the background colour is now changed on the front-end (for both the ACF Flexible and Oxygen re-usable block) to blue.

    As soon as I delete the Oxygen re-usable block from the page and update, the ACF Flexible Content block reverts to a pink background.

  • I ran into this exact scenario today and this article explains exactly what I need. Thank you!

  • A

    I am not sure what are you doing wrong. I am using it daily with no problems. If you want me to help, write me an e-mail to [email protected] and I will give you my hourly rate and proposal.

  • Thank you. I finally managed to do my gallery with ACF Repeater + some Custom Code

  • A

    Hello Mirko, I do galleries with ACF gallery field and custom grid + lightbox JS library like Lightbox2 or photoswipe and others. I am not sure if you can use Oxygen Gallery block. You probably can’t.

  • Hey Rafal,

    did you find a solution to have a gallery as flexible content?
    Could you post your complete code here or direct me to a solution/tutorial?

    I’m currently trying to have a client editable gallery as flexible content and I’m not really making progress.

  • A

    Hello, it’s not possible to use the gallery propably. I tried to but didn’t manage it to work.

  • My bad – I even read your warning at the start of the post and still managed to forget!

    Thank you

  • A

    I am glad that my articles help to someone. Enjoy!

  • A

    Hello Aaron,

    do you style the Section/div/other elements via .classes? It won’t work if you use styles on #ID’s.

Share Your Thoughts