La imagen del post: una fuente por nombre con markeup-images
La skill markeup-images lleva la portada desde la fuente del vault hasta public/img: recorte 1920×1080, variantes 640 y 1280 en WebP y aviso si dos archivos compiten por el mismo nombre.
Navegando en el blogver navegación en todos los blogs
La skill markeup-images —«Procesa las imagenes del post: una fuente, tres tamanos»— es una de las
habilidades que el sistema MarkeUP tiene escritas para Hermes Agent y para Cline.
Esta página es su ficha pública: lo que sabe hacer, cuándo se usa y qué comandos ejecuta.
De la foto original a la portada del post: un solo archivo por nombre y tres tamaños que genera el pipeline.
El texto de la sección «Instrucciones del canon» está transcrito del fichero fuente —que se escribe sin tildes por convención de su propio gate—, así que es exactamente lo que lee el agente cuando le pides algo. La cabecera y esta entradilla sí están redactadas para leerlas.
| Dato | Valor |
|---|---|
| Skill | markeup-images |
| Responsabilidad | Procesa las imagenes del post: una fuente, tres tamanos. |
| Versión | 1.0.0 |
| Autoría | uriszarernesto-blip · licencia MIT |
| Plataformas | linux · macos |
| Tags del canon | images · sharp · webp · pipeline · vault · markeup |
| Skills relacionadas | markeup-frontmatter · markeup-cli · markeup-media |
| Fuente | ~/.hermes/skills/markeup/markeup-images/SKILL.md |
Responsabilidad unica: la imagen de un post, de la fuente a public/img/. La regla que
gobierna todo lo demas: una sola fuente por nombre.
Detalle (variantes, informe de colisiones, roturas historicas): references/pipeline-rules.md.
Doc de sistema: AGENTS.md § Imagenes.
- Un post nuevo necesita portada (
image:del frontmatter). - Hay que reemplazar una foto sin que produccion y local sirvan cosas distintas.
npm run images:check(onpm run doctor) falla en rojo.image:apunta a un archivo que no existe, o el-640.webpque pintaResponsiveImageno aparece.
src/content/posts/img/<nombre>.<ext> (la fuente) → npm run images → public/img/<nombre>.webp
(master 1920×1080 recortado cover + variantes -640 y -1280, solo WebP).
| Que | Donde | Manda |
|---|---|---|
| Fuente | src/content/posts/img/ (solo el nivel superior) | La persona |
| Salida | public/img/ (generado) | npm run images |
| Sobrantes | src/content/posts/img/_originales/ | La persona (mover, no borrar) |
Un archivo por nombre. foto.jpeg y foto.webp escriben el mismo
public/img/foto.webp, y quien gana no puede depender del orden de procesado: en local
ganaba la ultima que editabas y en un clon limpio (Cloudflare) decidia una prioridad de
extension → produccion servia una foto y local otra.
Al reemplazar una imagen se sustituye la fuente que ya existe (mismo nombre, misma
extension) y lo que sobra se mueve a _originales/.
cd ~/markeup
npm run images # procesa lo nuevo/modificado
npm run images -- --force # regenera TODO (tras cambiar fuentes de sitio)
npm run images -- --watch # vigila y reprocesa
npm run images:collisions # informe: quien compite por cada nombre
npm run images:check # lo mismo + exit 1 si hay duplicados (BLOQUEANTE en CI)
npm run images:verify # hash a hash: ¿public/img es lo que producen las fuentes?
npm run sync:images # imagenes huerfanas en public/img (dry-run, no borra)
npm run sync:images:apply # borra las huerfanas (pide confirmacion; --yes en CI)images:checkes el gate: dos fuentes con el mismo basename lo tumban, y esta ennpm run doctor. En un clon limpio (Cloudflare) no se ejecuta: hay que dejarlo verde en local.sync:imagesnunca tocapublic/img/og/(tarjetas Open Graph) ni_originales/(esa carpeta esta fuera del nivel escaneado).--include-sourceses la unica forma de quesync:imagesmiresrc/content/posts/img/: sin ese flag tus fuentes estan a salvo.
| Sintoma | Causa | Que se hace |
|---|---|---|
images:check exit 1 | Dos fuentes, mismo nombre | npm run images:collisions, decidir cual es la buena, mover la otra a _originales/ |
images:verify exit 1 | public/img no coincide con las fuentes | npm run images -- --force y commitear public/img/ |
| La foto no cambia en produccion pero si en local | Colision de fuentes resuelta por el orden | Ver la tabla de arriba (es el sintoma clasico) |
image: roto | Archivo fuera de img/, con tilde o .md de mas | Ver markeup-frontmatter |
| Hueco en vez de imagen | La fuente no esta en el nivel superior | Moverla a src/content/posts/img/ |
- La imagen se guarda en
.webpdesde el principio: el pipeline no “convierte lo que le llegue”, espera la fuente correcta en el sitio correcto. - Nombra la fuente igual que el
slugdel post (el-aura.webp), como pidemarkeup-frontmatter; ahorra el placeholder. - No editar a mano nada de
public/img/: es salida del pipeline (se regenera y se commitea). - Tras cambiar fuentes,
npm run images -- --forceantes denpm run build. - Tocar imagenes no invalida la cache de render (el
.mdno cambia): no hace faltanpm run content:cache. Esa cache es la de las caches de medios (markeup-media).
cd ~/markeup
npm run images:check # exit 0: sin duplicados
npm run images:verify # exit 0: public/img coincide con las fuentesreferences/pipeline-rules.md— variantes, recorte, informe de colisiones y las dos roturas.markeup-frontmatter— el campoimage:y su valor por defecto.- Codigo:
scripts/js/process-images.js(pipeline) yscripts/js/sync-images.js(huerfanas).
¿Quieres saber cómo se piden estas cosas? La guía completa está en skills de Hermes Agent, con la chuleta de objetivos y los casos paso a paso.
La imagen del post
Explora las ramas del artículo