Support

Account

Solving

Common Subfields for Flexible Content

- GarrettGardner
- October 4, 2013 at 4:44 pm
Hello!

I did not see this feature requested before, but I feel as if it would be very useful. Many layouts that I come up with share similar Sub Fields with one another– for example, an Image Object layout and a Content WYSIWYG layout may both require a Title subfield. Adding a section to the Flexible Content dropdown called “Shared Subfields” or something similar would be very convenient.

This is currently possible by duplicating the subfields for each individual layout, but when there are many layouts and many common subfields, it becomes cumbersome and prone to inconsistency.

Anyway, thanks for such an excellent plugin! It has made WordPress into a suitable CMS for many of my projects 🙂
- Elliot
- October 7, 2013 at 3:55 pm
Hi @GarrettGardner

thanks for the feedback. v5 is looking to fix this issue with it’s ability to drag / drop fields to all sub field locations meaning you could duplicate the field and then drag it into the new field group!

Hope that helps.

Thanks
E
- GarrettGardner
- October 8, 2013 at 4:14 am
Sounds great, thanks!
- souverian
- June 26, 2014 at 3:02 am
I’d also love to see this feature. Is it incorporated into the v5 public beta yet?

So… I did the caveman solution by duplicating the fields but I when I read the options the values just won’t show on any but the first layouts…

Here is my code:

        if( have_rows('content_sections') ){
			$global_counter = 0;
            while ( have_rows('content_sections') ) { 
				the_row();
				$image = wp_get_attachment_image_src(get_sub_field('bg_image'),'full'); 
				if($image){ $bg_image = "background-image:url(".$image[0].");"; }else{$bg_image = ''; }
				if(get_sub_field('fixed_background')){ $fixed = 'fixed-bg'; }else{ $fixed = '';}
				if(get_sub_field('height')){ $height = 'height:'.get_sub_field('height').'px;'; }else{$height =''; } 
				if(get_sub_field('bg_color')){ $bg_color = 'background-color:'.get_sub_field('bg_color').';'; }else{$bg_color =''; } 
                if( get_row_layout() == 'intro'){
	                ?>
					<div id="section-<?php echo $global_counter;?>" class="container-fluid intro <?php echo $fixed;?> <?php echo get_sub_field('content_color'); ?>" style=" <?php echo $bg_image;?> <?php echo $height; ?> <?php echo $bg_color; ?>">
                    	<div class="container">
                            <div class="row">
                                <div class="table col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                    <div class="table-cell"  id="section-<?php echo $global_counter;?>-table-cell">
                                        <?php echo get_sub_field('content'); ?>
                                    </div>
                                    <script type="text/javascript">
										$('#section-<?php echo $global_counter;?>-table-cell').find('a').each(function(index, element) {
                                            $(this).addClass('btn');
                                        });
									</script>
                                </div>
                            </div>
                        </div>
                    </div>
				<?php        
				}elseif( get_row_layout() == 'rollover-buttons' ){
					?>
					<div id="section-<?php echo $global_counter;?>" class="container-fluid rollover-buttons">
                        <div class="row">
                            <?php 
							$buttonID = 0;
                            $buttons = get_sub_field('buttons');
                            foreach ($buttons as $button){ ?>
                                <div class="rollover-button col col-xs-12 col-sm-4 col-md-4 col-lg-4" id="button-<?php echo $buttonID;?>" hoverBgColor='<?php echo $button['button_bg_color']; ?>' hoverTextColor='<?php echo $button['button_color']; ?>'>
                                	<div class="table">
                                        <div class="table-cell"> 
                                            <?php
                                            $icon = wp_get_attachment_image_src($button['button_icon'],'full'); 
                                            if($icon){ ?>
                                                <img class="inline-block" src="<?php echo $icon[0];?>">
                                            <?php } ?>
                                            <h2><?php echo $button['button_title']; ?></h2>
                                            <div class="button-content">
                                                <?php echo $button['button_content']; ?>
                                            </div>
                                        </div>
                                    </div>
                                </div>
								<?php $buttonID++;?>
                            <?php }	?>
                        </div>
                    </div>
				<?php
				}elseif( get_row_layout() == 'portfolio' ){
				?>
                    <div id="section-<?php echo $global_counter;?>" class="container-fluid portfolio <?php echo $fixed;?> <?php echo get_sub_field('content_color'); ?>" style=" <?php echo $bg_image;?> <?php echo $height; ?> <?php echo $bg_color; ?>">
                    	<?php $projects = get_sub_field('projects');?>
                        <div class="container">
                            <div class="row">
                            	<div class="arrow left"></div>
                            	<div class="arrow right"></div>
                                <div class="portfolio-container">
                                	<h1><?php echo $projects[0]['project_title']; ?></h1>
                                    <a href="javascript:;" class="btn">Más información</a>
                                    <div class="project-info">
										<?php echo $projects[0]['project_description']; ?>
                                    </div>
									<?php $bgportfolio = wp_get_attachment_image_src($projects[0]['project_image'],'full'); ?>
                                    <div class="portfolio-background" style="background-image:url(<?php echo $bgportfolio[0]; ?>);">
                                    </div>
                                </div>
                            </div>    
                        </div>
                    </div> 
				 	<?php
				}elseif( get_row_layout() == 'cols_content' ){
				?>
                    <div id="section-<?php echo $global_counter;?>" class="container-fluid col-content <?php echo $fixed;?> <?php echo get_sub_field('content_color'); ?>" style=" <?php echo $bg_image;?> <?php echo $height; ?> <?php echo $bg_color; ?>">
                        <div class="container">
                            <div class="row">
                            	<?php 
									$columns = get_sub_field('columns'); 
									if(count($columns) == 1){
										$colSize = 'col-xs-12 col-sm-12 col-md-12 col-lg-12';
									}elseif(count($columns) == 2){
										$colSize = 'col-xs-12 col-sm-6 col-md-6 col-lg-6';
									}elseif(count($columns) == 3){
										$colSize = 'col-xs-12 col-sm-4 col-md-4 col-lg-4';
									}
								?>
                                <?php foreach ($columns as $column) {?>
                                	<div class="<?php echo $colSize; ?>">
                                    	<?php echo $column['column_content']; ?>
                                    </div>
                                <?php } ?>
                            </div>
                        </div>
                    </div>
				<?php
				}elseif( get_row_layout() == 'call_to_action' ){
				?>
                    <div id="section-<?php echo $global_counter;?>" class="container-fluid call-to-action <?php echo $fixed;?> <?php echo get_sub_field('content_color'); ?>" style=" <?php echo $bg_image;?> <?php echo $height; ?> <?php echo $bg_color; ?>">
                    	<div class="container">
                        	<div class="row center-text">
                            	<?php echo get_sub_field('text');?>
                                <a href="<?php echo get_sub_field('button_link'); ?>" target="_blank" class="btn btn-default">
                                	<?php echo get_sub_field('button_label'); ?>
                                </a>
                            </div>
                        </div>
                    </div>
				<?php
				}elseif( get_row_layout() == 'video_gallery' ){
				?>
                    <div id="section-<?php echo $global_counter;?>" class="container-fluid video-gallery <?php echo $fixed;?> <?php echo get_sub_field('content_color'); ?>" style=" <?php echo $bg_image;?> <?php echo $height; ?> <?php echo $bg_color; ?>">
                        <div class="container">
                            <div class="row videos">
                            	<?php 
									$videos = get_sub_field('videos'); 
									if(count($videos) == 1){
										$noThumb = true;
										$colSize = 'col-xs-12 col-sm-12 col-md-12 col-lg-12';
									}elseif(count($videos) == 2){
										$colSize = 'col-xs-12 col-sm-6 col-md-6 col-lg-6';
									}elseif(count($videos) == 3){
										$colSize = 'col-xs-12 col-sm-4 col-md-4 col-lg-4';
									}elseif(count($videos) == 4){
										$colSize = 'col-xs-12 col-sm-6 col-md-3 col-lg-3';
									}elseif(count($videos) >= 5){
										$colSize = 'col-xs-12 col-sm-4 col-md-2 col-lg-2';
									}
								?>
                                <?php foreach ($videos as $video) {?>
                                	<div class="<?php echo $colSize; ?> video">
                                    	<?php if($noThumb){ ?>
                                            <iframe width="960" height="720" src="//www.youtube.com/embed/<?php echo $video['youtube_id']?>" frameborder="0" allowfullscreen></iframe>                                        	
                                        <?php }else{ ?>
                                        	<?php 
												$thumbImage = wp_get_attachment_image_src(get_sub_field('bg_image'),'full'); 
											?>
                                        	<div class="video-thumb" style="background-image:url(<?php echo $thumbImage[0]; ?>);">
                                            	<a href="javascript:;" onClick="overlayVideo();"><img src="<?php bloginfo('template_directory'); ?>/images/video-thumb.png"></a>
                                            </div>
                                        <?php }?>
                                    </div>
                                <?php } ?>
                            </div>
                        </div>
                    </div>
				<?php
				}elseif( get_row_layout() == 'contact' ){
				?>
                    <div id="section-<?php echo $global_counter;?>" class="container-fluid contact <?php echo $fixed;?> <?php echo get_sub_field('content_color'); ?>" style=" <?php echo $bg_image;?> <?php echo $height; ?> <?php echo $bg_color; ?>">
                    	<div class="content">
                        	<div class="row">
                            	<?php echo get_sub_field('contact'); ?>
                            </div>
                        </div>
                    </div>
				<?php 
				}elseif(get_row_layout() == "s_slides"){ 
				?>
                    <div id="section-<?php echo $global_counter;?>" class="container-fluid slides <?php echo $fixed;?> <?php echo get_sub_field('content_color'); ?>" style=" <?php echo $bg_image;?> <?php echo $height; ?> <?php echo $bg_color; ?>">
						<?php $gallery = get_sub_field('gallery_images');?>
                        <?php foreach( $gallery as $image ){ ?>
                            <div class="container-fluid slide" style="background-image:url(<?php echo $image['sizes']['large']; ?>);">
                            </div>
                        <?php } ?>
                    </div>
				<?php
                }
				$global_counter++;
            } 
        }else{
			echo '<h1>NO CONTENT</h1>';
		}

- Anu
- December 13, 2014 at 12:22 am
Being able to define shared fields for all the layouts for a particular flexible content ACF would really be useful – it would save a lot of UI repetition.

I don’t think duplicating the fields and then dragging them to the new layout helps that much – you need to edit them to remove ‘_copy’ each time.

However, adding this feature would make it hard to order fields, unless shared fields automatically got copied into each new layout.

Anyway, I still think this would be very useful – would save me needing to edit 10 layouts to add a new boolean field to each of them!

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Common Subfields for Flexible Content’ is closed to new replies.

Advanced Custom Fields

Support

Account

Common Subfields for Flexible Content

GarrettGardner

Elliot

GarrettGardner

souverian

gauden

Anu

Welcome

Forums

Helping Others

About

Help

Community