BBCODE Imagen + Texto a la derecha

jjuuaannk · 21 Nov 2009

Bueno amigos, aqui le explicare como tener un bbcode que podamos insertar una imagen con un texto a la derecha....

Primer paso: Ir A Admincp -> Códigos BB -> Agregar Nuevo Código BB

Tendremos una pantalla como esta:

Enlace eliminado

Titulo de nuestro BBCODE: Imagen+Texto

Nombre de la Etiqueta: IMGT

Remplazar:

HTML:

<!-- VBHispano.com -->
<TABLE border=0 cellSpacing=0 cellPadding=0><tr><td>
<img  src="{option}" border="0"> </td><td style="padding: 10px">{param}</td></tr></table>
<!--/  VBHispano.com -->

Ejemplo: [IMGT] texto [/IMGT]

Descripción: Inserta una imagen a la derecha de un texto

Usar {option}: Lo Elijemos a SI

Imagen de Botón (Opcional): ./images/editor/imgt.png

Y Guardamos...

Nos debería de quedar de esta manera:

Enlace eliminado

Subimos esta imagen Enlace eliminado por FTP al directorio /images/editor/ para identificar nuestro bbcode

y nos vamos hacer nuestro tema de prueba...

Insertamos nuestro texto:

Ejemplo:

VBHISPANO.COM Solo podrán acceder y utilizar los servicios y/o contenidos de vBHispano , quienes a tenor de la legislación vigente en su lugar de residencia puedan válidamente emitir su consentimiento para la celebración de contratos. Quienes a tenor de la legislación vigente no posean tal capacidad para acceder u obligarse válidamente a los términos y condiciones aquí establecidos, deberán obtener inexcusablemente autorización previa de sus representantes legales, quienes serán considerados responsables de todos los actos realizados por los incapaces a su cargo.
Cuando se trate de falta de capacidad por minoría de edad, la responsabilidad en la determinación de los servicios y contenidos a los que acceden los menores de edad corresponde a los mayores a cuyo cargo se encuentren.

Seleccionamos el Texto y damos click a nuestro nuevo icono...

Al dar click sobre nuestro nuevo icono Enlace eliminado nos pedira nuestra opcion, alli insertaremos la ruta de la imagen...

Ejemplo de Imagen: http://files.vbulletin.com/images/cart/vbhero.png

y nos quedara así:

[imgt="http://files.vbulletin.com/images/cart/vbhero.png"]VBHISPANO.COM Solo podrán acceder y utilizar los servicios y/o contenidos de vBHispano , quienes a tenor de la legislación vigente en su lugar de residencia puedan válidamente emitir su consentimiento para la celebración de contratos. Quienes a tenor de la legislación vigente no posean tal capacidad para acceder u obligarse válidamente a los términos y condiciones aquí establecidos, deberán obtener inexcusablemente autorización previa de sus representantes legales, quienes serán considerados responsables de todos los actos realizados por los incapaces a su cargo.
Cuando se trate de falta de capacidad por minoría de edad, la responsabilidad en la determinación de los servicios y contenidos a los que acceden los menores de edad corresponde a los mayores a cuyo cargo se encuentren.[/imgt]

Y el Resultado seria:

Enlace eliminado

y Listo Tenemos nuestro nuevo BBCODE para insertar imágenes con texto a la derecha...

Si desea que el texto rodee toda la imagen si dejar espacio debajo de ella,

en remplazar pongan lo siguiente:

HTML:

<!-- VBHispano.com -->
<img  src="{option}" style="float:left; padding: 10px 10px;"  border="0">{param}
<!--/  VBHispano.com -->

Siendo el Resultado:

Enlace eliminado

Un Saludo 😉

imported_Jhonnyf · 21 Nov 2009

Tu idea es buena, pero cuando haya mucho texto o la imagen sea muy grande vas a tener el siguiente detalle

A mi parecer el texto deberia rodear a la imagen, pero es solo cuestion de gustos

Saludos

jjuuaannk · 21 Nov 2009

Para que el texto rodee la imagen y no se haga como nos explica el amigo Enlace eliminado

en remplazar pongan lo siguiente:

HTML:

<!-- VBHispano.com -->
<img  src="{option}" style="float:left; padding: 10px 10px;"  border="0">{param}
<!--/  VBHispano.com -->

Siendo el Resultado:

Enlace eliminado

Saludos

imported_Jhonnyf · 21 Nov 2009

Ahora tienes otro detalle, el texto esta muy pegado a la imagen y no se ve bien, y las img no aceptan padding asi que metelo mejor en un DIV

PHP:

<div style="padding: 1px 15px 5px 1px; display: block; ">
{option}
</div>
{param}

he hecho un BBCODE para poner Adsense al igual que tu lo haces con una imagen, pero lastimosamente no puedo poner el enlace... lo cual es medio extraño ya que los foros son de tematica diferente. (Soporte Básico vBulletin y Soporte Avanzado vBulletin)

"Cosas del Orinoco, que yo no sé ni tu tampoco 🙂"

jjuuaannk · 21 Nov 2009

bueno le he probado poniendo padding a la imagen y me ha funcionado...
ahy esta la imagen de muestra

saludos

imported_Jhonnyf · 21 Nov 2009

A mira, si aceptaba padding, y acabo de testear tu ¿? codigo mejorado

Algo nuevo se aprende cada dia, solo que no sé quien aprendió de quien el dia de hoy XD

FIREWOLF · 22 Nov 2009

yo, de los 2
muchas gracias amigos

es con el ejemplo nº 1, sin rodear la imagen
la 1º imagen, es bbcode texto más imagen, y la 2º es imagen + imagen, es decir, usando el mismo bbcode, pero en vez de señalar texto, he señalado el grupo de imagenes pequeña y le he puesto de referencia la grande, bien, no?

perdon por el doble post

tetsu · 9 Abr 2010

de casualidad esto no andará para v4.x???

BBCODE Imagen + Texto a la derecha

jjuuaannk

imported_Jhonnyf

jjuuaannk

imported_Jhonnyf

jjuuaannk

imported_Jhonnyf

FIREWOLF

tetsu

Temas similares