ACF populate select with Oxygen Icons and use in frontend ($3692901) · Snippets

Hi, Apologies for the newb question, but I've added your script to a staging site to try to be able to use Oxygen Icons in Oxygen Repeaters. I've got a couple of ACF Repeaters that I want to try to add the icon selection to, but can't figure out how to a) add an ACF field to a field group and then b) how to adapt this to be able to add to an ACF repeater. Any pointers would be greatly appreciated. I've tried using this methos - https://wpdevdesign.com/acf-icon-picker/ - but that doesn't allow styling control other than the size. Thanks in advance. Phil

Hi Phil, No worries. You need to create a ACF Select field within your repeater and it has to have the name/key oxy_icons If you use this key the select will be automaticaly populated with the keys of the Oxygen Icons. Unfortunatly i have not implemented a preview of the icons yet. This script was just a quick shot to scratch my own itch but i wanted to share it.

Here you see the populated select:

Please let me know if it worked.

https://www.facebook.com/groups/1626639680763454/permalink/7283463355081030/

Thanks so much. I have the ACF select field working which is great. Thank you. Is it yet possible to use this in an Oxygen Repeater? Also is it possible to style the SVG as you can with Oxygen icons? In this instance I want to apply color: var(--primary); on my icons.

In the current state of the script i guess you can put a custom code block inside the Oxygen Repeater (Data from ACF Repeater) https://oxygenbuilder.com/documentation/builder-elements/repeater/

INside the code block you can call lvl_extend_oxygen_svg_icons_to_load with the value of your ACF field as a parameter.

For styling i suggest you use custom selectors. There is no connection to the oxygen icon field for the oxygen dashboard. This tool just works for the frontend. https://www.youtube.com/watch?v=wJZTnU38AEA

I will try to build a custom ACF Icon Element for Oxygen.

Hi Phillipp,

I'm not the greatest PHP coder in the world, so I've tried to call the field using some help from codewp.ai but I'm not getting anywhere.

I've tried different variations of this to try to get the icons to render in the Oxygen Repeater, but no luck yet.

`<?php // Ensure ACF is active and the function exists if (function_exists('get_field') && function_exists('lvl_extend_oxygen_svg_icons_to_load')) { // Retrieve the value of the 'oxy_icons' ACF select field $oxy_icons = get_field('oxy_icons');

// Check if the field is not empty
if ($oxy_icons) {
    // Output the SVG icons directly within the desired div in Oxygen
    echo '<div class="oxygen-repeater-icons">';
    lvl_extend_oxygen_svg_icons_to_load($oxy_icons);
    echo '<\/div>';
} else {
    // Handle the case where the ACF field is empty or not set
    error_log('ACF field oxy_icons is empty or not set.', 0);
}

} else { // Handle the case where ACF or the function is not available error_log('ACF or the function lvl_extend_oxygen_svg_icons_to_load is not available.', 0); } ?> `

Hi Phil,

I cant give you complete PHP Coding Support here but as a start:

But the obvious point is that within a repeater (acf) you cant use get_field, but you use get_sub_field

Have a look at these:

I am not 100% sure how oxygen repeater and acf repeater interact.

What i would do is to try to log these two things inside the repeater in a code block:

<?php print_r(get_sub_field('oxy_icons')); ?>

or alternativly to check what the oxy repeater does:

<?php global $query; print_r($query); ?>

As a side note, if you work with ai for code generation give it as much information and context as possible.

I hope this helps.

Thanks Philipp. I'll see what I can do

Hi Philipp,

The print log shows the correct names, but I still can't get them to display. Either inside the repeater or just a single instance outside the repeater.

Outside the repeater using

<?php lvl_output_acf_selected_icon('ICTSIconsicon-10'); ?>

shows in Oxygen Builder, but not the front end.

`<?php // Assuming this code is within the loop of your repeater field $oxy_icons = get_sub_field('oxy_icons');

// Check if the ACF field has a value if (oxy_icons) { // Call the function and pass the ACF field value as a parameter lvl_extend_oxygen_svg_icons_to_load(oxy_icons);

// Debugging: Print the ACF field value
print_r($oxy_icons);

} ?>`

I've added a CSS class as well, but still nothing.

.sector-icons svg { fill: pink; width: 120px; height: 120px; color: black; background-color: blue; }

https://www.dropbox.com/scl/fi/ts1xdmqd0t7tf47zsq9fw/Screenshot-2024-05-15-at-10.45.43.jpg?rlkey=xk1mx839y3pe8szng1243h4l9&dl=0

Hi Phil,

The usecase of the repeater is not covered by this part. It makes sure the Icons are added to the main icon svg of oxygen.

function lvl_extend_oxygen_svg_icons_to_load() {
    global $oxygen_svg_icons_to_load;

    if (!is_array($oxygen_svg_icons_to_load)) {
        $oxygen_svg_icons_to_load = array();
    }

    $selected_icons = get_field('oxy_icons');
	
    if (!is_array($selected_icons)) {
        $selected_icons = array($selected_icons);
    }

    $oxygen_svg_icons_to_load = array_unique(array_merge($oxygen_svg_icons_to_load, $selected_icons));
}

i guess you can try to add this to the snippet and adapt your keys either in the code snippet, ACF or in the Oxygen code snippet in the repeater. I also added this to the main snippet

    if (have_rows('oxy-icons-repeater')) {
        while (have_rows('oxy-icons-repeater')) {
            the_row();
            $icon = get_sub_field('icon');
            if ($icon) {
                $selected_icons[] = $icon;
            }
        }
    }

Hi Philipp, Unfortunately I still haven't been able to get the icons in an ACF repeater to display in an Oxygen Repeater. Interestingly, ACF have today released an update with an Icon Picker - https://www.advancedcustomfields.com/resources/icon-picker/ but that doesn't surface the Oxygen Icon Sets. I'm having to revert to using transparent PNGs for now, which is a shame. Thanks for all your help with this.