Not works with Acf crop image plugin about wp-graphql-acf

[jasonbahl]

@flyingcodeeurope I'm not sure I follow?

Are you using the new version of WPGraphQL for ACF v2.0?

If so you can use the register_graphql_acf_field_type() as described above or in this guide: https://acf.wpgraphql.com/adding-support-for-3rd-party-acf-field-type/

You can put the code wherever you maintain custom code. Typically the functions.php of a child theme or a custom plugin.

[jasonbahl]

Ya you'll need to add the code wherever you maintain custom code.

Typically in WordPress you would use either a child theme or a custom plugin.

[robkrause]

@flyingcodeeurope thanks so much! I was already on the right path but was missing the use statements. The namespace one the other hand was not working in my functions.php

[jdiponziano]

I would love for this plugin to work with wpgraph-ql. Any progress on this happening any time soon?

[dinho-afsn]

I included the field 'image_crop' slug in the class-config.php

public static function get_supported_fields() {
	$supported_fields = [
		'text',
		'textarea',
		'number',
		'range',
		'email',
		'url',
		'password',
		'image',
		'image_crop',
		'file',
		'wysiwyg',
		'oembed',
		'gallery',
		'select',
		'checkbox',
		'radio',
		'button_group',
		'true_false',
		'link',
		'post_object',
		'page_link',
		'relationship',
		'taxonomy',
		'user',
		'google_map',
		'date_picker',
		'date_time_picker',
		'time_picker',
		'color_picker',
		'group',
		'repeater',
		'flexible_content'
	];

but I don't remember if it worked. I'll install the project again here and see if it's working

[jasonbahl]

Any custom extensions of ACF would need to be mapped to the WPGraphQL Schema. There's no programmatic way (that I can think of right now) to automatically have custom ACF Extensions work in the GraphQL Schema.

I'm open to suggestions if someone has an idea on how to get custom extensions to work automatically.

[OliverBurns]

If anyone has this problem still and needs a quick fix you can add 'image_aspect_ratio_crop' into the $supported_fields array (mentioned above by @dinho-afsn ) in /src/class-config.php. In the same file further down in a switch statement you also need to include it there where the 'image' and 'file' case are set. This would get removed though if you update the plugin.

Thanks for the plugin @jasonbahl and if a solution was found to add this automatically that would be awesome!

[joppuyo]

Good news, I have added support for this plugin in the latest version of ACF Image Aspect Ratio Crop plugin. I’m not sure if the implementation is 100% correct but it seemed to work fine in my testing.

It would be nice to have some kind of documentation how to implement support for this plugin in a 3rd party ACF field.

[jasonbahl]

👋🏻 We're re-building this plugin over here: https://github.com/wp-graphql/wpgraphql-acf and in the new version we have a new API for mapping ACF Field Types to the GraphQL Schema.

The new version of the plugin has built-in support for ACF Extended (free and PRO), which uses the new API for mapping custom ACF Field Types to the GraphQL Schema.

It's not fully documented yet, but you can see plenty of examples of using the new register_graphql_acf_field_type() API in this directory: https://github.com/wp-graphql/wpgraphql-acf/tree/main/src/ThirdParty/AcfExtended

Here's also a GIST showing how @CesarBenavides777 mapped the ACF Table field type to the GraphQL Schema: https://gist.github.com/CesarBenavides777/79b158db8355ddbc349fbf9b3272ae47

[flyingcodeeurope]

If anyone has this problem still and needs a quick fix you can add 'image_aspect_ratio_crop' into the $supported_fields array (mentioned above by @dinho-afsn ) in /src/class-config.php. In the same file further down in a switch statement you also need to include it there where the 'image' and 'file' case are set. This would get removed though if you update the plugin.

Thanks for the plugin @jasonbahl and if a solution was found to add this automatically that would be awesome!

Where actually should this be updated?

[flyingcodeeurope]

@jasonbahl I am looking for a way to use the ACF Image Crop in Grapql, but did not understand where to put the above code. Might be old? In this guide, https://acf.wpgraphql.com/adding-support-for-3rd-party-acf-field-type/ how do I add it?

[flyingcodeeurope]

@jasonbahl thats fine, its just that I cant figure out how to make it return the url. Its just giving me,
"teaserPhotoWide": "312312". Seems to be the ID.

[jasonbahl]

@flyingcodeeurope is the value an ID of an image?

If so you could get inspiration from how the Image field does things: https://github.com/wp-graphql/wpgraphql-acf/blob/develop/src/FieldType/Image.php

I'm not familiar with the Image Crop acf field type enough to know how to best support it. I think my best advice would be to draw inspiration from other fields we are supporting and implement in a similar way.

If you have a clear idea of how you would like it to show in the Schema but aren't quite sure how to get it there let me know

[flyingcodeeurope]

@jasonbahl I know I want it to output it as url only. Not 100% sure how to achieve that... I played around with the code and actually managed what I wanted. Thank you for your great help pointing me in the right direction.

[robkrause]

@jasonbahl I know I want it to output it as url only. Not 100% sure how to achieve that... I played around with the code and actually managed what I wanted. Thank you for your great help pointing me in the right direction.

Can you show how you did it? I'm struggling, trying to get the entire image object though...

[flyingcodeeurope]

@robkrause this is my full code to add it to graphql:

`<?php
namespace WPGraphQL\Acf\FieldType;

use GraphQL\Type\Definition\ResolveInfo;
use WPGraphQL\Acf\AcfGraphQLFieldType;
use WPGraphQL\Acf\FieldConfig;
use WPGraphQL\AppContext;
use WPGraphQL\Data\Connection\PostObjectConnectionResolver;

add_action( 'wpgraphql/acf/registry_init', function() {
register_graphql_acf_field_type(
'image_aspect_ratio_crop',
[
'exclude_admin_fields' => [ 'graphql_non_null' ],
'graphql_type' => static function ( FieldConfig $field_config, AcfGraphQLFieldType $acf_field_type ) {
if ( empty( $field_config->get_graphql_field_group_type_name() ) || empty( $field_config->get_graphql_field_name() ) ) {
return null;
}

				$type_name = $field_config->get_graphql_field_group_type_name();
				$to_type   = 'MediaItem';

				$field_config->register_graphql_connections(
					[
						'description'           => $field_config->get_field_description(),
						'acf_field'             => $field_config->get_acf_field(),
						'acf_field_group'       => $field_config->get_acf_field_group(),
						'fromType'              => $type_name,
						'toType'                => $to_type,
						'fromFieldName'         => $field_config->get_graphql_field_name(),
						'oneToOne'              => true,
						'resolve'               => static function ( $root, $args, AppContext $context, ResolveInfo $info ) use ( $field_config ) {
							$value = $field_config->resolve_field( $root, $args, $context, $info );

							if ( is_object( $value ) && isset( $value->ID ) ) {
								$value = $value->ID;
							}

							if ( is_array( $value ) && isset( $value['ID'] ) ) {
								$value = $value['ID'];
							}

							if ( empty( $value ) || ! absint( $value ) ) {
								return null;
							}

							$resolver = new PostObjectConnectionResolver( $root, $args, $context, $info, 'attachment' );
							return $resolver
							->one_to_one()
							->set_query_arg( 'p', absint( $value ) )
							->get_connection();
						},
						'allowFieldUnderscores' => true,
					]
				);

				return 'connection';
			},
		]
	);

});

?>`