dynamic-set-aspect-ratio.php

<?php
/**
 * Dynamically set the aspect ratio for an upload field using Advanced Uploads
 */
function demo_ar_get_field_id() {
	// Update the field ID below to your select field ID
	return 1242;
}

function demo_ar_option_attribute_string( $option_attribute_string, $item, $option_value, $option_index ) {
	if( $item['field_id'] == demo_ar_get_field_id() ) {
		$aspect_ratio = ! empty( $item['field_options'][$option_index]['aspect_ratio'] ) ? $item['field_options'][$option_index]['aspect_ratio'] : '';
		$option_attribute_string .= " data-aspect-ratio='" . esc_attr( trim( $aspect_ratio ) ) . "'";
	}
	return $option_attribute_string;
}
add_filter( 'pewc_option_attribute_string', 'demo_ar_option_attribute_string', 10, 4 );

function demo_ar_option_params_titles( $group_id, $item_key, $item ) {
	if( $item['field_id'] == demo_ar_get_field_id() ) {
		printf(
			'<th class="pewc-option-aspect-ratio-col pewc-option-extra-title"><div class="pewc-label">%s</div></th>',
			__( 'Aspect Ratio', 'pewc' )
		);
	}
}
add_action( 'pewc_after_option_params_titles', 'demo_ar_option_params_titles', 10, 3 );

function demo_ar_option_param( $option_count, $group_id, $item_key, $item, $key ) {
	if( $item['field_id'] == demo_ar_get_field_id() ) {
		$name = '_product_extra_groups_' . esc_attr( $group_id ) . '_' . esc_attr( $item_key ) . '[field_options][' . esc_attr( $option_count ) . ']';
		$aspect_ratio = isset( $item['field_options'][esc_attr( $key )]['aspect_ratio'] ) ? $item['field_options'][esc_attr( $key )]['aspect_ratio'] : '';
		?>
		<td class="pewc-option-extra">
			<input type="text" class="pewc-field-option-aspect_ratio" name="<?php echo $name; ?>[aspect_ratio]" value="<?php echo esc_attr( $aspect_ratio ); ?>">
		</td>
	<?php }
	}
add_action( 'pewc_after_option_params', 'demo_ar_option_param', 10, 5 );

function demo_ar_js() {
	?>
		( function( $ ) {
			var field_id = <?php echo demo_ar_get_field_id(); ?>;
			var aspect_ratio_update = {
				init: function() {
					this.update_aspect_ratio();
					$( 'body' ).on( 'change','.pewc-field-' + field_id + ' select.pewc-form-field', this.update_aspect_ratio );
				},
				update_aspect_ratio: function() {
					var new_ar = $( '.pewc-field-' + field_id + ' select' ).find( 'option:selected' ).attr( 'data-aspect-ratio' );
					if( new_ar.includes( '/' ) ) {
						ar_array = new_ar.split( '/' );
						new_ar = parseFloat( ar_array[0] ) / parseFloat( ar_array[1] );
						aspectRatio = new_ar;
					}
				}
			}
			aspect_ratio_update.init();
		})( jQuery );
	<?php
}
add_action( 'pewc_end_upload_script', 'demo_ar_js', 100, 2 );