Using Wordpress as mainly a CMS for photos - how to fetch individual images?

🙋Get Help
1

Hi there,

I’m in the process of using Frontity to re-do my site in React.
My old site is a Wordpress site and I really only want to continue using it as a CMS for storing the many previously uploaded images.

I’m having trouble understanding how I would go about using the Wordpress REST API to access these images

So in my frontity.settings.js file I have

{
      name: "@frontity/wp-source",
      state: {
        source: {
          api: "https://www.scramblelock.com/wp-json",
        },
      },
    },

and I am creating a Navigation component wherein I want to fetch the image of my logo.

I can make a Postman call to get the image object with this
http://www.scramblelock.com/wp-json/wp/v2/media/10325

I just dont know how to integrate it into my Navigation component, which currently includes:

const Navigation = () => {
   return (
      <nav>
        <Image src={<image object's .link attribute to go here>} alt="" />
        <Link link="/">Home</Link>
        <Link link="/about">About</Link>
        <Link link="/services">Services</Link>
        <Link link="/contact">Contact</Link>
    </nav>
   )
}

I’ve seen some previous posts that talk about using actions.source.fetch() within a useEffect within the component, and others that do beforeSSR calls in the top most index.js file but it’s getting super confusing

It would help to know what exactly is needed here to fetch this particular image and have it displayed in my component as clear and concise as possible. Thank you!

2

There are multiple ways you can do this as you already noticed.
In most cases, your images are going to reside inside your page ‘content’ and will be accessible after getting your page’s data doing the following :

const data = state.source.get(frontity.state.router.link)
const page = state.source[data.type][data.id]

data contains information about your page, is it fetching? is it ready? is it a page? is it a post? page id? and so on.
once page data is ready, you can access it in the state using state.source[data.type][data.id]
there you will get an object with your page content, including attachment images and so on.

In your specific case however, since your Logo image is not attached to a specific page, i would recommand adding it to your state before SSR.

to do so, you could do the following (code goes into your root index.js containing theme state and actions, put this under the actions.theme namespace

// import fetch at top of file
import { fetch } from "frontity";

// this goes into actions: { theme: { ...

 beforeSSR: async ({ state }) => {
        // // fetch the logo
        await fetch('http://www.scramblelock.com/wp-json/wp/v2/media/10325')
        // convert the response to json format
          .then((response) => response.json())
         // add your image to the theme state
          .then((image) => (state.theme.logo = image));
}

by doing so, your image should now be accessible in your site’s state

you access the frontity state by using the ‘connect’ function so your component looks like this :slight_smile:

import { connect } from 'frontity'

const Navigation = ({ state }) => {
   return (
      <nav>
        <Image src={state.theme.logo.url} alt="" />
        <Link link="/">Home</Link>
        <Link link="/about">About</Link>
        <Link link="/services">Services</Link>
        <Link link="/contact">Contact</Link>
    </nav>
   )
}

export default connect(Navigation)

hope this help :slight_smile:

1 Like
3

Crystal clear now. Thank you very much @alexis.doroszkiewicz :pray: