Jili188 ltd register,Spinners club casino philippines.Recharge Every day and Get Bonus up-to 50%!

(@marcoc84)

I am utilizing ACF Extended Pro within my company to implement the grid system and gain more control over the layout. Specifically, I conducted a test by incorporating three blocks, with two positioned in the same row (each occupying col-6) and the third block placed below them (occupying col-12). However, I am unable to view the grid on the front end, indicating that I have likely made an error in my approach. Below is the complete code

			if( function_exists('acf_add_local_field_group') ):

acf_add_local_field_group(array(
	'key' => 'group_63ff7a10c9e9f',
	'title' => 'Prova',
	'fields' => array(
		array(
			'key' => 'field_63ff7a119d6d1',
			'label' => 'prova',
			'name' => '',
			'aria-label' => '',
			'type' => 'tab',
			'instructions' => '',
			'required' => 0,
			'conditional_logic' => 0,
			'wrapper' => array(
				'width' => '',
				'class' => '',
				'id' => '',
			),
			'placement' => 'top',
			'endpoint' => 0,
			'no_preference' => 0,
			'acfe_field_group_condition' => 0,
		),
		array(
			'key' => 'field_63ff7aba9d6d2',
			'label' => 'prova_contenuto-flessibile',
			'name' => 'prova_contenuto-flessibile',
			'aria-label' => '',
			'type' => 'flexible_content',
			'instructions' => '',
			'required' => 0,
			'conditional_logic' => 0,
			'wrapper' => array(
				'width' => '',
				'class' => '',
				'id' => '',
			),
			'acfe_flexible_advanced' => 1,
			'acfe_flexible_stylised_button' => 0,
			'acfe_flexible_hide_empty_message' => 0,
			'acfe_flexible_empty_message' => '',
			'acfe_flexible_layouts_templates' => 1,
			'acfe_flexible_layouts_previews' => 1,
			'acfe_flexible_layouts_thumbnails' => 1,
			'acfe_flexible_layouts_settings' => 0,
			'acfe_flexible_layouts_locations' => 0,
			'acfe_flexible_async' => array(
			),
			'acfe_flexible_add_actions' => array(
			),
			'acfe_flexible_remove_button' => array(
			),
			'acfe_flexible_layouts_state' => 'user',
			'acfe_flexible_modal_edit' => array(
				'acfe_flexible_modal_edit_enabled' => '0',
				'acfe_flexible_modal_edit_size' => 'large',
			),
			'acfe_flexible_modal' => array(
				'acfe_flexible_modal_enabled' => '1',
				'acfe_flexible_modal_title' => '',
				'acfe_flexible_modal_size' => 'full',
				'acfe_flexible_modal_col' => '4',
				'acfe_flexible_modal_categories' => '0',
			),
			'acfe_flexible_grid' => array(
				'acfe_flexible_grid_enabled' => '1',
				'acfe_flexible_grid_align' => 'left',
				'acfe_flexible_grid_valign' => 'stretch',
				'acfe_flexible_grid_wrap' => '0',
			),
			'acfe_flexible_grid_container' => '',
			'layouts' => array(
				'layout_63ff7ad8e6e09' => array(
					'key' => 'layout_63ff7ad8e6e09',
					'name' => 'prova__blocco1',
					'label' => 'prova__blocco1',
					'display' => 'block',
					'sub_fields' => array(
						array(
							'key' => 'field_63ff7b449d6d3',
							'label' => 'blocco1__testo',
							'name' => 'blocco1__testo',
							'aria-label' => '',
							'type' => 'text',
							'instructions' => '',
							'required' => 0,
							'conditional_logic' => 0,
							'wrapper' => array(
								'width' => '',
								'class' => '',
								'id' => '',
							),
							'default_value' => '',
							'maxlength' => '',
							'placeholder' => '',
							'prepend' => '',
							'append' => '',
							'acfe_field_group_condition' => 0,
						),
					),
					'min' => '',
					'max' => '',
					'acfe_flexible_render_template' => '',
					'acfe_flexible_render_style' => '',
					'acfe_flexible_render_script' => '',
					'acfe_layout_col' => '12',
					'acfe_layout_allowed_col' => array(
						0 => '12',
						1 => '6',
					),
					'acfe_flexible_thumbnail' => '',
					'acfe_flexible_settings' => false,
					'acfe_flexible_settings_size' => 'medium',
					'acfe_layout_locations' => array(
					),
					'acfe_flexible_modal_edit_size' => false,
					'acfe_flexible_category' => false,
				),
				'layout_63ff7b817ee29' => array(
					'key' => 'layout_63ff7b817ee29',
					'name' => 'prova__blocco2',
					'label' => 'prova__blocco2',
					'display' => 'block',
					'sub_fields' => array(
						array(
							'key' => 'field_63ff7b817ee2a',
							'label' => 'blocco2__testo',
							'name' => 'blocco2__testo',
							'aria-label' => '',
							'type' => 'text',
							'instructions' => '',
							'required' => 0,
							'conditional_logic' => 0,
							'wrapper' => array(
								'width' => '',
								'class' => '',
								'id' => '',
							),
							'default_value' => '',
							'maxlength' => '',
							'placeholder' => '',
							'prepend' => '',
							'append' => '',
							'acfe_field_group_condition' => 0,
						),
					),
					'min' => '',
					'max' => '',
					'acfe_flexible_render_template' => '',
					'acfe_flexible_render_style' => '',
					'acfe_flexible_render_script' => '',
					'acfe_layout_col' => '12',
					'acfe_layout_allowed_col' => array(
						0 => '12',
						1 => '6',
					),
					'acfe_flexible_thumbnail' => '',
					'acfe_flexible_settings' => false,
					'acfe_flexible_settings_size' => 'medium',
					'acfe_layout_locations' => array(
					),
					'acfe_flexible_modal_edit_size' => false,
					'acfe_flexible_category' => false,
				),
				'layout_63ff7b96d72ec' => array(
					'key' => 'layout_63ff7b96d72ec',
					'name' => 'prova__blocco3',
					'label' => 'prova__blocco3',
					'display' => 'block',
					'sub_fields' => array(
						array(
							'key' => 'field_63ff7b96d72ed',
							'label' => 'blocco3__testo',
							'name' => 'blocco3__testo',
							'aria-label' => '',
							'type' => 'text',
							'instructions' => '',
							'required' => 0,
							'conditional_logic' => 0,
							'wrapper' => array(
								'width' => '',
								'class' => '',
								'id' => '',
							),
							'default_value' => '',
							'maxlength' => '',
							'placeholder' => '',
							'prepend' => '',
							'append' => '',
							'acfe_field_group_condition' => 0,
						),
					),
					'min' => '',
					'max' => '',
					'acfe_flexible_render_template' => '',
					'acfe_flexible_render_style' => '',
					'acfe_flexible_render_script' => '',
					'acfe_layout_col' => '12',
					'acfe_layout_allowed_col' => array(
						0 => '12',
						1 => '6',
					),
					'acfe_flexible_thumbnail' => '',
					'acfe_flexible_settings' => false,
					'acfe_flexible_settings_size' => 'medium',
					'acfe_layout_locations' => array(
					),
					'acfe_flexible_modal_edit_size' => false,
					'acfe_flexible_category' => false,
				),
			),
			'min' => '',
			'max' => '',
			'button_label' => 'Aggiungi Riga',
			'acfe_field_group_condition' => 0,
			'acfe_flexible_layouts_placeholder' => false,
		),
	),
	'location' => array(
		array(
			array(
				'param' => 'options_page',
				'operator' => '==',
				'value' => 'opzioni-tema',
			),
		),
	),
	'menu_order' => 0,
	'position' => 'normal',
	'style' => 'default',
	'label_placement' => 'left',
	'instruction_placement' => 'label',
	'hide_on_screen' => '',
	'active' => true,
	'description' => '',
	'show_in_rest' => 0,
	'acfe_autosync' => '',
	'acfe_form' => 0,
	'acfe_display_title' => '',
	'acfe_meta' => '',
	'acfe_note' => '',
));

endif;

php page:

<?php if ( has_flexible( 'prova_contenuto-flessibile', 'option' ) ): ?>
  <div class=" row  <?php echo get_flexible_grid_class('prova_contenuto-flessibile', 'option'); ?>">
	<?php while ( have_rows( 'prova_contenuto-flessibile', 'option' ) ) : the_row(); ?>
 
		<?php if ( get_row_layout() == 'prova__blocco1' ) : ?>
      <div class="prova001 ">
			<?php the_sub_field( 'blocco1__testo' ); ?>
      </div>
		<?php elseif ( get_row_layout() == 'prova__blocco2' ) : ?>
			<div class="prova002 ">
			  <?php the_sub_field( 'blocco2__testo' ); ?>
			</div>
		<?php elseif ( get_row_layout() == 'prova__blocco3' ) : ?>
			<div class="prova003 ">
			  <?php the_sub_field( 'blocco3__testo' ); ?>
		</div>
		<?php endif; ?>
    	
	<?php endwhile; ?>
  </div>
<?php else: ?>
	<?php // No layouts found ?>
<?php endif; ?>

css



.row{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
?
.wrap{
	flex-wrap: wrap;
}
?
.col-12{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%
}
?
.col-11{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%
}
?
.col-10{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%
}
?
.col-9{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%
}
?
.col-8{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%
}
?
.col-7{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%
}
?
.col-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%
}
?
.col-5{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%
}
?
.col-4{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%
}
?
.col-3{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%
}
?
.col-2{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%
}
?
.col-1{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%
}
?
.col-auto{
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}
?
.align-center{
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}
?
.align-left{
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}
?
.align-right{
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}
?
.align-space-evenly{
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly
}
?
.align-space-between{
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}
?
.align-space-around{
    -ms-flex-pack: distribute;
    justify-content: space-around
}
?
.valign-stretch{
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch
}
?
.valign-top{
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}
?
.valign-center{
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}
?
.valign-bottom{
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end
}

.prova001 {
 background-color: red;
 padding: 30px 0;
 flex: 0 0 100%
}

.prova002 {
 background-color: green;
  padding: 30px 0;
  flex: 0 0 50%
}

.prova003 {
 background-color: grey;
  padding: 30px 0;
  flex: 0 0 50%
}

I think it is a row problem, it should generate two

Viewing 1 replies (of 1 total)

Plugin Author Konrad Chmielewski
(@hwk-fr)

2 years ago

Hello,

Thanks for the feedback!

The Flexible Content Grid System is a ACF Extended Pro feature. Unfortunately, I cannot provide support for pro users on this forum.

Please open a ticket from your?Account Dashboard?instead.

Thanks!

Have a nice day!

Regards.

Viewing 1 replies (of 1 total)

The topic ‘Flexible Content – Grid System does not work in the front end’ is closed to new replies.