[source-drupal] Add ability to use image derivatives

Summary

Drupal have a nicely developed feature to generate “image styles”: derivatives of original image differing in size, crop, etc. There are many modules in Drupal ecosystem that can extend “image styles”, e.g. Focal point.

Backend requirements:

• Install Consumer Image Styles module.
• Create at least one consumer and select image styles you want to get with request.
• Add consumerId=YOUR_CONSUMER_ID query string parameter to your request.

Basic example

Your JSON:API response will contain links to selected derivatives:

"meta": {
    "imageDerivatives": {
      "links": {
        "medium: {
          "href": "http://example.org/sites/…/medium/…/img.png?itok=LQM1dnmK",
          "meta": {
            "rel": [
                "drupal://jsonapi/extensions/consumer_image_styles/links/relation-types/#derivative"
            ]
          }
        },
      }
    }
  }

Motivation

If content is managed by Drupal It would be great to use those derivatives in statically generated site. Gridsome g-image component can resize and crop local images only, and it can’t crop image around focal point. It is just one case that Drupal backend can handle for you, there are many more.

[matt-e-king]

Hey @Al-Rozhkov! Sorry for the delay, I didn’t realize I had a another ticket assigned to me 😃. Let me investigate this further to see if I have any “knowledge-gaps” on how this could all work together.

I’ll keep you updated!

[felubra]

Perhaps a more scalable solution would involve a new option in the DrupalSource, ‘fetchImageDerivatives’:

(PoC)

async buildGraphQl () {
    const options = this.createContentTypeOptions()
    const { addContentType, addCollection = addContentType } = this.actions

    this.collection = addCollection(options)

    for (const item of this.response) {
      const fields = this.processFields(item.attributes)
      const relationships = this.processRelationships(item.relationships)
      const origin = typeof item.links.self === 'object'
        ? item.links.self.href
        : item.links.self
+++   const imageDerivatives = options.fetchImageDerivatives && 
        Object.entries(item.links).reduce(
          (derivatives, [name, { href, meta }]) => { 
            if (href && meta && meta.rel && meta.rel.includes("drupal://jsonapi/extensions/consumer_image_styles/links/relation-types/#derivative")) { 
              derivatives[name] = {href}
            }; 
            return derivatives; 
          }, {})

      this.collection.addNode({
        title: fields.title || fields.name,
        date: fields.created || fields.changed,
        ...fields,
        ...relationships,
        imageDerivatives,
        id: item.id,
        internal: { origin }
      })
    }
  }

createContentTypeOptions (override = {}) {
    const {
      options: {
        routes = {},
+++     fetchImageDerivatives = false,
      } = {}
    } = this.source

    return Object.assign({
+++   fetchImageDerivatives,
      typeName: this.typeName,
      route: routes[this.entityType]
    }, override)
  }

With this new option enabled, the script would check for image derivatives inside the link attribute by looking for a item with href and the rel attribute used by the Drupal Consumer Image Styles module.

Page query:

query Articles {
  allDrupalNodeArticle {
    edges {
      node {
        id,
        field_image {
          node {
            imageDerivatives {
              large {
                href
              },
              custom_image_style {
                  href
              },
            },
            uri {
              url
            }
          }
        }
      }
    }
  }
}