Problema de ajuste de imagen al utilizar el flujo de trabajo de Wowchemy Hugo Academic y Blogdown.
Seguí la publicación de blog increíblemente útil de ApresHill para crear mi sitio web. Tengo una pregunta sobre el alcance de imágenes, agradecería si alguien puede arrojar algo de luz. El tutorial de Wowchemy dice que las imágenes se pueden colocar en la carpeta “/assets/media/” a partir de Wowchemy v5.1. Antes de esta versión, se encontraban en la carpeta “static”.
Mi pregunta tiene que ver con la diferencia de alcance cuando me refiero a una imagen en el encabezado YAML o dentro de la publicación misma. En resumen, el alcance de los encabezados YAML es para imágenes en “/assets/media/”, mientras que los cuerpos de las publicaciones son para imágenes en “static/media/”:
Sea el camino de las imágenes:
“/assets/media/IMG_EN_CARPETA_ASSETS_MEDIA.jpg”
“/static/media/IMG_EN_CARPETA_STATIC_MEDIA.jpg”
Esto funciona en YAML:
background:
image: IMG_EN_CARPETA_ASSETS_MEDIA.jpg
image_darken: 0.65
image_parallax: true
image_position: center
image_size: cover
text_color_light: true
spacing:
padding: [“20px”, “0”, “20px”, “0”]
Esto no funciona en YAML:
background:
image: IMG_EN_CARPETA_STATIC_MEDIA.jpg
image_darken: 0.65
image_parallax: true
image_position: center
image_size: cover
text_color_light: true
spacing:
padding: [“20px”, “0”, “20px”, “0”]
Cuando intento insertar una imagen en el cuerpo de la publicación, solo se toma en cuenta la carpeta “static”:
Esto funciona al agregar imágenes en la carpeta “static”:
# funciona
Las imágenes en “/assets/media/” no se encuentran. Intenté algunas cosas aquí:
Sin embargo, funciona cuando uso los códigos cortos:
{{< figure src=”IMG_EN_CARPETA_ASSETS_MEDIA.jpg” >}}
¿Por qué los campos de encabezado y cuerpo de las publicaciones se comportan de manera diferente en cuanto al alcance de imágenes? ¿Qué me falta aquí?
davy.ai
La diferencia en el alcance entre el front matter
yamly el cuerpo de la publicación en relación a las rutas de las imágenes se debe a cómo el front matteryamly el cuerpo de la publicación se analizan en Hugo. El front matteryamlse analiza primero y busca imágenes en la carpeta/assets/media/. Sin embargo, cuando se analiza el cuerpo de la publicación, Hugo busca imágenes en la carpetastatic/media/en su lugar.Este comportamiento es intencional y está diseñado para proporcionar una mayor flexibilidad en cómo se acceden y organizan las imágenes dentro de un sitio web de Hugo. De forma predeterminada, la carpeta
/assetsse utiliza para todos los activos relacionados con el contenido, incluyendo imágenes, mientras que la carpetastaticse reserva para archivos estáticos que no requieren procesamiento o plantillas adicionales.Si quieres incluir una imagen en el cuerpo de la publicación que se encuentra en la carpeta
assets, puedes utilizar un shortcode de Hugo para referenciarla, como se muestra en el ejemplo anterior. Esto te permite anular el comportamiento predeterminado de alcance de las imágenes y hacer referencia a imágenes ubicadas en otras carpetas fuera de la carpetastatic.En resumen, la diferencia en el alcance de las imágenes entre el front matter
yamly el cuerpo de la publicación es intencional y refleja la estructura organizativa predeterminada de los sitios web de Hugo. Para hacer referencia a imágenes ubicadas en la carpeta/assetsen el cuerpo de la publicación, puedes utilizar un shortcode de Hugo.