Monoforms

Mostrando imágenes en el blog con Gatsby.


Anteriormente al habilitar nuevamente el blog pasé todos los post que tenía en Drupal 8 a archivos Markdown para poderlos renderizar con Gatsby; esto lo hice con ayuda del plugin gatsby-source-filesystem.

headless drupal gatsby love

Lo que siguió fue lograr mostrar las imágenes, ya que la ruta de las imágenes de los post estaba apuntando a file system del path de Drupal (sites/default/files)

Esta tarea consistió de los siguientes pasos:

  1. Conocer las rutas de las imágenes que se usan en los post. No quería pasar todo el directorio de imágenes. Usé el comando sed para saber estas rutas y las guardé en un documento de texto. Este fue el comando que use.

    sed -n '/<img/s/.*src="\([^"]*\)".*/\1/p' *.md > ~/currentImg.txt
    
    images_current_using
  2. Después mediante un programa en GO, leí las líneas del archivo anterior para copiar del directorio de imágenes de Drupal: /sites/default/files a un directorio nuevo; yo lo puse en la raíz de mi directorio home. Este fue el programa en GO que hice para esta tarea: copyImagesToBlog.go.
  3. Una vez ya teniendo el nuevo directorio solo con las imágenes que utilizan cada uno de los post lo siguiente fue copiar todas las imágenes en mi proyecto Gatsby en src/images.
  4. El siguiente paso fue configurar los plugin para leer del directorio y optimizar imágenes. En este paso me ayude de la documentación de Gatsby, específicamente el post: Working with Images in Markdown Posts and Pages!. Lo primero fue instalar los plugin que vamos a utilizar con yarn:

    $ yarn add gatsby-image gatsby-transformer-sharp gatsby-plugin-sharp gatsby-remark-images
    

    También usé el plugin gatsby-source-filesystem que ya lo tenía instalado. Luego, configure los plugins en el archivo gatsby-config. De la documentación de Gatsby, más o menos la configuración inicial quedó así:

    module.exports = {
    plugins: [
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    `gatsby-transformer-remark`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/pages`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/images`,
      },
    },
    ],
    }
    

    Puedes ver dos fuentes distintas, una para las páginas y la otra para las imágenes, así como los plugins para el tratamiento de imágenes. Para ver las imágenes inline de los post lo hice mediante el plugin gatsby-transformer-remark y lo configuré de la siguiente manera conforme a la documentación:

    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 800,
            },
          },
        ],
      },
    },
    

    Con esa configuración el plugin sharp procesara las imágenes y aparecerán en la etiqueta img como si lo hiciera el componente gatsby-image.

  5. Posteriormente la siguiente tarea fue actualizar la ruta de todas las imágenes de los post para que apuntaran a la ruta de imágenes de Gatsby. Esto lo logré con ayuda de mi editor.
  6. Por último fue hacer deploy a netlify, aquí tuve un problema, ya que al realizar el deploy me marcaba un error muy extraño y no sabía por qué: Error: Input file contains unsupported image format. input file contains unsupported image format Después de varios días di con el problema. Lo que pasa es que había algunas imágenes en formato bmp. La solución fue convertirlas a jpg. Otra vez la terminal de linux vino al rescate. Hice un ls *.bmp para saber qué imágenes eran las culpables. A continuación convertí las imágenes en formato bmp a jpg con image magic:

    mogrify -format jpg *.bmp

Y por fín pude hacer el deploy a Netlify. Fueron muchos pasos y varios intentos para lograr que las imágenes se mostrarán correctamente pero al final quedó.

Lo que sigue es poder crear post sin hacer un archivo MD a mano, estoy pensando en algún CMS handless como Contentful o Netlify CMS pero aún no investigo al respecto. Aún que lo más seguro es que siga usando Drupal para editar mis post y luego exportarlo a markdown. Ya lo decidiré en los próximos días.

Saludos.


...
Monoforms ©2021 Created by Pedro Rojas Reyes