![]() Note the special configuration for the gatsby-source-filesystem plugin: plugins: [Īs you can see, we are setting the path we used at the start of the section to stores the pictures ( content/gallery). Now, to actually use the tools, we need to add them to the plugins array in gatsby-config.js. Most of these package should already be installed, but in case they are not, you can use the following command to install them: npm install -save gatsby-transformer-sharp gatsby-plugin-sharp gatsby-image gatsby-source-filesystem These plugins ( gatsby-transformer-sharp and gatsby-plugin-sharp) allow us to use gatsby-image, a Gatsby wrapper over the img tag that provides optimized image loading. On top of that, we need to add the Gatsby plugins for sharp, a image manipulation library focused on the web. Now we need to make them available through GraphQL.ĭoing so is easy, since the Gatsby starter we are using already includes the gatsby-source-filesystem plugin, which is responsible for obtaining information (i.e., files and their metadata) from the filesystem and providing it through GraphQL. I recommend that you have at least 6 images in the gallery directory, so we can see how a full gallery would look like. I have created a content/gallery folder and downloaded some wallpapers from Unsplash, so that it looks like the structure below. You should now see the following page in Now we're ready to start development! Loading the images into GraphQLįirst of all, we need to create a folder to hold our images and fill it with some pictures. Once the command has finished, you can run the following commands to start the development server: cd gatsby-starter-default You can get it by running: npx gatsby new gatsby-starter-default We'll be using the gatsby-starter-default starter. ![]() If you prefer to read the final code, you can take a look at the starter I made from this post. You can check the final result deployed on Netlify here! We will use the gatsby-starter-default starter as base, but the approach is valid for all other implementations. In this post we will be developing a Photo Gallery, from adding a directory with pictures and querying them in GraphQL to displaying the images and giving the whole gallery some style. I have recently built a gallery for my personal website and I'd like to share some of the knowledge I acquired. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |