CDN IMAGE RESIZE FREE
Feel free to revisit those sections if you need a refresher. However, this will only work once you have successfully implemented the second requirement of Image CDN: That Asset implements the RemoteFile interface.Ī lot of this task builds upon your knowledge from Part 3, specifically the foreign-key relationship section. You’ll need to use it inside the nodeBuilder utility to add an additional image field to Post nodes. So far your createAssetNode utility isn’t doing anything. These are exactly the fields that are required for image assets.Īnd that’s it, you can create Asset nodes now! In the next task you’ll actually use createAssetNode. TypeScript should complain about missing fields on asstNode: This TypeScript type is identical to the image object shape inside each post in api/src/data.ts.Ĭreate the function body for createAssetNode by following what nodeBuilder is doing: Similar to nodeBuilder it receives gatsbyApi to call the various node helpers but data must be in the shape of IPostImageInput. Add the type imports for IRemoteImageNodeInput and IPostImageInput, create a shell for createAssetNode at the end of the file: Open plugin/src/constants.ts and add a new node type:
Creating a separate Asset type will also make schema customization in the next task easier. You can think of it as a more specialized version of the nodeBuilder utility, only responsible for creating nodes that should become Asset and hence Image CDN capable. You’ll create a new root node called Asset through a createAssetNode utility. Time to apply your theoretical knowledge about Image CDN to your own plugin.
You could use it something like this: Task: Write createAssetNode utility Probe-image-size returns a Promise so you’ll need to await its result. You can use probe-image-size to get these information from your remote URL. Alternatively, you could also provide the smallest possible image available from your API to this field.Īre width and height missing from the API response? Not every API returns width, height, and mimeType for an image. This tutorial uses Unsplash as it supports dynamically resizing images and thus both are used with the w query param. If your API supports returning different sized images through URL segments or URL params, you can place %width% and %height% into the URL. You can tell Image CDN to use your placeholderUrl to generate said placeholder.
The component supports displaying a placeholder while the image loads. One field that hasn’t been mentioned yet is the placeholderUrl. your API can provide image URLs in different sizes, pick the one with the best resolution. The URL you provide to the url field should link to the image version with the highest resolution, so if e.g. Once ImageAsset is created, you’ll be able to call gatsbyImage and resize on these GraphQL nodes and use Image CDN. Schema customization to implement RemoteFile on ImageAsset:Ĭreating the ImageAsset node with all required fields:Īs you can see the ImageAsset node holds all required fields but you can also add your own additional, arbitrary fields (like alt shown in the example). Here’s an example of a GraphQL root node that implements RemoteFile and creates nodes with all required fields for images: You’ll use gatsbyImage later to get your data for the comopnent. They are GraphQL resolvers relying on the existing data on the GraphQL node.
CDN IMAGE RESIZE PRO
Pro tip: resize and gatsbyImage will be provided by Gatsby. Similarly to Node, RemoteFile is also provided by Gatsby itself and will handle all the complicated pieces of Image CDN behind the scenes. In Part 3 you learned that root node types need to implement the Node interface. During node creation for that GraphQL node type, certain fields must exist on the node to match what RemoteFile expects.A GraphQL root node type that implements the RemoteFile interface.Basically, for Image CDN to work you need two things: As long as your API gives back a URL to an image, you should be able to implement the required code.
CDN IMAGE RESIZE MANUAL
We recommend using it over manual file downloading for the reasons above. Gatsby’s Image CDN feature can be added to any Gatsby source plugin. Use Image CDN with gatsby-plugin-image in your example site.Add Image CDN support to your source plugin.Visitors still get images in the most optimized formats such as AVIF and WebP, but site builds complete in a fraction of the time.īy the end of this part of the tutorial, you will be able to: Image CDN solves this by skipping image processing during the build, and instead deferring and offloading it to a dedicated image CDN. Traditionally, images were downloaded and transformed to enable this behavior. With it you can easily add responsive, optimized images to sites in all modern formats. Gatsby has best-in-class image support with its gatsby-plugin-image feature.
0 kommentar(er)
