cloudinary / cloudinary_wordpress

Cloudinary's WordPress plugin
GNU General Public License v2.0
39 stars 28 forks source link

Proper image urls don't come through WPGraphQL #679

Closed ashleynexvelsolutions closed 2 years ago

ashleynexvelsolutions commented 2 years ago

My image URLs aren't coming through properly via WPGraphQL. They’re fine in the REST API though. But this is a big problem for anyone using WordPress headlessly with WPGraphQL, which is a pretty popular and widely used plugin for implementing graphql. When I downgrade the plugin to version 2.7.6 they come through as expected.

I see two similar issues reported here. https://www.higithub.com/wp-graphql/issue/wp-graphql/2192 https://github.com/cloudinary/cloudinary_wordpress/issues/670

I’ve got a post with an image inserted into the content via the image block. I’ve also got an image being added through an ACF image field. The same thing is happening with both.

Version 3.0.1 WPGraphQL output: https://ibb.co/D1TkR6g

Version 2.7.6 WPGraphQL output: https://ibb.co/Z80w3dC

Version 3.0.1 REST API output for the post: https://ibb.co/JcmNzX9

Version 3.0.1 REST API output for the ACF image: https://ibb.co/nb2PWpp

You’ll probably ask for the system report, so here they are for both versions. System report when version 2.7.6 is installed: { "system_status": { "home": "https://wordpress-321502-2425626.cloudwaysapps.com", "wordpress": "5.9", "php": "7.4.27", "php_extensions": [ "Core", "date", "libxml", "openssl", "pcre", "zlib", "filter", "hash", "Reflection", "SPL", "session", "standard", "sodium", "cgi-fcgi", "mysqlnd", "PDO", "xml", "apcu", "bcmath", "bz2", "calendar", "ctype", "curl", "dba", "dom", "enchant", "mbstring", "FFI", "fileinfo", "ftp", "gd", "gettext", "gmp", "iconv", "igbinary", "imagick", "imap", "intl", "json", "exif", "mongodb", "msgpack", "mysqli", "odbc", "pdo_dblib", "PDO_Firebird", "pdo_mysql", "PDO_ODBC", "pdo_pgsql", "pdo_sqlite", "pgsql", "apc", "posix", "readline", "redis", "shmop", "SimpleXML", "soap", "sockets", "sqlite3", "sysvmsg", "sysvsem", "sysvshm", "tidy", "tokenizer", "xmlreader", "xmlrpc", "xmlwriter", "xsl", "zip", "Phar", "memcached", "Zend OPcache" ] }, "theme_status": { "name": "Twenty Twenty-One", "version": "1.4", "author": "the WordPress team", "author_url": "https://wordpress.org/", "child_theme": false }, "plugins_report": { "must_use": [], "plugins": [ { "Name": "Advanced Custom Fields", "PluginURI": "https://www.advancedcustomfields.com", "Version": "5.11.4", "Description": "Customize WordPress with powerful, professional and intuitive fields. <cite>By <a href=\"https://www.advancedcustomfields.com\">Delicious Brains</a>.</cite>", "Author": "<a href=\"https://www.advancedcustomfields.com\">Delicious Brains</a>", "AuthorURI": "https://www.advancedcustomfields.com", "TextDomain": "acf", "DomainPath": "/lang", "Network": false, "RequiresWP": "", "RequiresPHP": "", "UpdateURI": "", "Title": "<a href=\"https://www.advancedcustomfields.com\">Advanced Custom Fields</a>", "AuthorName": "Delicious Brains" }, { "Name": "Cloudinary", "PluginURI": "https://cloudinary.com/documentation/wordpress_integration", "Version": "STABLETAG", "Description": "With the Cloudinary plugin, you can upload and manage your media assets in the cloud, then deliver them to your users through a fast content delivery network, improving your website\u2019s loading speed and overall user experience. Apply multiple transformations and take advantage of a full digital asset management solution without leaving WordPress. <cite>By <a href=\"https://cloudinary.com/\">Cloudinary Ltd., XWP</a>.</cite>", "Author": "<a href=\"https://cloudinary.com/\">Cloudinary Ltd., XWP</a>", "AuthorURI": "https://cloudinary.com/", "TextDomain": "cloudinary", "DomainPath": "/languages", "Network": false, "RequiresWP": "", "RequiresPHP": "", "UpdateURI": "", "Title": "<a href=\"https://cloudinary.com/documentation/wordpress_integration\">Cloudinary</a>", "AuthorName": "Cloudinary Ltd., XWP" }, { "Name": "WP Gatsby", "PluginURI": "", "Version": "2.2.1", "Description": "Optimize your WordPress site to be a source for Gatsby sites. <cite>By <a href=\"https://gatsbyjs.org\">GatsbyJS, Jason Bahl, Tyler Barnes</a>.</cite>", "Author": "<a href=\"https://gatsbyjs.org\">GatsbyJS, Jason Bahl, Tyler Barnes</a>", "AuthorURI": "https://gatsbyjs.org", "TextDomain": "wp-gatsby", "DomainPath": "/languages/", "Network": false, "RequiresWP": "5.4.2", "RequiresPHP": "7.3", "UpdateURI": "", "Title": "WP Gatsby", "AuthorName": "GatsbyJS, Jason Bahl, Tyler Barnes" }, { "Name": "WPGraphQL for Advanced Custom Fields", "PluginURI": "https://wpgraphql.com/acf", "Version": "0.5.3", "Description": "Adds Advanced Custom Fields to the WPGraphQL Schema <cite>By <a href=\"https://www.wpgraphql.com\">WPGraphQL, Jason Bahl</a>.</cite>", "Author": "<a href=\"https://www.wpgraphql.com\">WPGraphQL, Jason Bahl</a>", "AuthorURI": "https://www.wpgraphql.com", "TextDomain": "wp-graphql-acf", "DomainPath": "/languages", "Network": false, "RequiresWP": "", "RequiresPHP": "7.0", "UpdateURI": "", "Title": "<a href=\"https://wpgraphql.com/acf\">WPGraphQL for Advanced Custom Fields</a>", "AuthorName": "WPGraphQL, Jason Bahl" }, { "Name": "WP GraphQL", "PluginURI": "https://github.com/wp-graphql/wp-graphql", "Version": "1.6.12", "Description": "GraphQL API for WordPress <cite>By <a href=\"http://www.wpgraphql.com\">WPGraphQL</a>.</cite>", "Author": "<a href=\"http://www.wpgraphql.com\">WPGraphQL</a>", "AuthorURI": "http://www.wpgraphql.com", "TextDomain": "wp-graphql", "DomainPath": "/languages/", "Network": false, "RequiresWP": "5.0", "RequiresPHP": "7.1", "UpdateURI": "", "Title": "<a href=\"https://github.com/wp-graphql/wp-graphql\">WP GraphQL</a>", "AuthorName": "WPGraphQL" } ] }, "config_report": { "cloudinary": [], "about": [], "usage": null, "last_usage": { "plan": "Free", "last_updated": "2022-02-05", "date_requested": "2022-02-06T00:00:00Z", "transformations": { "usage": 39, "credits_usage": 0.04 }, "objects": { "usage": 69 }, "bandwidth": { "usage": 230206, "credits_usage": 0 }, "storage": { "usage": 133372880, "credits_usage": 0.12 }, "credits": { "usage": 0.16, "limit": 25, "used_percent": 0.64 }, "requests": 24, "resources": 37, "derived_resources": 32, "media_limits": { "image_max_size_bytes": 10485760, "video_max_size_bytes": 104857600, "raw_max_size_bytes": 10485760, "image_max_px": 25000000, "asset_max_total_px": 50000000 }, "max_image_size": 10485760, "max_video_size": 104857600 }, "signature": "f8e69444c599d82ba96258c7ed692bd5", "version": null, "status": { "status": "ok" }, "media_display": { "image_optimization": "on", "image_format": "auto", "image_quality": "auto", "enable_breakpoints": "on", "breakpoints": "3", "bytes_step": "200", "max_width": "2048", "min_width": "800", "image_preview": "https://res.cloudinary.com/demo/image/upload/w_600/sample.jpg", "video_player": "wp", "video_controls": "on", "video_loop": "off", "video_autoplay_mode": "off", "video_limit_bitrate": "off", "video_bitrate": "500", "video_optimization": "on", "video_format": "auto", "video_quality": "auto" }, "setup": { "enable_report": "on" }, "sync_media": { "auto_sync": "on", "cloudinary_folder": ".", "offload": "dual_full" }, "gallery": { "transition": "fade", "aspectRatio": "3:4", "navigation": "always", "zoom": true, "carouselLocation": "top", "carouselOffset": 5, "carouselStyle": "thumbnails", "displayProps": { "mode": "classic", "columns": 1 }, "indicatorProps": { "shape": "round" }, "themeProps": { "primary": "#cf2e2e", "onPrimary": "#000000", "active": "#777777" }, "zoomProps": { "type": "popup", "viewerPosition": "bottom", "trigger": "click" }, "thumbnailProps": { "width": 64, "height": 64, "navigationShape": "radius", "selectedStyle": "gradient", "selectedBorderPosition": "all", "selectedBorderWidth": 4, "mediaSymbolShape": "round" }, "cloudName": "nexvel-solutions", "container": "" } } } System report when version 3.0.1 is installed: { "system_status": { "home": "https://wordpress-321502-2425626.cloudwaysapps.com", "wordpress": "5.9", "php": "7.4.27", "php_extensions": [ "Core", "date", "libxml", "openssl", "pcre", "zlib", "filter", "hash", "Reflection", "SPL", "session", "standard", "sodium", "cgi-fcgi", "mysqlnd", "PDO", "xml", "apcu", "bcmath", "bz2", "calendar", "ctype", "curl", "dba", "dom", "enchant", "mbstring", "FFI", "fileinfo", "ftp", "gd", "gettext", "gmp", "iconv", "igbinary", "imagick", "imap", "intl", "json", "exif", "mongodb", "msgpack", "mysqli", "odbc", "pdo_dblib", "PDO_Firebird", "pdo_mysql", "PDO_ODBC", "pdo_pgsql", "pdo_sqlite", "pgsql", "apc", "posix", "readline", "redis", "shmop", "SimpleXML", "soap", "sockets", "sqlite3", "sysvmsg", "sysvsem", "sysvshm", "tidy", "tokenizer", "xmlreader", "xmlrpc", "xmlwriter", "xsl", "zip", "Phar", "memcached", "Zend OPcache" ] }, "theme_status": { "name": "Twenty Twenty-One", "version": "1.4", "author": "the WordPress team", "author_url": "https://wordpress.org/", "child_theme": false }, "plugins_report": { "must_use": [], "plugins": [ { "Name": "Advanced Custom Fields", "PluginURI": "https://www.advancedcustomfields.com", "Version": "5.11.4", "Description": "Customize WordPress with powerful, professional and intuitive fields. <cite>By <a href=\"https://www.advancedcustomfields.com\">Delicious Brains</a>.</cite>", "Author": "<a href=\"https://www.advancedcustomfields.com\">Delicious Brains</a>", "AuthorURI": "https://www.advancedcustomfields.com", "TextDomain": "acf", "DomainPath": "/lang", "Network": false, "RequiresWP": "", "RequiresPHP": "", "UpdateURI": "", "Title": "<a href=\"https://www.advancedcustomfields.com\">Advanced Custom Fields</a>", "AuthorName": "Delicious Brains" }, { "Name": "Cloudinary", "PluginURI": "https://cloudinary.com/documentation/wordpress_integration", "Version": "3.0.1", "Description": "With the Cloudinary plugin, you can upload and manage your media assets in the cloud, then deliver them to your users through a fast content delivery network, improving your website\u2019s loading speed and overall user experience. Apply multiple transformations and take advantage of a full digital asset management solution without leaving WordPress. <cite>By <a href=\"https://cloudinary.com/\">Cloudinary Ltd., XWP</a>.</cite>", "Author": "<a href=\"https://cloudinary.com/\">Cloudinary Ltd., XWP</a>", "AuthorURI": "https://cloudinary.com/", "TextDomain": "cloudinary", "DomainPath": "/languages", "Network": false, "RequiresWP": "", "RequiresPHP": "", "UpdateURI": "", "Title": "<a href=\"https://cloudinary.com/documentation/wordpress_integration\">Cloudinary</a>", "AuthorName": "Cloudinary Ltd., XWP" }, { "Name": "WP Gatsby", "PluginURI": "", "Version": "2.2.1", "Description": "Optimize your WordPress site to be a source for Gatsby sites. <cite>By <a href=\"https://gatsbyjs.org\">GatsbyJS, Jason Bahl, Tyler Barnes</a>.</cite>", "Author": "<a href=\"https://gatsbyjs.org\">GatsbyJS, Jason Bahl, Tyler Barnes</a>", "AuthorURI": "https://gatsbyjs.org", "TextDomain": "wp-gatsby", "DomainPath": "/languages/", "Network": false, "RequiresWP": "5.4.2", "RequiresPHP": "7.3", "UpdateURI": "", "Title": "WP Gatsby", "AuthorName": "GatsbyJS, Jason Bahl, Tyler Barnes" }, { "Name": "WPGraphQL for Advanced Custom Fields", "PluginURI": "https://wpgraphql.com/acf", "Version": "0.5.3", "Description": "Adds Advanced Custom Fields to the WPGraphQL Schema <cite>By <a href=\"https://www.wpgraphql.com\">WPGraphQL, Jason Bahl</a>.</cite>", "Author": "<a href=\"https://www.wpgraphql.com\">WPGraphQL, Jason Bahl</a>", "AuthorURI": "https://www.wpgraphql.com", "TextDomain": "wp-graphql-acf", "DomainPath": "/languages", "Network": false, "RequiresWP": "", "RequiresPHP": "7.0", "UpdateURI": "", "Title": "<a href=\"https://wpgraphql.com/acf\">WPGraphQL for Advanced Custom Fields</a>", "AuthorName": "WPGraphQL, Jason Bahl" }, { "Name": "WP GraphQL", "PluginURI": "https://github.com/wp-graphql/wp-graphql", "Version": "1.6.12", "Description": "GraphQL API for WordPress <cite>By <a href=\"http://www.wpgraphql.com\">WPGraphQL</a>.</cite>", "Author": "<a href=\"http://www.wpgraphql.com\">WPGraphQL</a>", "AuthorURI": "http://www.wpgraphql.com", "TextDomain": "wp-graphql", "DomainPath": "/languages/", "Network": false, "RequiresWP": "5.0", "RequiresPHP": "7.1", "UpdateURI": "", "Title": "<a href=\"https://github.com/wp-graphql/wp-graphql\">WP GraphQL</a>", "AuthorName": "WPGraphQL" } ] }, "config_report": { "cloudinary_usage": "", "cloudinary_last_usage": { "plan": "Free", "last_updated": "2022-02-05", "date_requested": "2022-02-06T00:00:00Z", "transformations": { "usage": 48, "credits_usage": 0.05 }, "objects": { "usage": 78 }, "bandwidth": { "usage": 243372, "credits_usage": 0 }, "storage": { "usage": 138440700, "credits_usage": 0.13 }, "credits": { "usage": 0.18, "limit": 25, "used_percent": 0.72 }, "requests": 28, "resources": 38, "derived_resources": 40, "media_limits": { "image_max_size_bytes": 10485760, "video_max_size_bytes": 104857600, "raw_max_size_bytes": 10485760, "image_max_px": 25000000, "asset_max_total_px": 50000000 }, "max_image_size": 10485760, "max_video_size": 104857600 }, "cloudinary_connection_signature": "f8e69444c599d82ba96258c7ed692bd5", "cloudinary_settings_version": "3.0.1", "cloudinary_status": { "status": "ok" }, "cloudinary_history": { "05-02-2022": { "plan": "Free", "last_updated": "2022-02-05", "date_requested": "2022-02-05T00:00:00Z", "transformations": { "usage": 33, "credits_usage": 0.03 }, "objects": { "usage": 63 }, "bandwidth": { "usage": 230206, "credits_usage": 0 }, "storage": { "usage": 124655723, "credits_usage": 0.12 }, "credits": { "usage": 0.15 }, "requests": 24, "resources": 36, "derived_resources": 27, "media_limits": { "image_max_size_bytes": 10485760, "video_max_size_bytes": 104857600, "raw_max_size_bytes": 10485760, "image_max_px": 25000000, "asset_max_total_px": 50000000 } }, "04-02-2022": { "plan": "Free", "last_updated": "2022-02-05", "date_requested": "2022-02-04T00:00:00Z", "transformations": { "usage": 0, "credits_usage": 0 }, "objects": { "usage": 0 }, "bandwidth": { "usage": 0, "credits_usage": 0 }, "storage": { "usage": 0, "credits_usage": 0 }, "credits": { "usage": 0 }, "requests": 0, "resources": 0, "derived_resources": 0, "media_limits": { "image_max_size_bytes": 10485760, "video_max_size_bytes": 104857600, "raw_max_size_bytes": 10485760, "image_max_px": 25000000, "asset_max_total_px": 50000000 } }, "03-02-2022": { "plan": "Free", "last_updated": "2022-02-05", "date_requested": "2022-02-03T00:00:00Z", "transformations": { "usage": 0, "credits_usage": 0 }, "objects": { "usage": 0 }, "bandwidth": { "usage": 0, "credits_usage": 0 }, "storage": { "usage": 0, "credits_usage": 0 }, "credits": { "usage": 0 }, "requests": 0, "resources": 0, "derived_resources": 0, "media_limits": { "image_max_size_bytes": 10485760, "video_max_size_bytes": 104857600, "raw_max_size_bytes": 10485760, "image_max_px": 25000000, "asset_max_total_px": 50000000 } }, "02-02-2022": { "plan": "Free", "last_updated": "2022-02-05", "date_requested": "2022-02-02T00:00:00Z", "transformations": { "usage": 0, "credits_usage": 0 }, "objects": { "usage": 0 }, "bandwidth": { "usage": 0, "credits_usage": 0 }, "storage": { "usage": 0, "credits_usage": 0 }, "credits": { "usage": 0 }, "requests": 0, "resources": 0, "derived_resources": 0, "media_limits": { "image_max_size_bytes": 10485760, "video_max_size_bytes": 104857600, "raw_max_size_bytes": 10485760, "image_max_px": 25000000, "asset_max_total_px": 50000000 } }, "01-02-2022": { "plan": "Free", "last_updated": "2022-02-05", "date_requested": "2022-02-01T00:00:00Z", "transformations": { "usage": 0, "credits_usage": 0 }, "objects": { "usage": 0 }, "bandwidth": { "usage": 0, "credits_usage": 0 }, "storage": { "usage": 0, "credits_usage": 0 }, "credits": { "usage": 0 }, "requests": 0, "resources": 0, "derived_resources": 0, "media_limits": { "image_max_size_bytes": 10485760, "video_max_size_bytes": 104857600, "raw_max_size_bytes": 10485760, "image_max_px": 25000000, "asset_max_total_px": 50000000 } }, "31-01-2022": { "plan": "Free", "last_updated": "2022-02-05", "date_requested": "2022-01-31T00:00:00Z", "transformations": { "usage": 0, "credits_usage": 0 }, "objects": { "usage": 0 }, "bandwidth": { "usage": 0, "credits_usage": 0 }, "storage": { "usage": 0, "credits_usage": 0 }, "credits": { "usage": 0 }, "requests": 0, "resources": 0, "derived_resources": 0, "media_limits": { "image_max_size_bytes": 10485760, "video_max_size_bytes": 104857600, "raw_max_size_bytes": 10485760, "image_max_px": 25000000, "asset_max_total_px": 50000000 } }, "30-01-2022": { "plan": "Free", "last_updated": "2022-02-05", "date_requested": "2022-01-30T00:00:00Z", "transformations": { "usage": 0, "credits_usage": 0 }, "objects": { "usage": 0 }, "bandwidth": { "usage": 0, "credits_usage": 0 }, "storage": { "usage": 0, "credits_usage": 0 }, "credits": { "usage": 0 }, "requests": 0, "resources": 0, "derived_resources": 0, "media_limits": { "image_max_size_bytes": 10485760, "video_max_size_bytes": 104857600, "raw_max_size_bytes": 10485760, "image_max_px": 25000000, "asset_max_total_px": 50000000 } } }, "sync_media": { "auto_sync": "on", "cloudinary_folder": "", "offload": "dual_full" }, "site_cache": { "cache": { "enable": "off", "cld_purge_all": "", "assets": { "plugins": { "enabled": "off", "paths": { "acf": "", "cloudinary": "", "wp-gatsby": "", "wp-graphql-acf": "", "wp-graphql": "" } }, "themes": { "enabled": "off", "paths": { "twentytwentyone": "" } }, "wordpress": { "enabled": "off", "paths": { "wp_admin": "", "wp_includes": "" } }, "content": { "enabled": "off", "paths": { "wp_content": "" } } } } }, "additional_domains": { "cache_external": { "external_assets": "off", "uploadable_domains": "" } }, "media_display": { "image_optimization": "on", "image_format": "auto", "image_quality": "auto", "enable_breakpoints": "on", "breakpoints": "3", "bytes_step": "200", "max_width": "2048", "min_width": "800", "image_freeform": "", "video_player": "wp", "video_controls": "on", "video_loop": "off", "video_autoplay_mode": "off", "video_limit_bitrate": "off", "video_bitrate": "500", "video_optimization": "on", "video_format": "auto", "video_quality": "auto", "video_freeform": "", "svg_support": "off", "image_preview": "https://res.cloudinary.com/demo/image/upload/w_600/sample.jpg", "video_preview": "", "use_lazy_load": "on", "lazy_threshold": "100px", "lazy_custom_color": "rgba(153,153,153,0.5)", "lazy_animate": "on", "lazy_placeholder": "blur", "lazyload_preview": "https://res.cloudinary.com/demo/image/upload/w_600/sample.jpg", "pixel_step": 200, "dpr": "2X", "breakpoints_preview": "https://res.cloudinary.com/demo/image/upload/w_600/sample.jpg" }, "gallery": { "transition": "fade", "aspectRatio": "3:4", "navigation": "always", "zoom": true, "carouselLocation": "top", "carouselOffset": 5, "carouselStyle": "thumbnails", "displayProps": { "mode": "classic", "columns": 1 }, "indicatorProps": { "shape": "round" }, "themeProps": { "primary": "#cf2e2e", "onPrimary": "#000000", "active": "#777777" }, "zoomProps": { "type": "popup", "viewerPosition": "bottom", "trigger": "click" }, "thumbnailProps": { "width": 64, "height": 64, "navigationShape": "radius", "selectedStyle": "gradient", "selectedBorderPosition": "all", "selectedBorderWidth": 4, "mediaSymbolShape": "round" }, "cloudName": "nexvel-solutions", "container": "", "queryParam": "AA" }, "setup": { "enable_report": "on", "reporting": { "enable_report": "on" } }, "extensions": { "media-library": "off" } } }

atdcloud commented 2 years ago

Hi @ashleynexvelsolutions, We are working internally and this issue will be addressed in the next release. Can you please try this add action?


add_action(
    'wp',
    function() {
        $replace = \Cloudinary\get_plugin_instance()->get_component('replace' );
        if ( $replace ) {
          add_filter( 'the_content', array( $replace, 'replace_strings') );
        }
    }
);

Otherwise, downgrading to version 2.7.7 is another option.

ashleynexvelsolutions commented 2 years ago

@atdcloud Thanks for the prompt response. Unfortunately no, adding that did not work.

atdcloud commented 2 years ago

@atdcloud Thanks for the prompt response. Unfortunately no, adding that did not work.

Thanks for the update. We don't have an ETA when the next release as of yet but we will give you an update as soon as it is available.

Vdeub-cloudinary commented 2 years ago

Hi @ashleynexvelsolutions, Since 3.0.2, you should get the image URLs via WPGraphQL when querying the content. In 3.0.3 that will be released soon, you will also get the image URLs via WPGraphQL when querying image nodes

Vdeub-cloudinary commented 2 years ago

Hi @ashleynexvelsolutions, we have just released 3.0.3, could you please upgrade the plugin and see if that fixes your issue?

ashleynexvelsolutions commented 2 years ago

Yes, it's fixed. Thanks.

Vdeub-cloudinary commented 2 years ago

Hi @ashleynexvelsolutions, thanks for confirming!