Flexible content ?

Hi Alexandra,

We’re constantly working on improving the docs, so questions like yours are definitely helpful, thanks for that!

So now to your question. It appears you’re familiar with the ACF Flexible Content field, so I’ll try to explain in its terms.

I actually have good news for you – we have an alternative to ACF’s Flexible Content that will work for your needs. As you might have seen already, our repeater field is called “Complex Field”. It allows you to build repeaters with your preferred selection of fields, but it also allows you to create them with a set of multiple layouts (we call them Groups). It provides the API for creating multiple layouts that you can use for your repeaters – basically similar to how the flexible content field works.

For more information and code examples, please refer to the Complex Field -> Multiple Groups section in our documentation: https://carbonfields.net/docs/multiple-groups/

I’m willing to provide any further information or answers that you might need.

Regards,
Marin

Thank You Marin for your super fast answer!
i’m going to test all that as soon as i can ??

I am testing it, and it’s great.
for the simple fields it’s easy, and i love the short syntax.
and creating complex fields i have seen it can work like the flexible content ??
But it would be nice to have a complete code exemple to copy paste to test it for the complex field and particularly with multiples.
i’m struggling a little

another question, i like to have my custom fields appearing in first on a page (and eventually remove the default text editor) so i tried ->set_context(‘advanced’), but the cf still in last on the page…

i’m just scratching the surface, but it seems to do many more things than acf!
like the widgets etc…

Hey Alexandra,

Concerning code examples: you can use any of the examples that are in the Carbon Fields documentation: https://carbonfields.net/docs/ . If you’re struggling with achieving something specific, please don’t hesitate to ask and we can send some example code.

Regarding moving and removing the default rich text editor, this is not yet supported. However it is a good idea, so we will consider implementing it in the future releases.

Meanwhile, note that you can remove the default rich text editor by adding a similar block of code in your functions.php (‘post’ is your post type):

add_action( 'init', 'my_remove_post_type_support', 10 );
function my_remove_post_type_support() {
    remove_post_type_support( 'post', 'editor' );
}

and you can also implement your custom logic which to base the editor removal on.

Feel free to ask any other questions, and good luck with your project.

Yes i’m struggling to make a complex field with multiple fields, like i was doing in acf flexible content, that allow me to build a sort a custom builder with different layouts
i’m not working on a specific project, but testing the functionalities i need to see how i can use it.
I have understood how to create the fields, but now i don’t know how to display them (for this one, for the simple ones i’m ok)
In a general way, it would be nice to have example fields inside the plugin (as cmb2 does)
it would be the easier way to test everything

I use custom fields all the time, and i want to switch from acf to a library.
i considers yours and Piklist, about this last one carbon fields is it equivalent, does it have more functionalities, or other ones ?
perhaps lighter code ?

Hi Alexandra,

Were you able to find this article: https://carbonfields.net/docs/multiple-groups/ ? It demonstrates how you can create multiple groups in our Complex field, which is similar to ACF’s Flexible Content field.

Yes, i have seen this page, and as i have told i have no problem to create the fields, but now i don’t know how to display them
i would need a concrete example
with 2 differents complex fields in a multiple complex field

for ex with acf i was doing that, in a file named builder.php

i add

`function wst_display_builder() {

if ( is_page() ) {
// check if the flexible content field has rows of data
if ( have_rows( ‘wst_builder’ ) ):
// loop through the rows of data
while ( have_rows( ‘wst_builder’ ) ) :
the_row();

//Layouts
wst_display_parallax_row();

wst_display_icon_row();

wst_display_3_columns();

wst_display_cta();

wst_display_section_title();

wst_display_content();

endwhile;
endif;
}
}`

and in another named builder-functions.php

i add the functions for the different layouts

//parallax
function wst_display_parallax_row(){
	if ( get_row_layout() == 'wst_parallax' ) { ?>
		<section class="section -fw parallax" style = "background:url( <?php the_sub_field('wst_bg_image');
		?>)
			no-repeat fixed;
			-webkit-background-size: cover;background-size: cover; ">
			<div class="wrap">
				<div class="parallax-content"><?php the_sub_field( 'wst_text_on_bg' ); ?></div>
			</div>
		</section>

	<?php }
}

//icon row
function wst_display_icon_row(){
	if ( get_row_layout() == 'wst_icon_row' ) { ?>
		<section class="section icon-row <?php the_sub_field('wst_icon_row_class'); ?>">
			<div class="wrap">
				<?php if(get_sub_field('wst_icon_row_title')): ?>
				<h3 class="title"><?php the_sub_field( 'wst_icon_row_title' ); ?></h3>
					<div class="spacer"></div>
				<?php endif; ?>
				<?php if(have_rows('wst_icon_box')) : ?>
					<div class="box-container">
						<?php while ( have_rows( 'wst_icon_box' ) ) : the_row(); ?>
						<div class="box">
							<?php the_sub_field('wst_icon'); ?>
							<h4 class="title"><?php  the_sub_field('wst_icon_box_title'); ?></h4>
							<div class="text"><?php  the_sub_field('wst_icon_box_text'); ?></div>
						</div>
						<?php endwhile; ?>
					</div>
				<?php endif; ?>
			</div>
		</section>

	<?php }
}

//3 Columns
function wst_display_3_columns(){
	if(get_row_layout() == 'wst_3_col'){ ?>
		<div class="wrap section">
			<?php if(have_rows('wst_one_third_column')) : ?>
				<div class="separator"></div>
				<div class="three-columns-container">
					<?php while ( have_rows( 'wst_one_third_column' ) ) : the_row(); ?>
						<div class="one-third-column">
							<?php if (get_sub_field('wst_3_col_image')) : ?>
								<div class="hover-zommin">
									<a href="<?php the_sub_field( 'wst_3_col_button_link' ); ?>">
										<img src="<?php the_sub_field( 'wst_3_col_image' ); ?>">
									</a>
								</div>
							<?php endif; ?>
								<h4 class="title"><?php the_sub_field('wst_3_col_title'); ?></h4>
								<p class="text"<?php the_sub_field('wst_3_col_content'); ?></p>
								<?php if (get_sub_field('wst_3_col_button_text')) : ?>
									<a href="<?php  the_sub_field('wst_3_col_button_link'); ?>"
									   class="button -ghost"><?php  the_sub_field('wst_3_col_button_text'); ?></a>
								<?php endif; ?>
						</div>
					<?php endwhile; ?>
				</div>
			<?php endif; ?>
		</div>

<?php }

}

//CTA
function wst_display_cta(){
if(get_row_layout() == 'wst_cta'){ ?>
	<div class="section cta -fw ">
		<div class="wrap">
			<h3 class="cta-text">
				<?php the_sub_field('wst_cta_text');?>
			</h3>

			<div class="button-container">
				<a href="<?php site_url().'/'.the_sub_field('wst_cta_button_link'); ?>"
			                                  class="button">
					<?php the_sub_field( 'wst_cta_button_text' ); ?>
				</a>
			</div>

		</div>
	</div>
<?php }
}

//Title
function wst_display_section_title(){
	if(get_row_layout() == 'wst_section_title'){ ?>
		<h2 class="section-title">
			<?php the_sub_field('wst_title_text'); ?>
		</h2>
		<div class="spacer"></div>
	<?php  }
}

//Content
	function wst_display_content(){
		if(get_row_layout()== 'wst_content'){
				if(get_sub_field('wst_columns') == "col_1"){ ?>
					<div class="section -content wrap">
						<div class="content-columns">
							<div class="column <?php the_sub_field('wst_border'); ?>">
								<?php the_sub_field('wst_col_1'); ?>
								<?php if (have_rows('wst_tableau')) :?>
									<div class="tableau">
										<?php while(have_rows('wst_tableau')) : the_row(); ?>
											<div class="tableau-item">
												<?php the_sub_field('wst_icone_tableau'); ?>
												<div class="tableau-item-content">
													<h5><strong><?php the_sub_field('wst_tableau_item_title');
															?></strong></h5>
													<p><?php the_sub_field('wst_tableau_item_text');?></p>
												</div>
											</div>
										<?php endwhile; ?>
									</div>
								<?php endif;?>
								<?php if (get_sub_field('wst_contenu_sous_tableau')) :?>
									  <div class="contenu-sous-tableau">
									    <?php the_sub_field('wst_contenu_sous_tableau');?>
									  </div>
								<?php endif; ?>

							</div>
						</div>
					</div>

				<?php }
			if(get_sub_field('wst_columns') == "col_2"){ ?>
				<div class="section wrap">
					<div class="content-columns">
						<div class="one-half first column <?php the_sub_field('wst_border'); ?>"><?php the_sub_field('wst_col_1'); ?></div>
						<div class="one-half column <?php the_sub_field('wst_border'); ?>"><?php the_sub_field('wst_col_2'); ?></div>
					</div>
				</div>

			<?php }

		}
	}

But as i say, a very simple example with 2 layouts will be enough to see the light

Nevermind, i have finally found how to write the code, so i paste it here as it can be useful to others
code to create the fields

<?php 

use Carbon_Fields\Container\Container;
use Carbon_Fields\Field\Field;

Container::make('post_meta', 'Custom Data')
	->show_on_post_type('page')
	->show_on_template('test-template.php')
	->add_fields(array(

		Field::make('complex', 'crb_layouts')
		     ->add_fields('driver', array(
			     Field::make('text', 'name'),
			     Field::make('text', 'license'),
		     ))
		     ->add_fields('teacher', array(
			     Field::make('image', 'picture'),
			     Field::make('text', 'years_of_experience'),
		     )),
	));

code to display the fields

function wst_display_fields() {

	$layouts = carbon_get_the_post_meta( 'crb_layouts', 'complex' );
	if(isset($layouts)) {
	wst_display_driver($layouts);
	wst_display_teacher($layouts);
}

 }

function wst_display_driver($layouts){
	foreach ($layouts as $layout){

		if ( $layout['_type'] == '_driver' ) {
			$licence = $layout['license'];
			$name    = $layout['name']; ?>

			<h2>Driver</h2>
			<?php echo $name; ?><br>
			<?php echo $licence ?><br>
		<?php }
	}
}

function wst_display_teacher($layouts){
	foreach ($layouts as $layout){
		if ( $layout['_type'] == '_teacher' ) {
			$picture = $layout['picture'];
			$year    = $layout['years_of_experience']; ?>

			<h2>teacher</h2>
			<img src="<?php echo $picture ?>"
			     alt="">
			<?php echo $year ?>
		<?php }

	}
}

But it would be great to have this type of examples in your docs, the code to create the fields and the code to create the fields with a simple example and some explanations for beginners, i would be happy to pay for a premium version with a full doc

I really like how short and readable is the syntax for creating fields!

Hey Alexandra,

Glad you were able to find your way.

Regarding documentation: we’re constantly working on making it better, and we are planning to keep improving it over time.

Great!