# gridsome-source-wordpress

> WordPress source for Gridsome with image processing support

Latest version **0.4.13** (published 2019-10-08) · 0 weekly downloads

## Install

```sh
npm install gridsome-source-wordpress
pnpm add gridsome-source-wordpress
yarn add gridsome-source-wordpress
bun add gridsome-source-wordpress
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.13 |
| Published | 2019-10-08 |
| First published | 2019-07-29 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8.3 |
| Dependencies | 4 |
| Unpacked size | 20.9 KB |
| Known vulnerabilities | 0 (+25 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | u12206050 |
| Keywords | gridsome, gridsome-plugin, gridsome-source, wordpress |

## Links

- npm: https://www.npmjs.com/package/gridsome-source-wordpress
- Repository: https://github.com/gridsome/gridsome/tree/master/packages/source-wordpress
- Homepage: https://github.com/gridsome/gridsome/tree/master/packages/source-wordpress#readme
- npm.io page: https://npm.io/package/gridsome-source-wordpress

## Dependencies (4)

- [axios](https://npm.io/package/axios.md) ^0.19.0
- [p-map](https://npm.io/package/p-map.md) ^1.2.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.11
- [camelcase](https://npm.io/package/camelcase.md) ^5.0.0

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.4.13 (latest) — 2019-10-08
- 0.4.12 — 2019-09-27
- 0.4.11 — 2019-09-12
- 0.4.9 — 2019-09-06
- 0.4.8 — 2019-09-06
- 0.4.6 — 2019-09-06
- 0.4.5 — 2019-07-31
- 0.4.4 — 2019-07-31
- 0.4.3 — 2019-07-31
- 0.4.2 — 2019-07-29
- 0.4.1 — 2019-07-29
- 0.4.0 — 2019-07-29

## README

# gridsome-source-wordpress

> WordPress source for Gridsome with support for downloading images.

## Install
- `yarn add gridsome-source-wordpress`
- `npm install gridsome-source-wordpress`

## Usage

Add `wp-images` to your `.gitignore`

```js
module.exports = {
  plugins: [
    {
      use: 'gridsome-source-wordpress',
      options: {
        baseUrl: 'WEBSITE_URL', // required
        apiBase: 'wp-json',
        typeName: 'WordPress',
        perPage: 100,
        concurrent: 10,
        routes: {
          post: '/:year/:month/:day/:slug',
          post_tag: '/tag/:slug'
        },
        splitPostsIntoFragments: true, // default false
        downloadRemoteImagesFromPosts: true, // default false
        downloadRemoteFeaturedImages: true, // default false
        downloadACFImages: true, // default false
      }
    }
  ]
}
```

## Use with Advanced Custom Fields

Install the [ACF to REST API](https://github.com/airesvsg/acf-to-rest-api) plugin to make ACF fields available in the GraphQL schema.


`downloadACFImages: true` when downloading images, the result will like this object:

```
image: {
  src: ...//GRIDSOME IMAGE OBJECT,
  alt: 'Any description text',
  title: 'Title text of the image'
}
```

Usage: `<g-image :src="image.src" :alt="image.alt" />`

## Splitting Posts Into Fragments

`splitPostsIntoFragments: true` This will expose the following on posts that you can request via GraphQL:

**Query**
```
  postFragments {
      type
      fragmentData {
          image
          alt
          html
      }
  }
```

Each fragment is either of type `img` or `html` so you can render like so:

**Render**
```
  <template v-if="$page.wordPressPost.postFragments">
    <template v-for="(fragment, i) in $page.wordPressPost.postFragments">
      <!-- Fragment is a html block -->
      <template v-if="fragment.type == 'html'">
        <div :key="html-${i}" v-html="fragment.fragmentData.html" class="entry-content"></div>
      </template>

      <!-- Fragment is a image -->
      <template v-if="fragment.type == 'img' && fragment.fragmentData.image">
        <g-image :key="img-${i}" :src="fragment.fragmentData.image" :alt="fragment.fragmentData.alt"/>
      </template>
    </template>
  </template>
```

### Caveats

**Folders not existing?**

Manually create the following directories in your project:

```
/
  .temp/
    downloads/
  wp-images/
```


### Tips

**Exclude unnecessary data from ACF fields**

Gridsome needs the `Return format` set to `Post Object` for `Post Object` relations in order to resolve references automatically. But Gridsome only need the `post_type` and `id` to set up a working GraphQL reference. Use the filter below to exclude all other fields.

```php
add_filter( 'acf/format_value', function ( $value ) {
  if ( $value instanceof WP_Post ) {
    return [
      'post_type' => $value->post_type,
      'id'        => $value->ID,
    ];
  }

  return $value;
}, 100 );
```

---
_Source: https://npm.io/package/gridsome-source-wordpress · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._