Insertar imagen en foros

[lobo]

En el editor de mensajes del foro hay un icono para INSERTAR IMAGEN, el cual simplemente añade un par de etiquetas, . ¿Alguien sabe qué hay que escribir entre éstas?. ¿Será el path a la imagen que se desea cargar?. Lo he intentado así en mi post anterior en el que deseaba insertar el DIAGRAMA DE CLASES, pero sólo aparece un icono y no responde al intentar descargar la imagen...

Gracias.

[Mario R. Rancel]

Hola, el botón que aparece en el editor sirve para insertar imágenes que disponen de una url en internet, es decir, no se pueden insertar imágenes existentes en nuestro propio ordenador (al menos directamente, indirectamente sí).

Para insertar imágenes que ya existen en internet lo que tendríamos que hacer es lo siguiente:

1. Obtener la ruta de la imagen. Para ello en la página web correspondiente pulsamos botón derecho y pedimos "Propiedades" o "Información de la imagen". Con ello obtendremos una ruta como http:// i877. photobucket.com/albums/ab336/cesarkrall/joomla.png?t=1290071557

2. En el mensaje que estemos escribiendo pulsaremos el botón insertar imagen y cuando aparezcan las etiquetas [im g] [/im g] escribiremos la ruta entre esas dos etiquetas, quedará algo como [im g] http:// i877.photobucket. com/albums/ab336/cesarkrall/joomla.png?t=1290071557[/im g]

Además suele ser aconsejable centrar la imagen, para ello seleccionamos lo anterior (etiquetas incluidas) y pulsamos en el botón del editor para "Centrado". Nos quedará algo como esto:

[cen ter][im g] http:// i877.photobucket. com/albums/ab336/cesarkrall/joomla.png?t=1290071557[/im g]
[/cen ter]

Finalmente pulsamos en previsualizar para comprobar si queda como nosotros deseamos.

Un problema habitual es que la imagen sea demasiado pequeña o demasiado grande, eso hay que mirarlo en cada caso y ver cómo queda. Un tamaño adecuado puede ser entre 300 píxeles y 600 píxeles de ancho, aunque depende de la imagen.

El resultado de todo esto será algo parecido a esto, en este caso la imagen es un pelín grande:

Con una imagen de tamaño más reducido:

Hay una forma de insertar la imagen que permite indicar que se muestre con un determinado tamaño que puede ser más pequeño al que realmente tiene.

[cen ter][im g width=250] http:// i877.photobucket. com/albums/ab336/cesarkrall/joomla.png?t=1290071557[/im g]
[/cen ter]

Ahí se ve el width 250 que sirve para limitar la anchura a un valor que queramos.

Saludos

[Mario R. Rancel]

Se me olvidaba comentar cómo se puede insertar una imagen si no está en internet. Hay varias vías, pero quizás lo más sencillo es subirla a internet. Para ello tendríamos que abrir una cuenta en un alojador gratuito de imágenes como imgur (http://imgur.com/) puede ser este o cualquier otro (por ejemplo http://photobucket.com/ ó https://www.dropbox.com/)

Una vez abierta la cuenta, subimos la imagen desde nuestro ordenador. Una vez subida, ya podemos capturar la url como en la explicación anterior y con esa url publicar la imagen.

Saludos

[lobo]

Gracias Mario por tu didáctica respuesta. Voy a probar en este post si me funciona.

inserto la imagen de captura del DIAGRAMA DE CLASES de Bluej correspondiente al ejercicio de repaso que he publicado hoy.

Me he registrado en Dropbox y he subido la imagen a mi cuenta.
El enlace a la imagen es el siguiente:

https://www.dropbox.com/s/bq9972gvnu7gkxt/Diagrama%20de%20Clases.PNG?dl=0

Veamos si funciona.

Inserto este enlace entre las etiquetas ,

...pero la imagen no se ve.

El formato de la imagen es .PGN, ¿será válido?.

Pruebo con una imagen .jpg:

Tampoco se ve...

El Dropbox lo tengo configurado (por defecto) para que Cualquiera que tenga el enlace puede verlo

Saludos.

[Mario R. Rancel]

Hola, intentando buscar una explicación a lo que ocurre llego a lo siguiente. La ruta https://www.dropbox.com/s/bq9972gvnu7gkxt/Diagrama%20de%20Clases.PNG?dl=0 en principio parece una ruta de imagen válida. Sin embargo, si la escribimos en el navegador realmente no se carga una imagen "simple", sino que vemos que se carga una página web completa dentro de la cual está la imagen. Las etiquetas [im g] ... [ / im g] no admiten páginas web, sino únicamente enlaces a imágenes digamos de carga directa. La ruta aparentemente es simple, lo que puede estar ocurriendo es que dropbox a nivel interno del servidor cuando recibe una petición con ese tipo de ruta ejecute un proceso que dé lugar a que en lugar de cargar la imagen simplemente, se cargue la imagen dentro de una web completa.

Resumiendo: se necesita un path o ruta directo a la imagen.

Investigando un poco, he llegado a que esto por ejemplo es una ruta directa: https://photos-1.dropbox.com/t/1/AACkoESYsf-RFTFY_WcCzWFoDMLReovqQPoSSRQbH7Y7gw/12/348384130/png/320x480/3/1413446400/0/2/Diagrama%20de%20Clases.PNG/Ixw_uL3nxdt_St6ZjavsUlgWjc4Bxx48DeH1OwBrUts

Que se corresponde con esta imagen:

Esto también es una ruta directa pero nos muestra la imagen más grande https://photos-1.dropbox.com/t/1/AACkoESYsf-RFTFY_WcCzWFoDMLReovqQPoSSRQbH7Y7gw/12/348384130/png/1024x768/3/1413446400/0/2/Diagrama%20de%20Clases.PNG/Ixw_uL3nxdt_St6ZjavsUlgWjc4Bxx48DeH1OwBrUts

Aquí parece que el tamaño de imagen viene determinado por el parámetro de la ruta 1024x768 (en la anterior ruta tenemos otro parámetro de modo que el tamaño es menor).

La cuestión ahora es: ¿cómo obtener esa ruta directa? En principio habría varias vías:

a) Cuando subas la imagen, mira a ver si en algún lado te aparece la opción "Compartir imagen" ó "Enlace directo a la imagen" ó similar.

b) Con botón derecho sobre la imagen, pedir "Propiedades" o "Ver información de la imagen" (en algunos casos esta opción no está disponible)

c) Ver el código fuente de la página web donde aparece la imagen, buscar la etiqueta <img> ... correspondiente a la imagen y buscar el valor del atributo src. En este caso encontramos un trozo de código que es este:

Código: [Seleccionar]

<img id="preview-img" alt="" onclick="
                $(document.body).addClassName(&quot;photo-zoom&quot;);
                $(document.body).removeClassName(&quot;preview-photo&quot;);
                $j(event.target).trigger(&quot;photo-zoom&quot;);
            " class="content-shadow" src="https://photos-1.dropbox.com/t/1/AACkoESYsf-RFTFY_WcCzWFoDMLReovqQPoSSRQbH7Y7gw/12/348384130/png/1024x768/3/1413446400/0/2/Diagrama%20de%20Clases.PNG/Ixw_uL3nxdt_St6ZjavsUlgWjc4Bxx48DeH1OwBrUts" onload="
                var time = new Date().getTime();
                on_script_loaded(function() {
                    FilePreview.photo_loaded(time);
                });
            " data-original-href="https://www.dropbox.com/s/bq9972gvnu7gkxt/Diagrama%20de%20Clases.PNG?dl=1">
Y dentro de ese trozo de código es donde encontramos el valor src.

Lo que en principio parece más sencillo sería:

a) Subir la imagen
b) Elegir el tamaño de imagen
c) Buscar un botón share, compartir, enlazar o similar que nos dé la ruta directa

Pero tendrías que probarlo, estoy comentando cuestiones sin tener el entorno de dropbox delante y puede que haya algunas variaciones.

Saludos

[lobo]

Gracias de nuevo Mario.

Tras pelearme un rato con ello, al fin lo he conseguido desde photobucket.

Me han funcionado dos métodos:

1) Clic con botón derecho sobre la imagen a compartir --> Abrir enlace en una ventana / pestaña nueva --> Clic con botón derecho sobre la imagen (en la nueva ventana / pestaña) --> Copiar URL de imagen.

La dirección a copiar entre las etiquetas de insertar imagen es http://i1377.photobucket.com/albums/ah51/auuuu/DiagramadeClases_zps8764e4c7.png?t=1413451996

2) Clic con botón izquierdo en el icono superior derecho de la imagen (en su ventana raíz) --> En el desplegable seleccionar Share Links --> Direct (copia a portapapeles).

La dirección a copiar entre las etiquetas de insertar imagen es
http://i1377.photobucket.com/albums/ah51/auuuu/DiagramadeClases_zps8764e4c7.png

Sin duda, la mejor cualidad de un informático es la tenacidad.

Nos vemos por aquí...

Saludos.

[Mario R. Rancel]

Sí, tenacidad y a veces apagar el ordenador e irse a dar un paseo, porque muchas veces con pequeños (o grandes) problemas la cabeza acaba echando humo y al día siguiente lo resuelves del tirón. A mí en particular me gusta muchas veces trabajar sobre papel cuando puedo... suele ser menos estresante, aunque vía papel no podríamos intercambiar información con la velocidad con que lo hacemos por ejemplo aquí. Saludos