{"id":152820,"date":"2022-02-01T09:22:31","date_gmt":"2022-02-01T09:22:31","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/wpgraphql-image-dataurl\/"},"modified":"2022-02-01T18:39:39","modified_gmt":"2022-02-01T18:39:39","slug":"generate-wpgraphql-image-dataurl","status":"publish","type":"plugin","link":"https:\/\/pap-aw.wordpress.org\/plugins\/generate-wpgraphql-image-dataurl\/","author":20001294,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.0.2","stable_tag":"1.0.2","tested":"5.9.13","requires":"5.0","requires_php":"7.1","requires_plugins":"","header_name":"Generate WpGraphql Image DataUrl","header_author":"Dipankar Maikap","header_description":"Generate DataUrl of MediaItems.","assets_banners_color":"3d3dee","last_updated":"2022-02-01 18:39:39","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/www.buymeacoffee.com\/dipankarmaikap","header_plugin_uri":"https:\/\/github.com\/dipankarmaikap\/wp-graphql-image-dataurl","header_author_uri":"https:\/\/dipankarmaikap.com\/","rating":0,"author_block_rating":0,"active_installs":40,"downloads":2025,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation"],"tags":{"1.0.2":{"tag":"1.0.2","author":"dipankarmaikap","date":"2022-02-01 18:39:39"}},"upgrade_notice":[],"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":2670411,"resolution":"128x128","location":"assets","locale":""},"icon-256x256.png":{"filename":"icon-256x256.png","revision":2670411,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-1544x500-rtl.png":{"filename":"banner-1544x500-rtl.png","revision":2670411,"resolution":"1544x500","location":"assets","locale":""},"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":2670411,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250-rtl.png":{"filename":"banner-772x250-rtl.png","revision":2670411,"resolution":"772x250","location":"assets","locale":""},"banner-772x250.png":{"filename":"banner-772x250.png","revision":2670411,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.2"],"block_files":[],"assets_screenshots":[],"screenshots":[],"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[195577,175418,189854,169165,189853],"plugin_category":[],"plugin_contributors":[207304],"plugin_business_model":[],"class_list":["post-152820","plugin","type-plugin","status-publish","hentry","plugin_tags-decoupled-wordpress","plugin_tags-graphql","plugin_tags-headless-wordpress","plugin_tags-jamstack","plugin_tags-wpgraphql","plugin_contributors-dipankarmaikap","plugin_committers-dipankarmaikap"],"banners":{"banner":"https:\/\/ps.w.org\/generate-wpgraphql-image-dataurl\/assets\/banner-772x250.png?rev=2670411","banner_2x":"https:\/\/ps.w.org\/generate-wpgraphql-image-dataurl\/assets\/banner-1544x500.png?rev=2670411","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/generate-wpgraphql-image-dataurl\/assets\/icon-128x128.png?rev=2670411","icon_2x":"https:\/\/ps.w.org\/generate-wpgraphql-image-dataurl\/assets\/icon-256x256.png?rev=2670411","generated":false},"screenshots":[],"raw_content":"\n

This plugin Generates DataUrl of MediaItem in WPGraphQL.<\/p>\n\n

This is an extension to the awsome WPGraphQL plugin (https:\/\/github.com\/wp-graphql\/wp-graphql) that Generate DataUrl of MediaItems.<\/p>\n\n

If you are working with Headless WordPress and NextJS you can notice that NextJS don't offer BlurUp image like GatsbyJS by default. You have to pass a base64 dataUrl in to make it work.\nOr you will see a blank space until the image loads. This plugin adds a dataUrl on each media item so you can use it as a placeholder until the image fully loads and NextJS will also create the fade\/BlurUp Effect like in GatsbyJS.<\/p>\n\n

Returning DataUrl for:<\/strong><\/p>\n\n