Cómo Insertar Imágenes con Código HTML
Aunque WordPress nos da la posibilidad de insertar imágenes en un post de una forma muy sencilla.
Recuerda (con los botones del editor visual), en ocasiones necesitaremos incluir imágenes en alguna parte de nuestra plantilla como en los widgets de texto, comentarios, etc., para lo cual emplearemos unas líneas de código HTML.
Sí, ya lo sé... Oyes código HTML y seguro que se te enciende una luz de alarma y tienes taquicardia, pero te prometo que insertar imágenes con código HTML es más sencillo de lo que parece, ¿no me crees?
1º Etiqueta <img />
Lo primero es utilizar la etiqueta <img />, la etiqueta img está vacía lo que quiere decir que no necesita una etiqueta de cierre.
Pero para que nos sirva también para XHTML añadiremos un espacio y la barra diagonal antes del signo mayor que.
2º Atributo src
Le añadimos el atributo src, sería la URL donde podemos encontrar la imagen.
<img src=”URL de la imagen”/>
¿Cómo obtener la dirección URL de una imagen en WordPress?
Doy por sentado que ya tienes subida la imagen a tu hosting web, así que bastará con ir al Escritorio
Hacer clic en Medios y seleccionamos Librería Multimedia, elegimos la imagen que queremos insertar y hacemos clic en Editar y arriba a la derecha en la pantalla que te aparece obtendrás la dirección en URL archivo.
3º Atributo alt
Ahora pondremos el atributo alt, con éste atributo estaremos especificando un texto alternativo para el caso de que la imagen no cargue.
Asimismo si pasamos el cursor sobre la imagen también nos aparecerá dicho texto pero sólo si utilizas Internet Explorer, si usas Chrome, Firefox etc entonces además tendrás que añadir el atributo title como en el ejemplo:
<img src=”URL de la imagen” alt=”texto alternativo” title=”texto alternativo”/>
Lo recomendable es añadir ambos atributos porque no sabemos con que navegador accederán para visualizar la imagen.
4º Atributos height y width (alto y ancho)
Ahora puedes especificar el tamaño de la imagen, para esta ocasión usaremos los atributos height y width.
Ten en cuenta que con estos atributos sólo cambiarás el tamaño con el que se mostrará la imagen pero no reducirás el peso de la misma.
Mi consejo es optimizar la imagen antes de subirla a tu blog o sitio web con programas como Jpeg Optimizer.
<img src=”URL de la imagen” alt=”texto alternativo” title=”texto alternativo” width=”250” height=”80”/>
La imagen que aparezca tendrá 250 pixeles de ancho por 80 pixeles de alto.
¿Te ha gustado cómo insertar imágenes con código HTML?
Y recuerda también que siempre nos hace mucha ilusión si lo compartes en tus redes sociales.
Muchas gracias por adelantado 🙂
¡Un abrazo!
-
-
Gilbert Lanzarote dice:Hola clara
Subir la web a tu servidor si no lo haces correctamente puede darte más de un problema. Hay que subir la base de datos por un lado, luego hacer ajustes en el fichero wp-config.php y por último migrar tu wordpress...
Te recomiendo que subas tus instalaciones en un servidor remoto (Hosting) ya que te dará menos complicaciones que hacerlo en un servidor local.
Lo mejor si estás empezando es no complicarte, es decir, creas tu wordpres en tu hosting y marcas la opción "Disuade a los motores de búsqueda de indexar este sitio" en Ajustes.
Ahora puedes hacer todas las pruebas que quieras, instalar plugins, retocar la plantilla, subir contenido, etc.. en definitiva, puedes retocar lo que te parezca y luego al terminar vas de nuevo a Ajustes y desmarcas la opción de disuadir a los motores de búsqueda y ya tienes tu página operativa 100 %.
Un abrazo
-
- Victoria dice:
hola estamos armando un blog para una ONG, y queremos subir imagenes pero que estan en una carpeta en el disco rigido, utilizando este comando:
img src='file:///C:/Users/PCTRABAJO/Desktop/cine.jpg'
pero no funciona. Sabemos que si esta en la web si funciona pero desde un disco no. ¿que podemos hacer? somos nuevos en esto de programar.
Agradeceriamos pronta respuesta, Gracias por la atencion de antemano.- Gilbert Lanzarote dice:
Hola Victoria
No te funciona porque primero tienes que subir la imagen desde tu pc a tu servidor (donde tienes alojado tu blog) que es el que va a estar las 24 horas operativo. Para ello vas al menú de tu izquierda, haces clic en Medios y luego en añadir nuevo y subes la imagen. Y desde ahí la insertas en la entrada.
Además la secuencia correcta para añadir una imagen no la tienes bien escrita, para no repetirme, fíjate en el apartado 2 del artículo, ahí tienes como escribir correctamente la dirección de una imagen para insertar.
Si insertas una imagen desde tu pc, lo que pasará aunque consigas hacerlo bien, es que cuando apagues tu pc la imagen ya no se vería en tu blog, es decir, la imagen sólo se vería cuando tengas tu pc conectado a internet. Para que esto no suceda, se suben las imágenes al servidor que está operativo las 24 horas.
Un abrazo.
-
-
Pues sí, yo soy de las que oigo html y tengo taquicardia y si me hablas de css ya ni te cuento, necesito respiración asistida.
Es verdad que luego cuando te lo explican lo ves clarito pero es que esto de una coma fuera de lugar de pueda desbaratar todo, da un poco de miedo. Me guardo el enlace para cuando quiera insertar una imagen y así me tiro al "copiar-pegar" y voy más tranquila.- Gilbert Lanzarote dice:
Hola Patricia, lo primero Gracias por comentar (Hay que ver la que ha armado Jony ja.ja - que bueno)
No soy un experto en html pero si necesito hacer algo en concreto como en este caso insertar una imagen pues haya que voy 🙂 Y sí, es mejor copiar y pegar, que quieres que te diga 🙂
1 saludo
-
- Jony dice:
Hola Gilbert!
Interesante artículo donde explicas muy bien el funcionamiento HTML. Yo personalmente no me considero un profesional en ese tema. Más bien he ido aprendiendo sobre la marcha, pero siempre va bien este tipo de artículos para mejorar nuestras páginas.
Un saludo!- Gilbert Lanzarote dice:
Hola Jony, gracias por la visita.
Sinceramente yo no soy un experto en Html, pero me gusta compartir algún recurso de vez en cuando por muy sencillo que éste sea.
Como sabes cuando se empieza cualquier distancia nos parece insalvable y cualquier ayuda aunque llegue en forma de código Html se agradece.1 saludo.
-
Deja una respuesta
Hola, es perfecto el comentario... pero (siempre los malditos peros). Si estoy realizando todo el trabajo en localhost (plantilla desde 0 y relleno de información) ...luego al subir ¿como se traduce?, ¿toma la ruta fija, o se cambia a relativa o se hace un lío padre?. No tengo en este momento un sitio con WP para probarlo y me queda la gran duda.
Salu2. Clara