In the previous post, I showed you how to render the footer from WordPress to Gatsby . Simply put, you create fields with the ACF plugin on WordPress . Then render via the Gatsby frontend. So with this lesson, let’s review how to use ACF to render the Gatsby frontend . Today I will use an example through slider and CTA images .
Make Slider on Gatsby
First of all, let’s create a field on the WordPress dashboard to create a field as follows.
I created a repeater on the options page to make a slider. Then let’s turn on Gatsby with the command
<code>gatsby clean; gatsby develop</code><div><span>1</span></div>
Here I use gatsby clean to clear the current cache created in the project folder. Then you turn on GraphQL and check the data returned when querying
<code>query MyQuery {
wordpressAcfOptions {
options {
slider_homepage {
image_slider {
source_url
alt_text
}
}
}
}
}
</code><div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span>
</div>
And the returned data will look like this:
<code>{
"data": {
"wordpressAcfOptions": {
"options": {
"slider_homepage": [
{
"image_slider": {
"source_url": "http://localhost/gatsby-wp/wp-content/uploads/2020/05/gatbyjs-sec-2.jpg",
"alt_text": ""
}
},
{
"image_slider": {
"source_url": "http://localhost/gatsby-wp/wp-content/uploads/2020/05/gatbyjs-sec-2.jpg",
"alt_text": ""
}
},
{
"image_slider": {
"source_url": "http://localhost/gatsby-wp/wp-content/uploads/2020/05/gatbyjs-sec-2.jpg",
"alt_text": ""
}
}
]
}
}
}
}</code><div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span><span>23</span><span>24</span><span>25</span><span>26</span><span>27</span><span>28</span>
</div>
So we have successfully taken the first step of bringing slider images from the WordPress dashboard to GraphQL then we have put the data rendered to the frontend into a slider. First you need to install the AliceCarousel library . Because Gatsby uses core React, you can freely choose the React library to use. You turn on cmd and use this command to install AliceCarousel :
<code>npm install react-alice-carousel</code><div><span>1</span></div>
Please visit this page to see how to use this library. After installing, I create a file slider.js then import slider.js into index.js to put the carousel on the homepage . After the import is done, I will create a query function using useStaticQuery, I save the data from this slider into a variable:
<code>const data = useStaticQuery(graphql`
{
wordpressAcfOptions {
options {
slider_homepage {
image_slider {
source_url
alt_text
}
}
}
}
}
`)</code><div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span>
</div>
Then I will pass props to the Slider Component as follows:
<code> <slider sliderdata="{data.wordpressAcfOptions.options.slider_homepage}/"></slider></code><div><span>1</span></div>
Next, I go to the silder.js file to process:
<code>import React, { Component } from 'react'
import AliceCarousel from 'react-alice-carousel'
import 'react-alice-carousel/lib/alice-carousel.css'</code><div>
<span>1</span><span>2</span><span>3</span>
</div>
I declare to import the parts I want to use, then I create the Component Slider as follows:
<code>export default class Slider extends Component {
state = {
responsive: { 1024: { items: 1 } },
} render() {
const { responsive} = this.state
const handleOnDragStart = (e) => e.preventDefault();
const{sliderData} = this.props;
const elm = sliderData.map((sliderItem,index) => {
return (
<div key="{index}" classname="carousel" ondragstart="{handleOnDragStart}">
<img data-src="{sliderItem.image_slider.source_url}" alt="{sliderItem.image_slider.alt_text}" classname="lazyload">
</div>
);
});
return (
<alicecarousel buttonsdisabled="{true}" responsive="{responsive}" items="{elm}" autoplayinterval="{5000}" autoplaydirection="ltr" autoplay="{true}" stopautoplayonhover="{true}" mousetrackingenabled="{true}"></alicecarousel>
)
}
}</code><div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span><span>23</span><span>24</span><span>25</span><span>26</span><span>27</span><span>28</span>
</div>
After completing the tasks, turn on Gatsby to check, you will see that the slider will appear with item show of 1 item per turn. Now that we’re done with the slider image, let’s move on to the next section.
CTA images on homepage
Just like the above, go to the dashboard to create a field through ACF
Then we restart gatsby and go to GraphQL to check the data.
<code>query MyQuery {
wordpressAcfOptions {
options {
slider_homepage {
image_slider {
source_url
alt_text
}
}
image {
source_url
alt_text
}
}
}
}
</code><div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span>
</div>
And the results you are returned:
<code>{
"data": {
"wordpressAcfOptions": {
"options": {
"slider_homepage": [
{
"image_slider": {
"source_url": "http://localhost/gatsby-wp/wp-content/uploads/2020/05/gatbyjs-sec-2.jpg",
"alt_text": ""
}
},
{
"image_slider": {
"source_url": "http://localhost/gatsby-wp/wp-content/uploads/2020/05/gatbyjs-sec-2.jpg",
"alt_text": ""
}
},
{
"image_slider": {
"source_url": "http://localhost/gatsby-wp/wp-content/uploads/2020/05/gatbyjs-sec-2.jpg",
"alt_text": ""
}
}
],
"image": {
"source_url": "http://localhost/gatsby-wp/wp-content/uploads/2020/05/Register_for_Event.png",
"alt_text": "Register_for_Event"
}
}
}
}
}</code><div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span><span>22</span><span>23</span><span>24</span><span>25</span><span>26</span><span>27</span><span>28</span><span>29</span><span>30</span><span>31</span><span>32</span>
</div>
Next, replace the data variable and pass props to the Component CTA so we have finished rendering from ACF on WordPress to the frontend Gatsby .
<code>const data = useStaticQuery(graphql`
{
wordpressAcfOptions {
options {
slider_homepage {
image_slider {
source_url
alt_text
}
}
image {
source_url
alt_text
}
}
}
}
`)</code><div>
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span><span>12</span><span>13</span><span>14</span><span>15</span><span>16</span><span>17</span><span>18</span>
</div>
summary
Through this article, I have helped you to make slider and CTA images from WordPress to Gatsby. And certainly also partly help you better understand when drawing data from ACF WordPress. In the next post, I will guide you to make News Render and testimonials of homepage on Gatsby.
