![]() I have added a bit of new code here so let's run through some of the logic. To be able to access the images in the GraphQL query, we need to update our gatsby-config.js file: This saves us having to repeat them in each GraphQL query. ![]() There are some defaults for gatsby-pluin-image already set in gatsby-config.js (lines 92 – 113). Some stock images are huge so be sure to downsize before using them. The images areġ344 pixels wide, this is double the widest display width needed. This reduces the size of your repo and also speeds up site build. Even though gatsby-plugin-image can optimise images, it is best practice to do some of the I downsized the images and optimised them locally before uploading so they are ready for you to You will need to download three images ( camera-restoration-project.jpg, film-lab-project.jpg and film-exchange-project.jpg ) and save them to a new folder: src/images. Including these can help reduce cumulative layout shift as the page loads. Generally this is best practice as it gives the user's browser an earlier indication Note the inclusion of width and height attributes. In the component body (lines 97–103) we will render the ThisĬreates an image object from the file. The ProjectCarouselFragment uses the new Gatsby Image Plugin API. You can learn more about Gatsby GraphQL Fragments in the Gatsby docs. Once, so the code is more robust using fragments. On top if we need to change anything in the query we just change it Defining the fragment once and then referencing it when we need it saves us writing This illustrates one practical use of fragments. the ProjectCarouselFragment - no fewer than three times! In lines 98 – 110 we define a fragment which we can use First, though, let's have a quick look at the GraphQL queries. We need to define a few bits and pieces before we wire it Here's a short video of our CSS only carousel in action: We do all of that in CSS, using gatsby-image-plugin for the On hover (or tap for mobile), a nice flip We will use a carousel to showcase recent projects on the home page of an MDX photography blog.Ĭarousel serves up a hero image for each project. Basically the pattern can be used anywhere where you haveĪ number of items you want to present using a limit screen footprint. Even if a package like flickity is your current first choice for an image gallery slider. It is not only usefulįor e-commerce sites though. Use on online stores, letting you flip through a catalogue of products. The carousel is such a useful pattern to add to your toolkit. Logic, letting CSS do some of the heavy lifting and hopefully make the page more efficient. React features, you might appreciate the opportunity to step back and simplify your Gatsby However, even if you are already a Gatsby pro and can code this all up using advanced Although there is nothing to fear in React, this guide will help you ease into Why build a CSS only Carousel in Gatsby? I thought this might be something interesting forĪnyone new to Gatsby and React, but with some web development experience with other On top we take the new Gatsby Image Plugin out for a spin. As well as that, we will give it a little flip animation. ![]() We are going to add a slider which stops at discrete Let's build a CSS only Carousel in Gatsby. However, as there are several images and not always the same amount of them in my blog posts, I need to write a loop (I guess?) but don’t know how to.□ Why Build a CSS only Carousel in Gatsby? # I have an asset gallery in my DatoCMS (only images) and would like to display them via GatsbyImage (from the new gatsby-plugin-image). ![]()
0 Comments
Leave a Reply. |