WordPress + Impreza | Create shortcode to output accordions based on ACF repeater fields

wordpress-impreza-accordion-shortcode-acf-repeater-field.php

<?php 

/* ACF Case Study Key Features accordion shortcode recreation, used within the Case Study page template */
// [fs_key_features_accordion]
function fs_sc_key_features_accordion( $atts ){ 
	// begin output buffering
	ob_start();

	if( have_rows('cs_key_website_features') ) {
	  
	  	// Impreza accordion shortcode example, that we mimic below with our variables and while loop:
	  	/* 
	  		[vc_tta_accordion title_tag="h3" c_icon="plus"]
				[vc_tta_section title="Title in here" el_id="casestudy-key-feature-1"][vc_column_text]Text goes in here[/vc_column_text][/vc_tta_section]
				[vc_tta_section title="Second Title in here"][vc_column_text]Second Text goes in here[/vc_column_text][/vc_tta_section]
			[/vc_tta_accordion]
		*/
	  
	  	// start section counter at 1, that we can then increase by one for each loop iteration, used for a unique ID per accordion toggle
	  	$repeater_counter = 1;
	  
	  	// starting shortcode piece
	  	$accordion_start = '[vc_tta_accordion title_tag="h3" c_icon="plus"]';
		
	  	// initially set the sections as empty, to define the variable
		$accordion_sections = '';

		while ( have_rows('cs_key_website_features') ) : the_row();

			// vars
			$title 			= get_sub_field('cs_key_feature_title');
			$description	= get_sub_field('cs_key_feature_description');
	  			
	  		// create the number variable, of which we add 1 for each new iteration, that we can then use on the toggle ID
			$section_counter_number = $repeater_counter++;

	  		// the ID that we add to each iterataion, within the Impreza shortcode el_id attribute
	  		$accordion_section_id = 'casestudy-key-feature-' . $section_counter_number;
	  
	  		// the actual inner shortcodes for each accordion
	  		$accordion_sections .= '[vc_tta_section title="' . $title . '" el_id="' . $accordion_section_id . '"][vc_column_text]' . $description . '[/vc_column_text][/vc_tta_section]';

		endwhile;
	
		$accordion_end = '[/vc_tta_accordion]';

		// output via the shortcode with all the proper shortcode pieces
		echo do_shortcode($accordion_start .''. $accordion_sections .''. $accordion_end);

	}

	// end output buffering, grab the buffer contents, and empty the buffer
	return ob_get_clean();
}
add_shortcode( 'fs_key_features_accordion', 'fs_sc_key_features_accordion' );


/* ACF Case Study Key Features images, used within the Case Study page template */
// [fs_key_features_images]
function fs_sc_key_features_images( $atts ){ 
	// begin output buffering
	ob_start();

	if( have_rows('cs_key_website_features') ) {
	  
	  	// start section counter at 1, that we can then increase by one for each loop iteration, used for a unique ID per image
	  	$repeater_counter = 1;
	  
	  	// images wrapper open
	  	echo '<div class="casestudy-key-feature-images">';

		while ( have_rows('cs_key_website_features') ) : the_row();

			// vars
			$image = get_sub_field('cs_key_feature_image');
	  			
	  		// create the number variable, of which we add 1 for each new iteration, that we can then use on the image ID
			$image_counter_number = $repeater_counter++;

	  		// the ID that we add to each iterataion, within image code below
	  		$image_id = 'casestudy-key-feature-img-' . $image_counter_number;
	  
			// start image
			if($image) { 
					  
				$image_url 		= $image['url'];
				$image_thumb 	= $image['sizes']['large'];
				$image_alt		= $image['alt'];
					  
				echo '<img width="640" height="640" src="' . $image_thumb . '" alt="' . $image_alt . '" id="' . $image_id . '">';
			}
	  		else {
				// otherwise if any of the repeater rows had no image, use a default one we set here
				echo '<img width="640" height="640" src="/wp-content/uploads/fs-vector-homepage-layout.svg" alt="' . $image_alt . '" id="' . $image_id . '">';
			}

		endwhile;
	
		echo '</div>';
	  	// images wrapper close

	}

	// end output buffering, grab the buffer contents, and empty the buffer
	return ob_get_clean();
}
add_shortcode( 'fs_key_features_images', 'fs_sc_key_features_images' );