Le CMS Netlify ne peut pas mettre à jour/remplacer une image qui a été optimisée dans Gatsby.js

Question

De mon fichier markdown index.md ,...

---
templateKey: home-page/index
image1: /img/City-Picture.jpg
---

...je veux faire un optimisé image1 à la disposition de la graphql ici à templates/index.js ...

export const homePageQuery = graphql`
  query HomePage($id: String!) {
    markdownRemark(id: { eq: $id }) {
      frontmatter {
        welcome_description
        image1 {
          childImageSharp {
            sizes(maxWidth: 590) {
              ...GatsbyImageSharpSizes
            }
          }
        }
      }
    }
 }

Mais j'obtiens cette erreur dans le terminal...

GraphQL Error Field "image1" must not have a selection since type "String" has no subfields.
2 |   query HomePage($id: String!) {
3 |     markdownRemark(id: { eq: $id }) {
4 |       frontmatter {
5 |         welcome_description
6 |         image1 {
  |                ^
7 |           childImageSharp {
8 |             sizes(maxWidth: 590) {
9 |               ...GatsbyImageSharpSizes
10|             }
11|           }
12|         }
13|       }
14|     }

(Je n'obtiendrai pas son erreur si je m'abstiens d'optimiser image1 .)

Sur gatsby-config.js J'ai placé ces plugins avant gatsby-source-filesystem ...

`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,

Je ne sais pas pourquoi GraphQL considère image1 pour être de type "String". Dans index.md même si je change image1: /img/City-Picture.jpg au chemin relatif de l'image ( image1: ../..static/img/City-Picture.jpg ), j'obtiens toujours la même erreur.

Bien sûr, je préférerais en rester là. /img/City-Picture.jpg car c'est le seul moyen de mettre à jour les images dans le CMS Netlify. Dans config.yml pour Netlify CMS, j'ai...

media_folder: static/img
public_folder: /img

...que je pense devoir conserver pour que l'éditeur d'images fonctionne dans le CMS.

J'ai essayé d'implémenter un plugin récemment construit. gatsby-remark-relative-images qui est censé compenser l'incapacité de Netlify CMS à utiliser les chemins relatifs, mais je n'ai pas réussi à le faire fonctionner.

Il y a une discussion active à ce sujet sur le site https://github.com/netlify/netlify-cms/issues/325 mais jusqu'à présent, je n'ai pu faire fonctionner aucune des solutions proposées.

A partir de maintenant, je suis face à un dilemme de deux choix imparfaits : 1. Avoir la possibilité d'éditer des images dans Netlify CMS, mais ne pas avoir la possibilité d'optimiser ces images par l'intermédiaire de gatsby-image . 2. Ne pas avoir la possibilité d'éditer les images dans Netlify CMS, mais avoir ensuite la possibilité d'optimiser ces images par l'intermédiaire de gatsby-image .

Je préférerais de loin avoir le meilleur des deux mondes si possible. Je vous serais reconnaissant de me donner votre avis sur la question.

Answer 1

En fait, je viens de remplacer mon CMS Netlify par le CMS Contentful (niveau gratuit). Il est beaucoup plus facile avec Contentful CMS de travailler avec des images. Pour ce faire, j'ai visualisé un excellent tutoriel sur la mise en place de Gatsby avec Contentful CMS.

Answer 2

Selon la question :

Le CMS Netlify ne peut pas mettre à jour/remplacer une image qui a été optimisée dans Gatsby.js

Voici comment fonctionne le flux :

1. Changements apportés à NetlifyCMS
2. Les changements déclenchent la construction
3. Gatsby donne le coup d'envoi

... (et faites comme indiqué dans le config.yml fichier)

NetlifyCMS ne fonctionne pas de cette façon, il ne fait que récupérer les données à partir de la base de données de l'entreprise. .git et les afficher dans l'interface utilisateur.

Alors que Gatsby commence à travailler lorsque les changements sont validés, et tout le travail a été fait par le Gatsby. (conversion de fichiers markdown, optimisation d'images) est sur le serveur.

Puisque Gatsby ne commet aucun changement dans le référentiel, NetlifyCMS ne sait rien de l'optimisation des images ou de la conversion des fichiers markdown en .html des fichiers.