Presidencia de la Nación

Insertar imágenes en un campo de texto


En esta página


Insertar una imagen

Dentro de un campo de texto, podés insertar una imagen de dos modos:

  • si es nueva, subila a la plataforma e insertala en el cuerpo de texto:
    • subí la imagen de tamaño, resolución y formato adecuados (no más de 800 píxeles de ancho, resolución 72 dpi y formato jpg para fotografías o png para ilustraciones con fondo transparente) en el apartado Insertar imagen body que aparece dentro del tipo página, página de libro o noticia en la que estás trabajando.
    • completá los campos que aparecen debajo de la miniatura de la imagen:
      • Texto alternativo: describí la imagen, paso obligatorio por accesibilidad web.
      • Título: escribí el epígrafe de la imagen (no obligatorio).
    • posicioná el cursor en el campo de texto donde quieras que vaya la imagen (siempre entre dos párrafos y con una línea de espacio libre arriba y abajo) y hacé clic en el botón Insertar para que te escriba solo el código markdown.
  • si la subiste anteriormente:
    • buscá la ruta de la imagen y copiala (con www, nunca con back);
    • posicioná el cursor en el campo de texto donde quieras que vaya la imagen (siempre entre dos párrafos y con una línea de espacio libre arriba y abajo) y escribí el código con el siguiente formato:

      ![Texto alternativo que describe la imagen](www.argentina.gob.ar/ruta-de-la-imagen.jpg "Texto epígrafe de la imagen")

      Si no vas a escribir epígrafe, podés eliminar ese texto y las comillas que lo encierran. A continuación tenés un código de ejemplo y cómo se ve cuando lo publicás.

![Paisaje Jujuy](https://www.argentina.gob.ar/sites/default/files/paisaje_jujuy.jpg "Este es el epígrafe")

Paisaje Jujuy
Este es el epígrafe

Volver al índice

Insertar una galería de imágenes

Para la galería podés usar imágenes que subas por Insertar imagen body o imágenes que ya subiste anteriormente. Deben ser de hasta 800 píxeles de ancho, resolución 72 dpi y formato jpg. La relación de aspecto ideal es 16:9, el espacio vacío arriba o abajo se verá gris oscuro, como podés ver en el ejemplo de más abajo.

  • Subí las imágenes o copia sus rutas como explicamos en el apartado anterior.
  • Donde quieras que se vea la galería de imágenes (siempre entre dos párrafos y con una línea de espacio libre arriba y abajo) escribí el siguiente código:

    [[galeriaFotoMarkdown

    {![Texto alternativo 1](https://www.argentina.gob.ar/imagen-1.jpg "Texto epígrafe 1")}

    {![Texto alternativo 2](https://www.argentina.gob.ar/imagen-2.jpg "Texto epígrafe 2")}

    {![Texto alternativo 3](https://www.argentina.gob.ar/imagen-3.jpg "Texto epígrafe 3")}

    {![Texto alternativo 4](https://www.argentina.gob.ar/imagen-4.jpg "Texto epígrafe 4")}

    ]]

    Si bien en este caso publicamos cuatro fotos (están en las líneas 2 a 5 del código y encerradas entre llaves), puede llevar tantas como quieras, pero, a mayor cantidad de imágenes, más pesada va a ser la navegación para el usuario.

    A continuación tenés un código de ejemplo y cómo se ve cuando lo publicás. También probá la navegación en un celular.

[[galeriaFotoMarkdown
{![Casco](https://www.argentina.gob.ar/sites/default/files/imagenAtajo/nosotras-construimos-atajo-inscripcion.jpg "Epígrafe de la imagen 1")}
{![Ciencia](https://www.argentina.gob.ar/sites/default/files/imagenAtajo/ces-cienciaxmetas-atajo-ciencia.png "Epígrafe de la imagen 2")}
{![Construcción](https://www.argentina.gob.ar/sites/default/files/imagenAtajo/integrar-construccion-atajo-mapa.jpg "Epígrafe de la imagen 3")}
{![Herramientas](https://www.argentina.gob.ar/sites/default/files/imagenAtajo/nosotras-construimos-atajo-mapa.jpg "Epígrafe de la imagen 4")}
]]

Activar: 
0
Template: 
caritas3
Scroll hacia arriba