github - tamaño - insertar imagen md
Usar una leyenda de imagen en Markdown Jekyll (8)
Estoy alojando un blog de Jekyll en Github y escribo mis publicaciones con Markdown. Cuando agrego imágenes, lo hago de la siguiente manera:
Esto luego muestra la imagen en el texto.
Sin embargo, ¿cómo puedo decirle a Markdown que agregue un título que se presenta debajo o encima de la imagen?
Aquí está la solución más simple (pero no la más bonita): haga una tabla alrededor de todo. Obviamente, hay problemas de escala, y es por eso que doy mi ejemplo con el HTML para que pueda modificar el tamaño de la imagen fácilmente. Esto funcionó para mí.
| <img src="" alt="" style="width: 400px;"/> |
| My Caption |
La respuesta de Andrew @ andrew-wei funciona muy bien. También puede encadenar unos pocos, dependiendo de lo que esté tratando de hacer. Esto, por ejemplo, le proporciona una imagen con alt, título y título con un salto de línea y negrita y cursiva en diferentes partes de la leyenda:
img + br + strong {margin-top: 5px; margin-bottom: 7px; font-style:italic; font-size: 12px; }
img + br + strong + em {margin-top: 5px; margin-bottom: 7px; font-size: 12px; font-style:italic;}
Con el siguiente <img> markdown:
***Image:*** *description*
Puede intentar usar pandoc como su convertidor. Aquí hay un plugin de jekyll para implementar esto. Pandoc podrá agregar una leyenda de figura de la misma manera que su atributo alt automáticamente.
Pero debe empujar el sitio compilado porque github no permite complementos en las páginas de Github para mayor seguridad.
Sé que esta es una pregunta antigua, pero pensé que seguiría compartiendo mi método de agregar títulos de imagen. No podrá usar las etiquetas caption o figcaption , pero esta sería una alternativa simple sin usar ningún complemento.
En su rebaja, puede ajustar su leyenda con la etiqueta de énfasis y colocarla directamente debajo de la imagen sin insertar una nueva línea como esta:
*image_caption*
Esto generaría el siguiente HTML:
<p>
<img src="path_to_image" alt>
<em>image_caption</em>
</p>
Luego, en su CSS puede diseñarlo utilizando el siguiente selector sin interferir con otras etiquetas em en la página:
img + em { }
Tenga en cuenta que no debe tener una línea en blanco entre la imagen y el título porque eso generaría en su lugar:
<p>
<img src="path_to_image" alt>
</p>
<p>
<em>image_caption</em>
</p>
También puedes usar cualquier etiqueta que quieras que no sea em . Solo asegúrate de que haya una etiqueta, de lo contrario no podrás diseñarla.
Si no desea usar ningún complemento (lo que significa que puede enviarlo directamente a GitHub sin generar el sitio primero), puede crear un nuevo archivo llamado image.html en _includes :
<table class="image">
<caption align="bottom">{{ include.description }}</caption>
<tr><td><img src="{{ include.url }}" alt="{{ include.description }}"/></td></tr>
</table>
(y obviamente no soy diseñador. Probablemente deberías usar CSS en lugar de una tabla para que tu imagen se alinee correctamente)
Y luego muestra la imagen de tu reducción con:
{% include image.html url="/images/my-cat.jpg" description="My cat, Robert Downey Jr." %}
Si solo está agregando el título ocasional y desea utilizar la <figure> y <figcaption> más semánticas, considere la posibilidad de agregar ese html a su documento de descuento:
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
<figure>
<img src="{{site.url}}/assets/image.jpg" alt="my alt text"/>
<figcaption>This is my caption text.</figcaption>
</figure>
Vestibulum eu vulputate magna...
Es mucho más simple que jugar con los complementos y Markdown recomienda incrustar HTML , por lo que se mostrará bien.
Un pequeño riff en la respuesta más votado que encontré un poco más explícito es usar la sintaxis de jekyll para agregar una clase a algo y luego darle un estilo de esa manera.
Entonces en la publicación tendrías:
{:.image-caption}
*The caption for my image*
Y luego en su archivo CSS puede hacer algo como esto:
.image-caption {
text-align: center;
font-size: .8rem;
color: light-grey;
Sale luciendo bien!