Simplificar y mejorar las referencias a imágenes

[LuisPalacios]

Necesito que las imágenes se puedan añadir al fichero Markdown de forma sencilla pero que aparezcan todas de una forma específica, centradas, con un caption, con un formato simple pero atractivo.

Además me gustaría que si en el futuro cambio dicho formato solo tenga que tocarlo en el fichero personalizado CSS.

Puedo usar código HTML pero lo ideal sería poder usar Custom Liquid Tag's. Por desgracia GitHub lo prohibe.

Opciones:

• Utilizar HTML y CSS

En ./assets/main.scss he creado las siguientes clases:

// Defino mis propias clases
:root {
  --screen_background: #eeeeee;
  --screen_border: #666666;
}

// Para mostrar las capturas de pantalla
.screen_caption {
  text-align:center;
  margin:1em auto;
  font-style: italic;
  font-size: 0.75em;
}

.screen_outer {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
}

.screen_inner {
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
  background-color: var(--screen_background);
  border-radius: 1em;
  border:1px var(--screen_border) solid;
}

Desde los ficheros Markdown utilizo:

<div class="screen_outer"><div class="screen_inner">
<figure>
    <img src="/assets/img/posts/x11-desde-root-1.png" alt="centered image" width="600" alt='Preferencias XQuartz' />
    <figcaption class="screen_caption">Preferencias XQuartz en cliente Mac</figcaption>
</figure>
</div></div>

• La segunda opción sería instalar y utilizar mi propio plugin

Por desgracia Github Pages no lo permite. Parece ser que GitLab si que lo permite, así que una opción (complicada) sería migrar todo a GitLab.

• Por último he encontrado estos ejemplos de código Liquid que NO usan Ruby, por lo tanto sí que se pueden cargar en Github Pages.

Jekyll without plugins

Sigo investigando...

[LuisPalacios]

La última opción es la mejor. En este sitio hay un montón de ejemplos sobre cómo conseguir resultados muy interesantes sin necesidad de usar Plugins y Ruby.

Siguiendo esos ejemplos me he fabricado un método para insertar de forma sencilla imágenes con subtítulo y un formato homogéneo y más atractivo.

Hay que crear el fichero _includes/showImagen.html:

<div class="screen_outer">
    <div class="screen_inner">
    <figure>
            <img src="{{ include.src }}" 
                 width="{{ include.width }}" 
                 alt="{{ include.subtitulo }}" />
            <figcaption class="screen_caption">{{ include.caption }}</figcaption>
        </figure>
    </div>
</div>

En ./assets/main.scss tengo creadas las clases CSS que se usan en el html anterior:

// Defino mis propias clases para mostrar imágenes
:root {
  --screen_background: #eeeeee;
  --screen_border: #666666;
}

// Para mostrar las capturas de pantalla
.screen_caption {
  text-align:center;
  margin:1em auto;
  font-style: italic;
  font-size: 0.75em;
}

.screen_outer {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
}

.screen_inner {
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
  background-color: var(--screen_background);
  border-radius: 1em;
  border:1px var(--screen_border) solid;
}

A partir de ahora, en los ficheros Markdown introduzco este trozo de "código Líquido" cada vez que quiera poner una imagen.

{% include showImagen.html 
      src="/assets/img/posts/x11-desde-root-1.png" 
      caption="Preferencias XQuartz en cliente Mac." 
      width="600px"
      %}