How to dynamically set the aspect ratio based on user selection

With Advanced Uploads, you can set the default aspect ratio for cropping uploaded images. However, it might be the case that you want to set a different aspect ratio depending on options chosen by the user.

With the snippet below, you can add an extra parameter to select field options in the back end. Use this parameter to specify the aspect ratio for each option – when the user updates the option, the aspect ratio will update accordingly.

How to set aspect ratio dynamically

To set the aspect ratio dynamically, you need to:

Create a select field for the user to choose the aspect ratio. Make a note of the field ID and update the snippet accordingly
Add the snippet to your site (here’s how to add a snippet). Make sure you update the field ID in the step above
Reload the product edit screen with your select field – you should now see a new ‘Aspect Ratio’ parameter
Enter the aspect ratios for each option in the following format: 16/9, 4/3, etc
Create an upload field
Publish the product

Now, when users select a different option from the select field, the aspect ratio of the crop area will be automatically updated.

Here’s the snippet:

	<?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 );

view raw dynamic-set-aspect-ratio.php hosted with ❤ by GitHub

How to set aspect ratio dynamically

Was this article helpful?

Related Articles